Merge pull request #2351 from ProjectMirador/2292-update-nav-landmarks

Add/Update nav aria-label in window top and side bars

src/components/WindowSideBar.js

@@ -14,7 +14,7 @@ export class WindowSideBar extends Component {
    */
   render() {
     const {
-      classes, windowId, sideBarOpen,
+      classes, t, windowId, sideBarOpen,
     } = this.props;
 
     return (
@@ -24,7 +24,11 @@ export class WindowSideBar extends Component {
           className={classNames(classes.drawer)}
           classes={{ paper: classNames(classes.paper) }}
           anchor="left"
-          PaperProps={{ component: 'nav', style: { position: 'relative' } }}
+          PaperProps={{
+            'aria-label': t('sidebarPanelsNavigation'),
+            component: 'nav',
+            style: { position: 'relative' },
+          }}
           SlideProps={{ mountOnEnter: true, unmountOnExit: true }}
           open={sideBarOpen}
         >
@@ -38,6 +42,7 @@ export class WindowSideBar extends Component {
 WindowSideBar.propTypes = {
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types,
   sideBarOpen: PropTypes.bool,
+  t: PropTypes.func.isRequired,
   windowId: PropTypes.string.isRequired,
 };
 

src/components/WindowSideBarButtons.js

@@ -156,6 +156,7 @@ export class WindowSideBarButtons extends Component {
         indicatorColor="secondary"
         textColor="secondary"
         aria-orientation="vertical"
+        aria-label={t('sidebarPanelsNavigation')}
         ref={ref => this.setTabsRef(ref)}
       >
         <Tab

src/components/WindowTopBar.js

@@ -29,6 +29,7 @@ export class WindowTopBar extends Component {
     } = this.props;
     return (
       <AppBar position="relative">
+        <nav aria-label={t('windowNavigation')}>
           <Toolbar disableGutters className={classNames(classes.windowTopBarStyle, focused ? classes.focused : null, ns('window-top-bar'))} variant="dense">
             <MiradorMenuButton
               aria-label={t('toggleWindowSideBar')}
@@ -60,6 +61,7 @@ export class WindowTopBar extends Component {
               </MiradorMenuButton>
             )}
           </Toolbar>
+        </nav>
       </AppBar>
     );
   }

src/containers/WindowSideBar.js

 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withStyles } from '@material-ui/core';
+import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend';
 import { WindowSideBar } from '../components/WindowSideBar';
 import { getWindow } from '../state/selectors';
@@ -43,6 +44,7 @@ const styles = theme => ({
 
 const enhance = compose(
   withStyles(styles),
+  withTranslation(),
   connect(mapStateToProps, null),
   withPlugins('WindowSideBar'),
 );

src/locales/en/translation.json

@@ -58,6 +58,7 @@
     "settings": "Settings",
     "showingNumAnnotations": "Showing {{number}} annotations",
     "showZoomControls": "Show zoom controls",
+    "sidebarPanelsNavigation": "Sidebar panels navigation",
     "single": "Single",
     "theme": "Theme",
     "thumbnailList": "Thumbnail list",
@@ -69,6 +70,7 @@
     "view": "View items as",
     "window": "Window: {{label}}",
     "windowMenu": "Window options",
+    "windowNavigation": "Window navigation",
     "windowPluginButtons": "Plugins",
     "workspace": "Workspace",
     "workspaceFullScreen": "Full screen",