question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

I 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:

  1. All aria-* props are explicitly whitelisted, OR
  2. 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:closed
  • Created 5 years ago
  • Comments:13 (10 by maintainers)

github_iconTop GitHub Comments

2reactions
markusenglundcommented, Feb 28, 2019

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.

2reactions
JaeYeopHancommented, Feb 9, 2019

@markusenglund Thanks! very helpful!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found