Skip to content

Commit 24d931b

Browse files
Michael JordanLFDanLu
andauthored
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>
1 parent 5d7bbd5 commit 24d931b

File tree

3 files changed

+10
-1
lines changed

3 files changed

+10
-1
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function isAttributeVisible(element: Element, childElement?: Element) {
4444
return (
4545
!element.hasAttribute('hidden') &&
4646
// Ignore HiddenSelect when tree walking.
47-
!(element.hasAttribute('data-a11y-ignore') && element.getAttribute('aria-hidden') === 'true') &&
47+
!(element.hasAttribute('data-hidden-select-ignore') && element.getAttribute('aria-hidden') === 'true') &&
4848
(element.nodeName === 'DETAILS' &&
4949
childElement &&
5050
childElement.nodeName !== 'SUMMARY'

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
8888
containerProps: {
8989
...visuallyHiddenProps,
9090
'aria-hidden': true,
91+
['data-hidden-select-ignore']: true,
9192
['data-a11y-ignore']: 'aria-hidden-focus'
9293
},
9394
inputProps: {

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,4 +74,12 @@ describe('<HiddenSelect />', () => {
7474

7575
expect(screen.getByTestId('hidden-select-container')).toHaveAttribute('data-a11y-ignore', 'aria-hidden-focus');
7676
});
77+
78+
it('should always add a data attribute data-hidden-select-ignore', () => {
79+
render(
80+
<HiddenSelectExample items={makeItems(5)} />
81+
);
82+
83+
expect(screen.getByTestId('hidden-select-container')).toHaveAttribute('data-hidden-select-ignore');
84+
});
7785
});

0 commit comments

Comments
 (0)