[@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#…

…2735)

* [@mantine/hooks] use-focus-trap: Fix aria-hidden="true" not being removed

* [@mantine/hooks] use-focus-trap: Fix aria-hidden not being applied multiple times

* [@mantine/core] FocusTrap: Add test for aria-hidden

src/mantine-core/src/FocusTrap/FocusTrap.test.tsx

@@ -51,6 +51,29 @@ describe('@mantine/core/FocusTrap', () => {
     expect(document.body).toHaveFocus();
   });
 
+  it('manages aria-hidden attributes', () => {
+    const adjacentDiv = document.createElement('div');
+    adjacentDiv.setAttribute('data-testid', 'adjacent');
+    document.body.appendChild(adjacentDiv);
+
+    const { rerender } = render(
+      <FocusTrap active>
+        <div />
+      </FocusTrap>
+    );
+
+    const adjacent = screen.getByTestId('adjacent');
+    expect(adjacent).toHaveAttribute('aria-hidden', 'true');
+
+    rerender(
+      <FocusTrap active={false}>
+        <div />
+      </FocusTrap>
+    );
+
+    expect(adjacent).not.toHaveAttribute('aria-hidden');
+  });
+
   it('has correct displayName', () => {
     expect(FocusTrap.displayName).toEqual('@mantine/core/FocusTrap');
   });

src/mantine-hooks/src/use-focus-trap/use-focus-trap.ts

@@ -13,18 +13,17 @@ export function useFocusTrap(active = true): (instance: HTMLElement | null) => v
         return;
       }
 
-      if (node === ref.current || node === null) {
+      if (node === null) {
         return;
       }
 
-      if (restoreAria.current) {
-        restoreAria.current();
+      restoreAria.current = createAriaHider(node);
+      if (ref.current === node) {
+        return;
       }
 
       if (node) {
-        const processNode = (_node: HTMLElement) => {
-          restoreAria.current = createAriaHider(_node);
-
+        const processNode = () => {
           let focusElement: HTMLElement = node.querySelector('[data-autofocus]');
 
           if (!focusElement) {
@@ -47,7 +46,7 @@ export function useFocusTrap(active = true): (instance: HTMLElement | null) => v
         // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
         setTimeout(() => {
           if (node.ownerDocument) {
-            processNode(node);
+            processNode();
           } else if (process.env.NODE_ENV === 'development') {
             // eslint-disable-next-line no-console
             console.warn('[@mantine/hooks/use-focus-trap] Ref node is not part of the dom', node);
@@ -76,6 +75,10 @@ export function useFocusTrap(active = true): (instance: HTMLElement | null) => v
     document.addEventListener('keydown', handleKeyDown);
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
+
+      if (restoreAria.current) {
+        restoreAria.current();
+      }
     };
   }, [active]);