Use useId to generate unqiue ids for accessibility attributes.

ProjectMirador · Dec 17, 2024 · 07d6865 · 07d6865
1 parent 41e2a86
commit 07d6865
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/SearchHit.js b/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,
   };

diff --git a/src/components/WindowTopBarPluginMenu.js b/src/components/WindowTopBarPluginMenu.js
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useId, useState } from 'react';
 import PropTypes from 'prop-types';
 import MoreVertIcon from '@mui/icons-material/MoreVertSharp';
 import Menu from '@mui/material/Menu';
@@ -18,6 +18,7 @@ export function WindowTopBarPluginMenu({
   const pluginProps = arguments[0]; // eslint-disable-line prefer-rest-params
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
+  const windowPluginMenuId = useId();
 
   /** */
   const handleMenuClick = (event) => {
@@ -31,7 +32,6 @@ export function WindowTopBarPluginMenu({
     setOpen(false);
   };
 
-  const windowPluginMenuId = `window-plugin-menu_${windowId}`;
   if (!PluginComponents || PluginComponents.length === 0) return null;
 
   return (

diff --git a/src/components/WindowTopMenuButton.js b/src/components/WindowTopMenuButton.js
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import WindowTopMenu from '../containers/WindowTopMenu';
@@ -11,6 +11,7 @@ export function WindowTopMenuButton({ classes = {}, windowId }) {
   const { t } = useTranslation();
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
+  const menuId = useId();
 
   /** */
   const handleMenuClick = (event) => {
@@ -24,7 +25,6 @@ export function WindowTopMenuButton({ classes = {}, windowId }) {
     setOpen(false);
   };
 
-  const menuId = `window-menu_${windowId}`;
   return (
     <>
       <MiradorMenuButton