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