Support nested focusable elements in VisuallyHidden with isFocusable option (#3572)

Support nested focusable elements in VisuallyHidden with isFocusable option

Author: snowystinger

packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx

@@ -13,7 +13,7 @@
 import {DOMAttributes} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
 import React, {CSSProperties, JSXElementConstructor, ReactNode, useMemo, useState} from 'react';
-import {useFocus} from '@react-aria/interactions';
+import {useFocusWithin} from '@react-aria/interactions';
 
 export interface VisuallyHiddenProps extends DOMAttributes {
   /** The content to visually hide. */
@@ -57,9 +57,9 @@ export function useVisuallyHidden(props: VisuallyHiddenProps = {}): VisuallyHidd
   } = props;
 
   let [isFocused, setFocused] = useState(false);
-  let {focusProps} = useFocus({
+  let {focusWithinProps} = useFocusWithin({
     isDisabled: !isFocusable,
-    onFocusChange: setFocused
+    onFocusWithinChange: (val) => setFocused(val)
   });
 
   // If focused, don't hide the element.
@@ -75,7 +75,7 @@ export function useVisuallyHidden(props: VisuallyHiddenProps = {}): VisuallyHidd
 
   return {
     visuallyHiddenProps: {
-      ...focusProps,
+      ...focusWithinProps,
       style: combinedStyles
     }
   };

packages/@react-aria/visually-hidden/test/VisuallyHidden.test.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import React from 'react';
+import {render} from '@react-spectrum/test-utils';
+import userEvent from '@testing-library/user-event';
+import {VisuallyHidden} from '../';
+
+describe('VisuallyHidden', function () {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+  it('hides element', function () {
+    let {getAllByRole} = render(
+      <>
+        <button>This is button A</button>
+        <VisuallyHidden>
+          <button>
+            With no isFocusable, I should not show my text on focus
+          </button>
+        </VisuallyHidden>
+        <button>This is button C</button>
+      </>
+    );
+
+    let buttons = getAllByRole('button');
+    userEvent.tab();
+
+    expect(document.activeElement).toBe(buttons[0]);
+    let hiddenStyle = buttons[1].parentElement.getAttribute('style');
+    expect(hiddenStyle.length).toBeGreaterThan(0);
+
+    userEvent.tab();
+
+    expect(document.activeElement).toBe(buttons[1]);
+    expect(buttons[1].parentElement.getAttribute('style')).toEqual(hiddenStyle);
+  });
+  it('unhides element if focused and isFocusable', function () {
+    let {getAllByRole} = render(
+      <>
+        <button>This is button A</button>
+        <VisuallyHidden isFocusable>
+          <button>
+            With isFocusable, I should show my text on focus
+          </button>
+        </VisuallyHidden>
+        <button>This is button C</button>
+      </>
+    );
+
+    let buttons = getAllByRole('button');
+    userEvent.tab();
+
+    expect(document.activeElement).toBe(buttons[0]);
+    let hiddenStyle = buttons[1].parentElement.getAttribute('style');
+    expect(hiddenStyle.length).toBeGreaterThan(0);
+
+    userEvent.tab();
+
+    expect(document.activeElement).toBe(buttons[1]);
+    expect(buttons[1].parentElement.getAttribute('style')).not.toEqual(hiddenStyle);
+    expect(buttons[1].parentElement.getAttribute('style')).toHaveLength(0);
+  });
+});