From 8706a5ac77c23193bdeb05031bf3a8667f339543 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Sat, 20 Jun 2020 07:18:35 -0700
Subject: [PATCH] Provide sr-only viewer info, now that it's used as the
 section/canvas label

---
 .../src/components/WindowCanvasNavigationControls.test.js    | 5 +++--
 src/components/WindowCanvasNavigationControls.js             | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/__tests__/src/components/WindowCanvasNavigationControls.test.js b/__tests__/src/components/WindowCanvasNavigationControls.test.js
index a5c1267f3..85c19ec2b 100644
--- a/__tests__/src/components/WindowCanvasNavigationControls.test.js
+++ b/__tests__/src/components/WindowCanvasNavigationControls.test.js
@@ -1,6 +1,7 @@
 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', () => {
diff --git a/src/components/WindowCanvasNavigationControls.js b/src/components/WindowCanvasNavigationControls.js
index 5008e7d19..b20ec5a55 100644
--- a/src/components/WindowCanvasNavigationControls.js
+++ b/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
-- 
GitLab