starts automated accessibility steps: loads @axe-core/react on `nex…

…t dev`, enables `eslint-plugin-jsx-a11y` on `strict` (#245) This PR does a couple of things: 1. installs and enables `eslint-plugin-jsx-a11y`, and turns it on with `strict` mode * this triggers on the navbar improperly using the `<label>` element, which is a valid concern. reworking it involves changing the DOM structure of the navbar, which in turn breaks the CSS - I'd like to table fixing this until we rework the navbar * this also triggers on next's `<Link><a></a></Link>` pattern, which is realistically a false-positive. Unfortunately, there's no great solution to this, and as such I've temporarily disabled the rule for `<Link>`; see the comments in the eslint config for more info 2. installs and enables `@axe-core/react`, which logs accessibility issues to the console in dev * there are **a ton** of issues to resolve. so, I'll scope that out for another PR instead. Something that's still left to be desired is to get aXe's level of accessibility specificity, but getting it as a CI action (like `eslint-plugin-jsx-a11y`) - will figure that out soon! Part of #218.
uclaacm · Aug 20, 2021 · 25775b3 · 25775b3
1 parent 354a8a4
commit 25775b3
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 7 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:@next/next/recommended',
+    'plugin:jsx-a11y/strict',
   ],
   parserOptions: {
     ecmaFeatures: {
@@ -16,7 +17,11 @@ module.exports = {
     sourceType: 'module',
   },
   ignorePatterns: ['/build/*'],
-  plugins: ['react', 'import'],
+  plugins: [
+    'react',
+    'import',
+    'jsx-a11y',
+  ],
   settings: {
     react: {
       version: 'detect',
@@ -106,5 +111,14 @@ module.exports = {
 
     // Are you sure | is not a typo for || ?
     'no-bitwise': ['error'],
+
+    // bandaid fix; see the following github issues
+    // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/402
+    // https://github.com/vercel/next.js/issues/5533
+    'jsx-a11y/anchor-is-valid': [ 'error', {
+      components: [ 'Link' ],
+      specialLink: [ 'hrefLeft', 'hrefRight' ],
+      aspects: [ 'invalidHref', 'preferButton' ],
+    }],
   },
 };
diff --git a/components/Navbar.js b/components/Navbar.js
@@ -77,6 +77,8 @@ export default class Navbar extends React.Component {
 						</ul>
 					</div>
 					<div className="nav-section right" id="mobile-nav">
+						{/* TODO: resolve this by refactoring the navbar */}
+						{/* eslint-disable-next-line jsx-a11y/label-has-for */}
 						<label htmlFor="menu-toggle">
 							<div className="hamburger-icon">
 								<div className="bar" id="top-bar" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,9 +52,11 @@
     ]
   },
   "devDependencies": {
+    "@axe-core/react": "^4.2.2",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.1.0",
     "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,13 +1,20 @@
 import { config } from '@fortawesome/fontawesome-svg-core';
 import Head from 'next/head';
-import React from 'react';
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
 
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import '../styles/App.scss';
 
 config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 
 export default function App({ Component, pageProps}) {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      const axe = require('@axe-core/react');
+      axe(React, ReactDOM, 1000);
+    }
+  }, []);
   return (
       <>
         <Head>

diff --git a/pages/about.js b/pages/about.js
@@ -39,7 +39,7 @@ function About() {
 					<div className={`${styles.ornament} ${styles['square-ornament']}`}>
 						{/* TODO: resolve next/image issue */}
 						{/* eslint-disable-next-line @next/next/no-img-element */}
-						<img className={styles['square-splash']} src='/images/about1.png' alt="a picture of acm students at our annual CS BBQ!"/>
+						<img className={styles['square-splash']} src='/images/about1.png' alt="ACM students at our annual CS BBQ!"/>
 						{/* TODO: use next image without breaking deploy */}
 						<div className={styles['square-small']} />
 						<div className={styles['square-tiny']} />

diff --git a/styles/components/Navbar.scss b/styles/components/Navbar.scss
@@ -14,7 +14,7 @@
     height: 60px;
     width: 180px;
   }
- 
+
   #navbar-inner {
     margin: auto;
     max-width: 1000px;