Updating docs copy for accessibility false positives #4856
Conversation
|
Build successful! 🎉 |
|
|
||
| ### False positives | ||
|
|
||
| There are a number of known accessibility false positives in React Aria and React Spectrum, currently documented here in our [wiki](https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives). |
There was a problem hiding this comment.
IMO we should continue to maintain this wiki as our source of truth for these accessibility data attributes rather than maintain a table of them in this page here, open to opinions though
|
Build successful! 🎉 |
|
|
||
| ### False positives | ||
|
|
||
| Picker may trigger a [known accessibility false positive](https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#picker) |
There was a problem hiding this comment.
Should we have a short explanation of what the issue is and why it's a false positive here?
| There are a number of known accessibility false positives in React Aria and React Spectrum, currently documented here in our [wiki](https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives). | ||
| These are commonly caught by automated accessibility testing tools and can cause unnecessary noise in your own accessibility audits. | ||
| To facilitate the suppression of these false positives, the data attribute `data-a11y-ignore` is included on the problematic elements | ||
| with the relevant `AXE` rule set as its value. See [here](https://github.com/adobe/react-spectrum/blob/9a9327fae5b5a466f7a1394a82669ea19858356d/.storybook/preview.js#L17-L26) |
There was a problem hiding this comment.
I kinda think we should show a code example inline here rather than linking. We might also want to show how to do it for pa11y as well, as that was what was requested in the original issue?
There was a problem hiding this comment.
Added a code example for the Storybook test runner config. As for pa11y, strangely enough it doesn't actually catch the HiddenSelect false positive when I run the cli using npx pa11y --runner axe 'https://reactspectrum.blob.core.windows.net/reactspectrum/ca8f4230c5efb9f248f0a028257ac60093706f78/storybook/iframe.html?providerSwitcher-express=false&providerSwitcher-toastPosition=bottom&providerSwitcher-locale=&providerSwitcher-theme=&providerSwitcher-scale=&args=&id=picker--default&viewMode=story'. Not sure what tool the console error the original issue comes from.
I can add a blurb still with a tentative way to suppress the error in pa11y but I'm a bit hesitant to do so without being able to reproduce the error in pa11y in the first place
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| with the relevant `AXE` rule set as its value. Below is a list of the currently available data selectors and their equivalent `AXE` rules: | ||
|
|
||
| ```tsx | ||
| rules: [ |
There was a problem hiding this comment.
might need to wrap this in another {} object. the syntax coloring might be confused.
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'identifier', name: 'Column' } |
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project:
RSP