From 24d931be9d9d8e72f6ca8f1e6b789fea0520fae7 Mon Sep 17 00:00:00 2001
From: Michael Jordan <mijordan@adobe.com>
Date: Fri, 5 Apr 2024 20:11:43 -0400
Subject: [PATCH] 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>
---
 packages/@react-aria/focus/src/isElementVisible.ts     | 2 +-
 packages/@react-aria/select/src/HiddenSelect.tsx       | 1 +
 packages/@react-aria/select/test/HiddenSelect.test.tsx | 8 ++++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/@react-aria/focus/src/isElementVisible.ts b/packages/@react-aria/focus/src/isElementVisible.ts
index 23e9f73aefa..04bab97b810 100644
--- a/packages/@react-aria/focus/src/isElementVisible.ts
+++ b/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'
diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index 1d671b674b9..7a05f338d98 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/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: {
diff --git a/packages/@react-aria/select/test/HiddenSelect.test.tsx b/packages/@react-aria/select/test/HiddenSelect.test.tsx
index 2fb4b4f83b0..c39fba151d1 100644
--- a/packages/@react-aria/select/test/HiddenSelect.test.tsx
+++ b/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');
+  });
 });