Merge pull request #4055 from ProjectMirador/a11y-ids

Use useId to generate unique ids for accessibility attributes.

Author: marlo-longley

__tests__/src/components/CanvasInfo.test.js

@@ -14,7 +14,6 @@ describe('CanvasInfo', () => {
           canvasLabel="The Canvas Label"
           canvasDescription="The Canvas Description"
           canvasMetadata={metadata}
-          id="xyz"
         />,
       );
     });
@@ -45,7 +44,7 @@ describe('CanvasInfo', () => {
   describe('when metadata is not present', () => {
     beforeEach(() => {
       render(
-        <CanvasInfo id="xyz" />,
+        <CanvasInfo />,
       );
     });
 

__tests__/src/components/CollectionInfo.test.js

@@ -6,7 +6,6 @@ import { CollectionInfo } from '../../../src/components/CollectionInfo';
 function createWrapper(props) {
   return render(
     <CollectionInfo
-      id="test"
       collectionPath={[1, 2]}
       showCollectionDialog={() => {}}
       {...props}

__tests__/src/components/ManifestInfo.test.js

@@ -8,7 +8,6 @@ describe('ManifestInfo', () => {
     beforeEach(() => {
       render(
         <ManifestInfo
-          id="xyz"
           manifestLabel="The Manifest Label"
           manifestDescription="The Manifest Description"
           manifestMetadata={metadata}
@@ -42,7 +41,7 @@ describe('ManifestInfo', () => {
   describe('when metadata is not present', () => {
     beforeEach(() => {
       render(
-        <ManifestInfo id="xyz" />,
+        <ManifestInfo />,
       );
     });
 

__tests__/src/components/WindowTopMenuButton.test.js

@@ -47,6 +47,6 @@ describe('WindowTopMenuButton', () => {
     render(<Subject />);
     await user.click(screen.getByLabelText('Window views & thumbnail display'));
     // when 'open' is true, aria-owns is set to the id of the window
-    expect(screen.getByLabelText('Window views & thumbnail display')).toHaveAttribute('aria-owns', 'window-menu_xyz'); // eslint-disable-line testing-library/no-node-access
+    expect(screen.getByLabelText('Window views & thumbnail display')).toHaveAttribute('aria-owns'); // eslint-disable-line testing-library/no-node-access
   });
 });

__tests__/src/components/WorkspaceOptionsMenu.test.js

@@ -48,18 +48,18 @@ describe('WorkspaceOptionsMenu', () => {
 
   it('renders the export dialog when export option is clicked', async () => {
     render(<Subject anchorEl={screen.getByTestId('menu-trigger-button')} open />);
-    expect(document.querySelector('#workspace-export')).not.toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
+    expect(screen.queryByRole('heading', { name: 'Export workspace' })).not.toBeInTheDocument();
 
-    await user.click(screen.getAllByRole('menuitem')[0]);
-    expect(document.querySelector('#workspace-export')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
+    await user.click(screen.getByRole('menuitem', { name: 'Export workspace' }));
+    expect(screen.getByRole('heading', { name: 'Export workspace' })).toBeInTheDocument();
   });
 
-  it('renders the import dialog when imporrt option is clicked', async () => {
+  it('renders the import dialog when import option is clicked', async () => {
     render(<Subject anchorEl={screen.getByTestId('menu-trigger-button')} open />);
-    expect(document.querySelector('#workspace-import')).not.toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
+    expect(screen.queryByRole('heading', { name: 'Import workspace' })).not.toBeInTheDocument();
 
-    await user.click(screen.getAllByRole('menuitem')[1]);
-    expect(document.querySelector('#workspace-import')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
+    await user.click(screen.getByRole('menuitem', { name: 'Import workspace' }));
+    expect(screen.getByRole('heading', { name: 'Import workspace' })).toBeInTheDocument();
   });
 
   it('fires the correct callbacks on menu close', async () => {

src/components/CanvasInfo.js

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
@@ -13,24 +14,25 @@ export function CanvasInfo({
   canvasDescription = null,
   canvasLabel = null,
   canvasMetadata = [],
-  id,
   index = 1,
   totalSize = 1,
 }) {
   const { t } = useTranslation();
+  const id = useId();
+  const titleId = useId();
   const pluginProps = arguments[0]; // eslint-disable-line prefer-rest-params
 
   return (
     <CollapsibleSection
-      id={`${id}-currentItem-${index}`}
+      id={id}
       label={t('currentItem', { context: `${index + 1}/${totalSize}` })}
     >
       {canvasLabel && (
         <Typography
           aria-labelledby={
-            `${id}-currentItem-${index} ${id}-currentItem-${index}-heading`
+            `${id} ${titleId}`
           }
-          id={`${id}-currentItem-${index}-heading`}
+          id={titleId}
           variant="h4"
           component="h5"
         >
@@ -56,7 +58,6 @@ CanvasInfo.propTypes = {
   canvasDescription: PropTypes.string,
   canvasLabel: PropTypes.string,
   canvasMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-  id: PropTypes.string.isRequired,
   index: PropTypes.number,
   totalSize: PropTypes.number,
 };

src/components/CollectionInfo.js

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
@@ -9,9 +10,11 @@ import CollapsibleSection from '../containers/CollapsibleSection';
  * CollectionInfo
  */
 export function CollectionInfo({
-  collectionLabel = null, collectionPath = [], id, showCollectionDialog, windowId = null,
+  collectionLabel = null, collectionPath = [], showCollectionDialog, windowId = null,
 }) {
   const { t } = useTranslation();
+  const id = useId();
+  const titleId = useId();
 
   /**
    * Show the containing collection.
@@ -26,13 +29,13 @@ export function CollectionInfo({
 
   return (
     <CollapsibleSection
-      id={`${id}-collection`}
+      id={id}
       label={t('collection')}
     >
       {collectionLabel && (
         <Typography
-          aria-labelledby={`${id}-resource ${id}-resource-heading`}
-          id={`${id}-resource-heading`}
+          aria-labelledby={`${id} ${titleId}`}
+          id={titleId}
           variant="h4"
         >
           {collectionLabel}
@@ -53,7 +56,6 @@ export function CollectionInfo({
 CollectionInfo.propTypes = {
   collectionLabel: PropTypes.string,
   collectionPath: PropTypes.arrayOf(PropTypes.string),
-  id: PropTypes.string.isRequired,
   showCollectionDialog: PropTypes.func.isRequired,
   windowId: PropTypes.string,
 };

src/components/ManifestInfo.js

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
@@ -10,12 +11,13 @@ import { PluginHook } from './PluginHook';
  * ManifestInfo
  */
 export function ManifestInfo({
-  manifestDescription = null, manifestLabel = null, manifestMetadata = [], manifestSummary = null, id,
+  manifestDescription = null, manifestLabel = null, manifestMetadata = [], manifestSummary = null,
   ...rest
 }) {
   const { t } = useTranslation();
+  const id = useId();
   const pluginProps = {
-    id, manifestDescription, manifestLabel, manifestMetadata, manifestSummary, ...rest,
+    manifestDescription, manifestLabel, manifestMetadata, manifestSummary, ...rest,
   };
 
   return (
@@ -56,7 +58,6 @@ export function ManifestInfo({
 }
 
 ManifestInfo.propTypes = {
-  id: PropTypes.string.isRequired,
   manifestDescription: PropTypes.string,
   manifestLabel: PropTypes.string,
   manifestMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types

src/components/ManifestRelatedLinks.js

@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
@@ -20,26 +21,29 @@ const StyledDl = styled('dl')(({ theme }) => ({
  */
 export function ManifestRelatedLinks({
   homepage = null,
-  id,
   manifestUrl = null,
   related = null,
   renderings = null,
   seeAlso = null,
   ...rest
 }) {
   const { t } = useTranslation();
+  const id = useId();
+  const titleId = useId();
+
   const pluginProps = {
-    homepage, id, manifestUrl, related, renderings, seeAlso, t, ...rest,
+    homepage, manifestUrl, related, renderings, seeAlso, t, ...rest,
   };
 
   return (
     <CollapsibleSection
-      id={`${id}-related`}
+      aria-labelledby={titleId}
+      id={id}
       label={t('related')}
     >
       <Typography
-        aria-labelledby={`${id}-related ${id}-related-heading`}
-        id={`${id}-related-heading`}
+        aria-labelledby={`${id} ${titleId}`}
+        id={titleId}
         variant="h4"
         component="h5"
       >
@@ -129,7 +133,6 @@ ManifestRelatedLinks.propTypes = {
     label: PropTypes.string,
     value: PropTypes.string,
   })),
-  id: PropTypes.string.isRequired,
   manifestUrl: PropTypes.string,
   related: PropTypes.arrayOf(PropTypes.shape({
     format: PropTypes.string,

src/components/SearchHit.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useId, useMemo } from 'react';
 import { useEffectEvent } from 'use-effect-event';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
@@ -86,11 +86,12 @@ export function SearchHit({
     );
   });
 
+  const canvasLabelHtmlId = useId();
+
   if (focused && !selected) return null;
 
   const renderedHit = focused ? hit : hit && truncatedHit;
   const truncated = hit && (renderedHit.before !== hit.before || renderedHit.after !== hit.after);
-  const canvasLabelHtmlId = `${companionWindowId}-${index}`;
   const ownerState = {
     adjacent, focused, selected, windowSelected,
   };