diff --git a/__tests__/src/components/WindowCanvasNavigationControls.test.js b/__tests__/src/components/WindowCanvasNavigationControls.test.js index a5c1267f3a995de2d271097070254e60a8698adf..85c19ec2bfc917dbbc92bc3e7835712d6d2b9e27 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 5008e7d19f02c58818de8fb769df4c9b3ac3db12..b20ec5a559d68b7d77a218c3b83d8a4cf1196623 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