Replace srOnly class with visually-hidden style

ProjectMirador · Mar 30, 2023 · a229d62 · a229d62
1 parent cbb8df4
commit a229d62
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/__tests__/src/components/WindowCanvasNavigationControls.test.js b/__tests__/src/components/WindowCanvasNavigationControls.test.js
@@ -28,7 +28,7 @@ describe('WindowCanvasNavigationControls', () => {
 
   it('renders only a screen-reader accessibile version when visible=false', () => {
     const { container } = render(<Subject visible={false} />);
-    expect(container.firstChild.classList[1]).toMatch(/srOnly/); // eslint-disable-line testing-library/no-node-access
+    expect(container.firstChild).toHaveStyle({ height: '1px', margin: '-1px', width: '1px' }); // eslint-disable-line testing-library/no-node-access
   });
 
   it('stacks the nav controls on small width screens', () => {

diff --git a/src/components/WindowCanvasNavigationControls.js b/src/components/WindowCanvasNavigationControls.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
 import ZoomControls from '../containers/ZoomControls';
 import ViewerInfo from '../containers/ViewerInfo';
 import ViewerNavigation from '../containers/ViewerNavigation';
@@ -28,7 +29,7 @@ export class WindowCanvasNavigationControls extends Component {
       classes, visible, windowId, zoomToWorld,
     } = this.props;
 
-    if (!visible) return (<Typography variant="srOnly" component="div"><ViewerInfo windowId={windowId} /></Typography>);
+    if (!visible) return (<Typography style={visuallyHidden} component="div"><ViewerInfo windowId={windowId} /></Typography>);
 
     return (
       <Paper

diff --git a/src/components/Workspace.js b/src/components/Workspace.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
 import Window from '../containers/Window';
 import WorkspaceMosaic from '../containers/WorkspaceMosaic';
 import WorkspaceElastic from '../containers/WorkspaceElastic';
@@ -121,7 +122,7 @@ export class Workspace extends Component {
             )
           }
         >
-          <Typography variant="srOnly" component="h1">{t('miradorViewer')}</Typography>
+          <Typography style={visuallyHidden} component="h1">{t('miradorViewer')}</Typography>
           {this.workspaceByType()}
         </div>
       </IIIFDropTarget>

diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
@@ -11,6 +11,7 @@ import List from '@mui/material/List';
 import Paper from '@mui/material/Paper';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
 import ns from '../config/css-ns';
 import ManifestForm from '../containers/ManifestForm';
 import ManifestListItem from '../containers/ManifestListItem';
@@ -115,7 +116,7 @@ export class WorkspaceAdd extends Component {
             </Grid>
           ) : (
             <Paper className={classes.list}>
-              <Typography variant="srOnly" component="h1">{t('miradorResources')}</Typography>
+              <Typography style={visuallyHidden} component="h1">{t('miradorResources')}</Typography>
               <PluginHook {...this.props} />
               <List disablePadding>
                 {manifestList}