Add accessible names to profile and notebook dialogs

src/annotator/components/ModalDialog.tsx

@@ -7,6 +7,7 @@ type DialogProps = {
   children: ComponentChildren;
   onClose: () => void;
   'data-testid'?: string;
+  'aria-label'?: string;
 };
 
 function NativeDialog({
@@ -14,6 +15,7 @@ function NativeDialog({
   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>

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(

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