Allow aria props
See original GitHub issueI saw that aria-label
and aria-labelledby
are accepted props to the component, but there are a number of others that are required based on a given element’s state. It would be nice if:
- All
aria-*
props are explicitly whitelisted, OR - The component used the
...restProps
syntax to allow passing any unanticipated properties to the component without the need to whitelist them individually
The specific prop that I came here about is aria-checked
, which is required for checkbox inputs (see https://dequeuniversity.com/rules/axe/3.1/aria-required-attr).
Issue Analytics
- State:
- Created 5 years ago
- Comments:13 (10 by maintainers)
Top Results From Across the Web
ARIA - Accessibility - MDN Web Docs - Mozilla
Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that define ways to make web content and web applications ...
Read more >ARIA in HTML - W3C
WAI-ARIA identifies roles which have prohibited states and properties. These roles do not allow certain WAI-ARIA attributes to be specified by ...
Read more >What the Heck is ARIA? A Beginner's Guide to ARIA ... - Lullabot
ARIA is a set of attributes you can add to HTML elements that define ways to make web content and applications accessible to...
Read more >Accessibility - React
This code exposes the functionality to both pointer device and keyboard users. Also note the added aria-* props to support screen-reader users. For...
Read more >eslint-plugin-jsx-a11y/aria-props.md at main - GitHub
Elements cannot use an invalid ARIA attribute. This will fail if it finds an aria-* property that is not listed in WAI-ARIA States...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Ok. Yeah, the best solution is probably to let people pass any prop they want straight to the input/checkbox element of the component. We could facilitate that by using the object …spread syntax. I have been reluctant to do that because it adds a fair bit of size to the component after babel transpiles it, but it seems like it would be worth the cost.
@markusenglund Thanks! very helpful!