Merge pull request #3141 from ProjectMirador/accessibility

Accessibility tweaks

__tests__/src/components/WindowCanvasNavigationControls.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
 import { WindowCanvasNavigationControls } from '../../../src/components/WindowCanvasNavigationControls';
 import ViewerInfo from '../../../src/containers/ViewerInfo';
 import ViewerNavigation from '../../../src/containers/ViewerNavigation';
@@ -35,9 +36,9 @@ describe('WindowCanvasNavigationControls', () => {
     )).toBe(true);
   });
 
-  it('renders nothing when visible=false', () => {
+  it('renders only a screen-reader accessibile version when visible=false', () => {
     wrapper = createWrapper({ visible: false });
-    expect(wrapper.matchesElement(<></>)).toBe(true);
+    expect(wrapper.matchesElement(<Typography variant="srOnly"><ViewerInfo /></Typography>)).toBe(true);
   });
 
   it('sets the proper class/ZoomControls prop dependent on the size/width prop', () => {

src/components/Branding.js

@@ -26,7 +26,7 @@ export class Branding extends Component {
             target="_blank"
             rel="noopener"
           >
-            <MiradorIcon titleAccess="About Project Mirador" fontSize="large" />
+            <MiradorIcon aria-label={t('aboutMirador')} titleAccess={t('aboutMirador')} fontSize="large" />
           </IconButton>
         </Typography>
       </div>

src/components/ThumbnailCanvasGrouping.js

@@ -50,6 +50,8 @@ export class ThumbnailCanvasGrouping extends PureComponent {
           width: (Number.isInteger(style.width)) ? style.width - SPACING : null,
         }}
         className={ns('thumbnail-nav-container')}
+        role="gridcell"
+        aria-colindex={index + 1}
       >
         <div
           role="button"

src/components/ThumbnailNavigation.js

@@ -204,6 +204,7 @@ export class ThumbnailNavigation extends Component {
         onKeyUp={this.handleKeyUp}
         role="grid"
       >
+        <div role="row" style={{ height: '100%', width: '100%' }}>
           <AutoSizer
             defaultHeight={100}
             defaultWidth={400}
@@ -223,6 +224,7 @@ export class ThumbnailNavigation extends Component {
               </List>
             )}
           </AutoSizer>
+        </div>
       </Paper>
     );
   }

src/components/WindowCanvasNavigationControls.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
 import ZoomControls from '../containers/ZoomControls';
 import ViewerInfo from '../containers/ViewerInfo';
 import ViewerNavigation from '../containers/ViewerNavigation';
@@ -26,7 +27,7 @@ export class WindowCanvasNavigationControls extends Component {
       classes, visible, windowId, zoomToWorld,
     } = this.props;
 
-    if (!visible) return (<></>);
+    if (!visible) return (<Typography variant="srOnly" component="div"><ViewerInfo windowId={windowId} /></Typography>);
 
     return (
       <Paper

src/components/icons/MiradorIcon.js

@@ -7,11 +7,9 @@ import SvgIcon from '@material-ui/core/SvgIcon';
 export default function MiradorIcon(props) {
   return (
     <SvgIcon viewBox="0 0 60 55" {...props}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="60" height="55" viewBox="0 0 60 55">
       <rect width="18" height="55" />
       <rect width="18" height="55" transform="translate(42)" />
       <rect width="18" height="34" transform="translate(21)" />
-      </svg>
     </SvgIcon>
   );
 }

src/locales/en/translation.json

 {
   "translation": {
+    "aboutMirador": "About Project Mirador",
     "aboutThisItem": "About this item",
     "addedFromUrl": "(Added from URL)",
     "addManifestUrl": "Resource location",