Dialog, Drawer: Prevent close button from being aria-hidden (#1792)

Author: felixhabib

.changeset/twelve-emus-clap.md

@@ -0,0 +1,13 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Dialog
+  - Drawer
+---
+
+**Dialog, Drawer**: Ensure that only elements outside the `Dialog` or `Drawer` are `aria-hidden` when open
+
+Fixes an issue where the close button inside the `Dialog` or `Drawer` was incorrectly inside an `aria-hidden` region.

packages/braid-design-system/src/lib/components/private/Modal/ModalContent.tsx

@@ -102,7 +102,6 @@ export const ModalContent = ({
   ...restProps
 }: ModalContentProps) => {
   const resolvedId = useFallbackId(id);
-
   const descriptionId = useId();
 
   const defaultModalRef = useRef<HTMLElement>(null);
@@ -140,6 +139,7 @@ export const ModalContent = ({
       justifyContent={justifyContent}
     >
       <Box
+        ref={modalRef}
         position="relative"
         display="flex"
         alignItems="center"
@@ -153,10 +153,8 @@ export const ModalContent = ({
         width={width !== 'content' ? 'full' : undefined}
         maxWidth={width !== 'content' ? width : undefined}
       >
-        {/* modalRef gets forwarded down to child element by RemoveScroll by `forwardProps` */}
         <RemoveScroll
           noRelative // Allows portalled elements to be positioned correctly relative to the viewport size
-          ref={modalRef}
           forwardProps
           enabled={scrollLock}
         >

packages/braid-design-system/src/lib/components/private/Modal/modalTestSuite.tsx

@@ -228,5 +228,24 @@ export const modalTestSuite = (
       }
       expect(queryByRole('dialog')).not.toBeInTheDocument();
     });
+
+    it('should have a close button that is not aria-hidden', async () => {
+      const { getByTestId, queryByRole } = renderTestCase();
+
+      const dialogOpenButton = getByTestId('buttonBefore');
+      await userEvent.click(dialogOpenButton);
+
+      // Waiting for `ariaHideOthers` to apply
+      await waitFor(() =>
+        expect(document.querySelector('[data-aria-hidden]')).not.toBeNull(),
+      );
+
+      const closeButton = queryByRole('button', {
+        name: CLOSE_LABEL,
+        hidden: false,
+      });
+
+      expect(closeButton).not.toBeNull();
+    });
   });
 };