Add accessible names to profile and notebook dialogs

hypothesis · Feb 23, 2024 · bdcb3c2 · bdcb3c2
1 parent 3e8d9d6
commit bdcb3c2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/annotator/components/ModalDialog.tsx b/src/annotator/components/ModalDialog.tsx
@@ -7,13 +7,15 @@ type DialogProps = {
   children: ComponentChildren;
   onClose: () => void;
   'data-testid'?: string;
+  'aria-label'?: string;
 };
 
 function NativeDialog({
   closed,
   onClose,
   children,
   'data-testid': testId,
+  'aria-label': label,
 }: DialogProps) {
   const dialogRef = useRef<HTMLDialogElement | null>(null);
 
@@ -39,6 +41,7 @@ function NativeDialog({
       ref={dialogRef}
       className="relative w-full h-full backdrop:bg-black/50"
       data-testid={testId}
+      aria-label={label}
     >
       {children}
     </dialog>

diff --git a/src/annotator/components/NotebookModal.tsx b/src/annotator/components/NotebookModal.tsx
@@ -112,10 +112,11 @@ export default function NotebookModal({
       closed={isHidden}
       onClose={onClose}
       data-testid="notebook-outer"
+      aria-label="Hypothesis notebook"
     >
       <div className="absolute right-0 m-3">
         <IconButton
-          title="Close the Notebook"
+          title="Close notebook"
           onClick={onClose}
           variant="dark"
           classes={classnames(

diff --git a/src/annotator/components/ProfileModal.tsx b/src/annotator/components/ProfileModal.tsx
@@ -42,6 +42,7 @@ export default function ProfileModal({ eventBus, config }: ProfileModalProps) {
       closed={isHidden}
       onClose={onClose}
       data-testid="profile-outer"
+      aria-label="Hypothesis profile"
     >
       <div className="absolute right-0 m-3">
         <IconButton