ui: accessibility upgrades

*Added alt-text to images *Increased color contrast on the cancel button *Added jsx-a11y linter - recommend to provide suggestion but not errors. *Added language to the page, removed user-no-scale *rearranged navigation to be a page region *added titles to pagination buttons *added skip-link for the repetitive page content *added aria-expanded to filter buttons *Document title updates on page change
target · Jul 15, 2019 · 96a372c · 96a372c
1 parent fafb486
commit 96a372c
Show file tree

Hide file tree

Showing 23 changed files with 272 additions and 77 deletions.
diff --git a/web/src/.eslintrc.js b/web/src/.eslintrc.js
@@ -6,12 +6,13 @@ module.exports = {
   parserOptions: {
     ecmaFeatures: { legacyDecorators: true },
   },
-  plugins: ['cypress', 'prettier'],
+  plugins: ['cypress', 'prettier', 'jsx-a11y'],
   extends: [
     'standard',
     'standard-jsx',
     'plugin:cypress/recommended',
     'plugin:prettier/recommended',
+    'plugin:jsx-a11y/recommended',
   ],
   rules: {
     'prettier/prettier': 'error',

diff --git a/web/src/app/details/DetailsPage.js b/web/src/app/details/DetailsPage.js
@@ -30,6 +30,9 @@ const styles = theme => ({
     [theme.breakpoints.up('md')]: { float: 'left' },
     margin: 20,
   },
+  mainHeading: {
+    fontSize: '1.5rem',
+  },
 })
 
 const mapStateToProps = state => {
@@ -125,12 +128,20 @@ export default class DetailsPage extends React.PureComponent {
           <Card>
             <CardContent>
               {icon && <div className={classes.iconContainer}>{icon}</div>}
-              <Typography variant='h5'>{title}</Typography>
-              <Typography name='details' variant='subtitle1'>
+              <Typography
+                data-cy='details-heading'
+                className={classes.mainHeading}
+                component='h2'
+              >
+                {title}
+              </Typography>
+              <Typography data-cy='details' variant='subtitle1'>
                 <Markdown value={details} />
               </Typography>
               {titleFooter && (
-                <Typography variant='subtitle1'>{titleFooter}</Typography>
+                <Typography variant='subtitle1' data-cy='title-footer'>
+                  {titleFooter}
+                </Typography>
               )}
             </CardContent>
           </Card>

diff --git a/web/src/app/escalation-policies/PolicyStep.js b/web/src/app/escalation-policies/PolicyStep.js
@@ -161,7 +161,7 @@ export default class PolicyStep extends Component {
           <Grid container spacing={2}>
             <Grid item className={classes.centerFlex}>
               <Typography variant='subtitle1'>
-                <strong>Step #{this.getStepNumber(step.id)}:</strong>
+                <b>Step #{this.getStepNumber(step.id)}:</b>
               </Typography>
             </Grid>
             <Grid item xs={10}>

diff --git a/web/src/app/icons/components/Icons.js b/web/src/app/icons/components/Icons.js
@@ -63,6 +63,7 @@ export class Slack extends Component {
         {...except(this.props, 'classes')}
         width={20}
         height={20}
+        alt='Slack'
       />
     )
   }
@@ -76,6 +77,7 @@ export class SlackBW extends Component {
         {...except(this.props, 'classes')}
         width={20}
         height={20}
+        alt='Slack'
       />
     )
   }

diff --git a/web/src/app/lists/PaginatedList.js b/web/src/app/lists/PaginatedList.js
@@ -66,6 +66,7 @@ class PaginationControls extends React.PureComponent {
         <Grid container item justify='flex-end' className={classes.controls}>
           <Grid item>
             <IconButton
+              title='back page'
               data-cy='back-button'
               disabled={!onBack}
               onClick={() => {
@@ -78,6 +79,7 @@ class PaginationControls extends React.PureComponent {
           </Grid>
           <Grid item>
             <IconButton
+              title='next page'
               data-cy='next-button'
               disabled={!onNext}
               onClick={() => {

diff --git a/web/src/app/main/NewApp.js b/web/src/app/main/NewApp.js
@@ -20,6 +20,7 @@ import LazyWideSideBar from './WideSideBar'
 import LazyNewUserSetup from './components/NewUserSetup'
 import Login from './components/Login'
 import URLErrorDialog from './URLErrorDialog'
+import { SkipToContentLink } from '../util/SkipToContentLink'
 
 const drawerWidth = '10.5em'
 
@@ -83,6 +84,7 @@ export default class App extends React.PureComponent {
             data-cy='app-bar'
             data-cy-format={cyFormat}
           >
+            <SkipToContentLink />
             <Toolbar className={classes.toolbar}>
               <ToolbarAction
                 handleShowMobileSidebar={() =>
@@ -116,7 +118,7 @@ export default class App extends React.PureComponent {
 
           <URLErrorDialog />
 
-          <main className={classes.main} style={{ marginLeft }}>
+          <main id='content' className={classes.main} style={{ marginLeft }}>
             <div className={classes.toolbar} />
             <ErrorBoundary>
               <LazyNewUserSetup />

diff --git a/web/src/app/main/components/Login.js b/web/src/app/main/components/Login.js
@@ -160,7 +160,7 @@ export default class Login extends Component {
     // create login button
     let loginButton = null
     const loginIcon = logoUrl ? (
-      <img src={logoUrl} className={classes.loginIcon} />
+      <img alt='GoAlert' src={logoUrl} className={classes.loginIcon} />
     ) : null
     if (fields) {
       loginButton = (

diff --git a/web/src/app/main/components/SideBarDrawerList.js b/web/src/app/main/components/SideBarDrawerList.js
@@ -154,56 +154,58 @@ export default class SideBarDrawerList extends React.PureComponent {
     const { classes } = this.props
 
     return (
-      <List className={classes.list} data-cy='nav-list'>
-        <div className={classes.logoDiv}>
+      <React.Fragment>
+        <div aria-hidden className={classes.logoDiv}>
           <img
             className={classes.logo}
             height={32}
             src={require('../../public/goalert-alt-logo-scaled.png')}
+            alt=''
           />
         </div>
         <Divider />
-
-        {routeConfig
-          .filter(cfg => cfg.nav !== false)
-          .map((cfg, idx) =>
-            this.renderSidebarNavLink(
-              navIcons[cfg.title],
-              getPath(cfg),
-              cfg.title,
-              idx,
-            ),
-          )}
-
-        <RequireConfig isAdmin>
-          <Divider />
-          {this.renderAdmin()}
-        </RequireConfig>
-
-        <Divider />
-        {this.renderSidebarNavLink(WizardIcon, '/wizard', 'Wizard')}
-        <Config>
-          {cfg =>
-            cfg['Feedback.Enable'] &&
-            this.renderFeedback(
-              cfg['Feedback.OverrideURL'] ||
-                'https://www.surveygizmo.com/s3/4106900/GoAlert-Feedback',
-            )
-          }
-        </Config>
-        {this.renderSidebarLink(
-          LogoutIcon,
-          '/api/v2/identity/logout',
-          'Logout',
-          {
-            onClick: e => {
-              e.preventDefault()
-              this.props.logout()
+        <List role='navigation' className={classes.list} data-cy='nav-list'>
+          {routeConfig
+            .filter(cfg => cfg.nav !== false)
+            .map((cfg, idx) =>
+              this.renderSidebarNavLink(
+                navIcons[cfg.title],
+                getPath(cfg),
+                cfg.title,
+                idx,
+              ),
+            )}
+
+          <RequireConfig isAdmin>
+            <Divider aria-hidden />
+            {this.renderAdmin()}
+          </RequireConfig>
+
+          <Divider aria-hidden />
+          {this.renderSidebarNavLink(WizardIcon, '/wizard', 'Wizard')}
+          <Config>
+            {cfg =>
+              cfg['Feedback.Enable'] &&
+              this.renderFeedback(
+                cfg['Feedback.OverrideURL'] ||
+                  'https://www.surveygizmo.com/s3/4106900/GoAlert-Feedback',
+              )
+            }
+          </Config>
+          {this.renderSidebarLink(
+            LogoutIcon,
+            '/api/v2/identity/logout',
+            'Logout',
+            {
+              onClick: e => {
+                e.preventDefault()
+                this.props.logout()
+              },
             },
-          },
-        )}
-        {this.renderSidebarNavLink(CurrentUserAvatar, '/profile', 'Profile')}
-      </List>
+          )}
+          {this.renderSidebarNavLink(CurrentUserAvatar, '/profile', 'Profile')}
+        </List>
+      </React.Fragment>
     )
   }
 }
diff --git a/web/src/app/main/components/ToolbarTitle.js b/web/src/app/main/components/ToolbarTitle.js
@@ -32,6 +32,7 @@ const styles = {
   title: {
     padding: '0 4px 0 4px',
     flex: 1, // pushes toolbar actions to the right
+    fontSize: '1.25rem',
   },
 }
 
@@ -116,12 +117,13 @@ const mapStateToProps = state => {
 @connect(mapStateToProps)
 export default class ToolbarTitle extends React.Component {
   renderTitle = title => {
+    document.title = `Go Alert - ${title}`
     return (
       <Typography
         className={this.props.classes.title}
         color='inherit'
         noWrap
-        variant='h6'
+        component='h1'
       >
         {title.replace('On Call', 'On-Call')}
       </Typography>

diff --git a/web/src/app/rotations/RotationUserList.js b/web/src/app/rotations/RotationUserList.js
@@ -15,6 +15,8 @@ import RotationSetActiveDialog from './RotationSetActiveDialog'
 import RotationUserDeleteDialog from './RotationUserDeleteDialog'
 import { DateTime } from 'luxon'
 import { UserAvatar } from '../util/avatar'
+import { withStyles } from '@material-ui/core'
+import { styles as globalStyles } from '../styles/materialStyles'
 
 const rotationUsersQuery = gql`
   query rotationUsers($id: ID!) {
@@ -36,6 +38,15 @@ const mutation = gql`
   }
 `
 
+const styles = theme => {
+  const { cardHeader } = globalStyles(theme)
+
+  return {
+    cardHeader,
+  }
+}
+
+@withStyles(styles)
 export default class RotationUserList extends React.PureComponent {
   static propTypes = {
     rotationID: p.string.isRequired,
@@ -47,10 +58,15 @@ export default class RotationUserList extends React.PureComponent {
   }
 
   render() {
+    const { classes } = this.props
     return (
       <React.Fragment>
         <Card>
-          <CardHeader title='Users' />
+          <CardHeader
+            className={classes.cardHeader}
+            component='h3'
+            title='Users'
+          />
           <CardContent>
             <Query
               query={rotationUsersQuery}

diff --git a/web/src/app/services/components/OnCallForService.js b/web/src/app/services/components/OnCallForService.js
@@ -10,7 +10,18 @@ import Typography from '@material-ui/core/Typography'
 import { UserAvatar } from '../../util/avatar'
 import { Link } from 'react-router-dom'
 import Spinner from '../../loading/components/Spinner'
+import { withStyles } from '@material-ui/core'
+import { styles as globalStyles } from '../../styles/materialStyles'
 
+const styles = theme => {
+  const { cardHeader } = globalStyles(theme)
+
+  return {
+    cardHeader,
+  }
+}
+
+@withStyles(styles)
 export default class OnCallForService extends Component {
   static propTypes = {
     onCallUsers: p.arrayOf(
@@ -94,10 +105,15 @@ export default class OnCallForService extends Component {
 
   render() {
     let content = this.props.loading ? <Spinner /> : this.renderUsers()
+    let { classes } = this.props
 
     return (
       <Card>
-        <CardHeader title='On Call Users' />
+        <CardHeader
+          className={classes.cardHeader}
+          component='h3'
+          title='On Call Users'
+        />
         <CardContent>{content}</CardContent>
       </Card>
     )

diff --git a/web/src/app/styles/materialStyles.js b/web/src/app/styles/materialStyles.js
@@ -16,6 +16,7 @@ export const styles = theme => ({
   // Used to reduce padding between header and content
   cardHeader: {
     paddingBottom: 0,
+    margin: 0,
   },
   asLink: {
     color: 'blue',
@@ -26,7 +27,7 @@ export const styles = theme => ({
     display: 'inline-block',
   },
   cancelButton: {
-    color: theme.palette.secondary['500'],
+    color: 'rgba(0,0,0, 0.54)',
   },
   defaultFlex: {
     flex: '0 1 auto',

diff --git a/web/src/app/templates/index.html b/web/src/app/templates/index.html
@@ -1,14 +1,11 @@
 <!DOCTYPE html>
-<html class="no-js" lang="">
+<html class="no-js" lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <title>GoAlert</title>
     <meta name="description" content="" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, user-scalable=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://gravatar.com" />
     <link
       rel="shortcut icon"