fix(#6130): Ignore HiddenSelect when tree walking (#6139)

We should skip HiddenSelect element in Picker when tree walking to determine the next or previous focusable element. However, we should not use [data-a11y-ignore], which is used to exclude elements from aXe automated accessibility tests.

Co-authored-by: Daniel Lu <dl1644@gmail.com>

Author: Michael Jordan

packages/@react-aria/focus/src/isElementVisible.ts

@@ -44,7 +44,7 @@ function isAttributeVisible(element: Element, childElement?: Element) {
   return (
     !element.hasAttribute('hidden') &&
     // Ignore HiddenSelect when tree walking.
-    !(element.hasAttribute('data-a11y-ignore') && element.getAttribute('aria-hidden') === 'true') &&
+    !(element.hasAttribute('data-hidden-select-ignore') && element.getAttribute('aria-hidden') === 'true') &&
     (element.nodeName === 'DETAILS' &&
       childElement &&
       childElement.nodeName !== 'SUMMARY'

packages/@react-aria/select/src/HiddenSelect.tsx

@@ -88,6 +88,7 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
     containerProps: {
       ...visuallyHiddenProps,
       'aria-hidden': true,
+      ['data-hidden-select-ignore']: true,
       ['data-a11y-ignore']: 'aria-hidden-focus'
     },
     inputProps: {

packages/@react-aria/select/test/HiddenSelect.test.tsx

@@ -74,4 +74,12 @@ describe('<HiddenSelect />', () => {
 
     expect(screen.getByTestId('hidden-select-container')).toHaveAttribute('data-a11y-ignore', 'aria-hidden-focus');
   });
+
+  it('should always add a data attribute data-hidden-select-ignore', () => {
+    render(
+      <HiddenSelectExample items={makeItems(5)} />
+    );
+
+    expect(screen.getByTestId('hidden-select-container')).toHaveAttribute('data-hidden-select-ignore');
+  });
 });