#3578 Add the ability to add a data attribute to <HiddenSelect /> to handle false a11y positives (#4759)

* Add option to add data attribute to hidden select

This allows to use the data attribute as a reference for other tools to ignore a11y issues.

* Add the ability to add a data-attr to handle a11y false positive

This solves #3578
Some tools such as AXE or pa11y might give false positive on hidden select.
This add a new prop to expose a data-attribute (dataset) that can be used to ignore these false positives.

* Improve grammar, fix typos

* Make the aria-rs-a11y-ignore attribute always available

There is no harm in making this available, as discussed in the PR review.

* Fix docs building issue

This fixes an issue in the docs where the component was being parsed when it shouldn't have been parsed.

* Update packages/@react-aria/select/docs/useSelect.mdx

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

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

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

* Move data attribute to container and add ignore rule to storybook axe

* Update storybook selector

Co-authored-by: Michael Jordan <[email protected]>

* updating aria-attribute

* fix tests

---------

Co-authored-by: Aloys Berger <[email protected]>
Co-authored-by: aloys <[email protected]>
Co-authored-by: Reid Barber <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>
Co-authored-by: Michael Jordan <[email protected]>
Co-authored-by: Yihui Liao <[email protected]>
Co-authored-by: Kyle Taborski <[email protected]>

Author: 8 people

.storybook/preview.js

@@ -14,7 +14,16 @@ export const parameters = {
   options: {
     storySort: (a, b) => a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
   },
-  a11y: {},
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: 'aria-hidden-focus',
+          selector: 'body *:not([data-a11y-ignore="aria-hidden-focus"])',
+        }
+      ]
+    }
+  },
   layout: 'fullscreen',
   // Stops infinite loop memory crash when saving CSF stories https://github.com/storybookjs/storybook/issues/12747#issuecomment-1151803506
   docs: {

packages/@react-aria/select/docs/useSelect.mdx

@@ -520,3 +520,9 @@ content that is passed into the select.
 In right-to-left languages, the select should be mirrored. The arrow should be on the left,
 and the selected value should be on the right. In addition, the content of list options should
 flip. Ensure that your CSS accounts for this.
+
+### False positive on `<HiddenSelect />` in accessibility tools
+
+When using &lt;<TypeLink links={docs.links} type={docs.exports.HiddenSelect} />&gt; some accessibility tools such as AXE or pa11y might give a false positive.
+The data attribute `data-rsp-a11y-ignore` is included on the hidden select element and can be used to ignore the false positives in these tools.
+

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

@@ -79,7 +79,8 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
   return {
     containerProps: {
       ...visuallyHiddenProps,
-      'aria-hidden': true
+      'aria-hidden': true,
+      ['data-a11y-ignore']: 'aria-hidden-focus'
     },
     inputProps: {
       type: 'text',
@@ -114,7 +115,7 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
   // autofill will work. Otherwise, use an <input type="hidden">.
   if (state.collection.size <= 300) {
     return (
-      <div {...containerProps}>
+      <div {...containerProps} data-testid="hidden-select-container">
         <input {...inputProps} />
         <label>
           {label}

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

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