Skip to content
This repository was archived by the owner on Oct 15, 2021. It is now read-only.

Commit 0e79119

Browse files
storiesOfRenstoriesOfRen
authored
feat(A11Y): Accessibility rewrite and addition of axe
1 parent cbf67b3 commit 0e79119

File tree

13 files changed

+239
-122
lines changed

13 files changed

+239
-122
lines changed

‎README.md‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
# Next.js TypeScript Material UI quality checking project
22

3-
43
Includes TypeScript, Material UI, ESLint, Jest, and React Testing Library
54

6-
- [Deploy your own](#deploy-your-own)
7-
- [How to use](#how-to-use)
8-
- [Scripts](#scripts)
9-
- [build](#build)
10-
- [dev](#dev)
11-
- [format](#format)
12-
- [lint](#lint)
13-
- [start](#start)
14-
- [test](#test)
15-
- [type-check](#type-check)
16-
- [quality](#quality)
5+
- [Deploy your own](#deploy-your-own)
6+
- [How to use](#how-to-use)
7+
- [Scripts](#scripts)
8+
- [build](#build)
9+
- [dev](#dev)
10+
- [format](#format)
11+
- [lint](#lint)
12+
- [start](#start)
13+
- [test](#test)
14+
- [type-check](#type-check)
15+
- [quality](#quality)
16+
- [Accessibility ](#accessibility)
17+
1718
## Deploy your own
1819

1920
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
@@ -39,6 +40,7 @@ All scripts can be run by prefixing with `npm run`, for example `npm run build`
3940
### build
4041

4142
Builds the production application in the .next folder.
43+
4244
```bash
4345
npm run build
4446
```
@@ -56,6 +58,7 @@ npm run dev -p 4000
5658
### format
5759

5860
Runs ESLint and Prettier auto-formatting.
61+
5962
```bash
6063
npm run format
6164
```
@@ -100,4 +103,10 @@ Runs `type-check`, `lint`, and `test` to make an better developer experience cat
100103

101104
```bash
102105
npm run quality
103-
```
106+
```
107+
108+
## Accessibility
109+
110+
### @axe-core/react
111+
112+
Runs in development environment and logs accessibility error results in dev tools console. Tool implementation is in `pages/_app.tsx`.

‎components/layout.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { makeStyles, createStyles, Typography } from '@material-ui/core';
2+
import { ReactElement } from 'react';
3+
import Head from 'next/head';
4+
5+
const useStyles = makeStyles(() =>
6+
createStyles({
7+
header: {
8+
padding: '1em 2em',
9+
},
10+
})
11+
);
12+
13+
interface LayoutProps {
14+
children: ReactElement[] | ReactElement | string;
15+
title: string;
16+
}
17+
18+
const Layout = ({ children, title }: LayoutProps): ReactElement => {
19+
const classes = useStyles();
20+
21+
return (
22+
<>
23+
<Head>
24+
<title>{title}</title>
25+
</Head>
26+
<header className={classes.header}>
27+
<Typography variant="h4" component="h1" gutterBottom>
28+
Next.js example
29+
</Typography>
30+
</header>
31+
<main>{children}</main>
32+
</>
33+
);
34+
};
35+
36+
export default Layout;

‎lib/tools.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,18 @@ export const tools: Tool[] = [
6464
alt: 'Prettier',
6565
},
6666
},
67+
{
68+
name: 'Deque Axe',
69+
description:
70+
'Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console.',
71+
link: 'https://github.com/dequelabs/axe-core-npm/blob/develop/packages/react/README.md',
72+
image: {
73+
src: '/axe.svg',
74+
width: 50,
75+
height: 50,
76+
alt: 'axe-core/react',
77+
},
78+
},
6779
];
6880

6981
export interface Tool {

‎package-lock.json‎

Lines changed: 44 additions & 29 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"quality": "npm run type-check && npm run lint && npm run test"
2020
},
2121
"devDependencies": {
22+
"@axe-core/react": "^4.2.0",
2223
"@babel/core": "^7.13.16",
2324
"@babel/node": "^7.13.13",
2425
"@babel/plugin-transform-typescript": "^7.13.0",

‎pages/_app.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,23 @@ import CssBaseline from '@material-ui/core/CssBaseline';
44
import theme from '../lib/theme';
55
import React, { useEffect } from 'react';
66

7+
// Determines if we are running on server or in client.
8+
const isServerSideRendered = () => {
9+
return typeof window === 'undefined';
10+
};
11+
12+
/**
13+
* Accessibility tool - outputs to devtools console on dev only and client-side only.
14+
* @see https://github.com/dequelabs/axe-core-npm
15+
*/
16+
if (process.env.NODE_ENV !== 'production' && !isServerSideRendered()) {
17+
import('react-dom').then((ReactDOM) => {
18+
import('@axe-core/react').then((axe) => {
19+
axe.default(React, ReactDOM, 1000, {});
20+
});
21+
});
22+
}
23+
724
const App = ({ Component, pageProps }: AppProps) => {
825
useEffect(() => {
926
// Remove the server-side injected CSS.

‎pages/_document.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import React from 'react';
88
class MyDocument extends Document {
99
render() {
1010
return (
11-
<Html>
11+
<Html lang="en">
1212
<Head>
1313
<meta charSet="utf-8" />
1414
<meta name="theme-color" content={theme.palette.primary.main} />

0 commit comments

Comments
 (0)