fix: dialog add attributes (#2885)

* feat(modal): add attributes to disclosure and modal * fix: action bar is not a modal * fix: add changeset
scaleway · Sep 7, 2023 · ed31d07 · ed31d07
1 parent a54699a
commit ed31d07
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/.changeset/loud-moose-remember.md b/.changeset/loud-moose-remember.md
@@ -0,0 +1,5 @@
+---
+'@ultraviolet/ui': patch
+---
+
+feat: add more accessibility to our modal
diff --git a/packages/ui/src/components/ActionBar/index.tsx b/packages/ui/src/components/ActionBar/index.tsx
@@ -26,7 +26,6 @@ type ActionBarProps = {
    */
   rank?: number
   role?: string
-  'aria-modal'?: 'true' | 'false'
   className?: string
   'data-testid'?: string
 }
@@ -35,15 +34,13 @@ export const ActionBar = ({
   children,
   role = 'dialog',
   rank = 0,
-  'aria-modal': ariaModal = 'true',
   className,
   'data-testid': dataTestId,
 }: ActionBarProps) =>
   createPortal(
     <StyledDiv
       rank={rank}
       role={role}
-      aria-modal={ariaModal}
       className={className}
       data-testid={dataTestId}
     >

diff --git a/packages/ui/src/components/Modal/Dialog.tsx b/packages/ui/src/components/Modal/Dialog.tsx
@@ -150,6 +150,7 @@ export const Dialog = ({
         data-size={size}
         open={open}
         onClick={stopClick}
+        aria-modal
       >
         {open ? children : null}
       </StyledDialog>

diff --git a/packages/ui/src/components/Modal/Disclosure.tsx b/packages/ui/src/components/Modal/Disclosure.tsx
@@ -36,6 +36,8 @@ export const Disclosure = ({
     return cloneElement(disclosure, {
       ...disclosure.props,
       ref: disclosureRef,
+      'aria-controls': id,
+      'aria-haspopup': 'dialog',
     } as unknown as PropsWithRef<typeof disclosure>)
   }
 

diff --git a/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Modal/__tests__/__snapshots__/index.test.tsx.snap
@@ -179,6 +179,7 @@ exports[`Modal renders opened custom size 1`] = `
     >
       <dialog
         aria-label="modal"
+        aria-modal="true"
         class="cache-ycaaob-StyledDialog e1cqen9h0"
         data-placement="center"
         data-size="medium"
@@ -391,6 +392,7 @@ exports[`Modal renders opened custom size and width (size take predecence) 1`] =
     >
       <dialog
         aria-label="modal"
+        aria-modal="true"
         class="cache-ycaaob-StyledDialog e1cqen9h0"
         data-placement="center"
         data-size="medium"
@@ -603,6 +605,7 @@ exports[`Modal renders opened custom width 1`] = `
     >
       <dialog
         aria-label="modal"
+        aria-modal="true"
         class="cache-ycaaob-StyledDialog e1cqen9h0"
         data-placement="center"
         data-size="medium"
@@ -815,6 +818,7 @@ exports[`Modal renders with custom classNames 1`] = `
     >
       <dialog
         aria-label="modal"
+        aria-modal="true"
         class="1vjuh1t-customDialogStyles cache-ycaaob-StyledDialog e1cqen9h0"
         data-placement="center"
         data-size="small"
@@ -1029,6 +1033,7 @@ exports[`Modal renders with customStyle 1`] = `
     >
       <dialog
         aria-label="modal"
+        aria-modal="true"
         class="cache-550m4a-StyledDialog-customDialogStyles e1cqen9h0"
         data-placement="center"
         data-size="small"
@@ -1065,6 +1070,8 @@ exports[`Modal renders with customStyle 1`] = `
 exports[`Modal renders with default Props 1`] = `
 <DocumentFragment>
   <button
+    aria-controls=":r0:"
+    aria-haspopup="dialog"
     type="button"
   >
     Test
@@ -1253,6 +1260,7 @@ exports[`Modal renders with default Props and function children opened 1`] = `
     >
       <dialog
         aria-label="modal"
+        aria-modal="true"
         class="cache-ycaaob-StyledDialog e1cqen9h0"
         data-placement="center"
         data-size="small"
@@ -1289,6 +1297,8 @@ exports[`Modal renders with default Props and function children opened 1`] = `
 exports[`Modal renders with disclosure 1`] = `
 <DocumentFragment>
   <button
+    aria-controls="modal-test"
+    aria-haspopup="dialog"
     type="button"
   >
     Test
@@ -1491,6 +1501,7 @@ exports[`Modal renders with disclosure and onClose 1`] = `
     >
       <dialog
         aria-label="modal-test"
+        aria-modal="true"
         class="cache-ycaaob-StyledDialog e1cqen9h0"
         data-placement="center"
         data-size="small"
@@ -1705,6 +1716,7 @@ exports[`Modal renders with opened={true} 1`] = `
     >
       <dialog
         aria-label="modal"
+        aria-modal="true"
         class="cache-ycaaob-StyledDialog e1cqen9h0"
         data-placement="center"
         data-size="small"
@@ -1854,6 +1866,7 @@ exports[`Modal renders with opened={true} and no close icon 1`] = `
     >
       <dialog
         aria-label="modal"
+        aria-modal="true"
         class="cache-ycaaob-StyledDialog e1cqen9h0"
         data-placement="center"
         data-size="small"