Fix: axe a11y issues (fixes #5)

cerner · Sep 12, 2019 · 52a62cf · 52a62cf
1 parent 3d351a4
commit 52a62cf
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     }
   },
   "dependencies": {
-    "@material-ui/core": "^4.4.1",
+    "@material-ui/core": "^4.4.2",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/styles": "^4.4.1",
     "axios": "^0.19.0",

diff --git a/src/App.js b/src/App.js
@@ -21,7 +21,7 @@ function AppRouter(props) {
     return (
         <ThemeProvider theme={constants.THEME()}>
             <HashRouter basename={process.env.PUBLIC_URL}>
-                <div>
+                <main>
                     <Switch>
                         {flatten(pages, constants.PATHNAME_PROPERTY).map(p => (
                             <Route
@@ -55,7 +55,7 @@ function AppRouter(props) {
                         />
                         <Route component={NotFoundPage} />
                     </Switch>
-                </div>
+                </main>
             </HashRouter>
         </ThemeProvider>
     );

diff --git a/src/components/Drawer/NavItem.js b/src/components/Drawer/NavItem.js
@@ -94,6 +94,7 @@ class NavItem extends React.Component {
                 <RouterContextConsumer>
                     {context => (
                         <ListItem
+                            selected={context.pathname === href}
                             className={classes.itemLeaf}
                             disableGutters
                             {...other}

diff --git a/src/components/Drawer/ResponsiveDrawer.js b/src/components/Drawer/ResponsiveDrawer.js
@@ -160,15 +160,15 @@ class ResponsiveDrawer extends React.Component {
                         </Drawer>
                     </Hidden>
                 </nav>
-                <main className={classes.contentRoot}>
+                <div className={classes.contentRoot}>
                     <ContentBreadcrumb pathname={currentPage.pathname} />
                     <div
                         className={classes.content}
                         ref={this.setElementRef}
                         id={makeContentId(currentPage.pathname)}
                         key={currentPage.pathname}
                     />
-                </main>
+                </div>
             </div>
         );
     }

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -87,6 +87,7 @@ function Header(props) {
                         color="inherit"
                         href={gitHubURL}
                         target="_blank"
+                        rel="noopener"
                         aria-label={constants.GITHUB_REPO_TOOLTIP}
                         data-ga-event-category="AppBar"
                         data-ga-event-action="github"

diff --git a/src/components/Search/SearchBar.js b/src/components/Search/SearchBar.js
@@ -83,7 +83,7 @@ function SearchBar(props) {
                         inputValue,
                         isOpen
                     }) => (
-                        <div className={classes.container}>
+                        <div className={classes.container} title="Search" role="textbox">
                             {
                                 <div className={classes.search}>
                                     <div className={classes.searchIcon}>

diff --git a/src/components/SvgIcons/CarbonMainIcon.js b/src/components/SvgIcons/CarbonMainIcon.js
@@ -3,7 +3,6 @@ import classNames from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
 import SvgIcon from "../../../public/Carbon.svg";
-import constants from "../../helpers/constants";
 
 const styles = theme => ({
     logo: {
@@ -17,7 +16,7 @@ const styles = theme => ({
 const CarbonMainIcon = ({ classes, className }) => (
     <img
         className={classNames(classes.logo, className)}
-        alt={constants.HEADER_MAIN_TITLE}
+        alt="Home"
         src={SvgIcon}
     />
 );