Feature request: better ARIA support and less click listeners
See original GitHub issueWhat problem does the feature solve?
I find there’re two issues on the doc website:
- some clickable targets have no
[role="button"]
, like dropdown menuitems, radio buttons and breadcrumbs - some non-clickable components has click listeners, like tags
- some
disabled
components still has click listeners but no[aria-disabled]
is added, like cascader menuitems and checkboxes - usually a
<input>
is wrapped by<div>
s, and thediv.n-input
has a click listener but without[aria-hidden=true]
What does the proposed API look like?
I have an extension “Vimium C” to help users use keyboard to click page elements, and when it find links, it will pick those with [role=button], [role=link]
and filter out those [aria-hidden], [aria-disabled], [aria-hidden=true], [aria-disabled=true]
. It also hooks the global addEventListener
function to learn what “plain” elements are clickable.
When I tested Vimium C’s LinkHints.activate
(triggered by f
) on pages like https://www.naiveui.com/zh-CN/os-theme/components/input , I found many clickable were not recognized, while many others were mistakenly hinted.
So I want this framework to add more clues to let such keyboard helper extensions work better.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:11 (2 by maintainers)
Top Results From Across the Web
Feature request: better ARIA support and less click listeners ...
n-input has a click listener but without [aria-hidden=true]. What does the proposed API look like? I have an extension "Vimium C" to help...
Read more >Links - Usability & Web Accessibility - Yale University
Combine Adjacent Links into a Single Link; Hidden Link Text; ARIA Techniques; Emulating Links ... Avoid link text like “Click Here,” “More,” and...
Read more >Accessible Rich Internet Applications (WAI-ARIA) 1.2 - W3C
This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to ...
Read more >on-demand-workflows-bettercloud-feature-request - BetterCloud
Share this post ... By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation,...
Read more >HTML: A good basis for accessibility - Learn web development
You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will help to fill gaps in this ......
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
I’ll be happy to help too. I think we can use this as a starting point. https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex. Here is another good ressource: https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
We can put a list of TODOs like this:
Maybe we can create a board to have a better tracking?
Anyway I’ll start with the Alert component
I’m going to add better aria support. Actually I’m new to a11y. The support of a11y will be gradually added.
You advice is very useful. I’ll keep the issue open. If anyone could help I’d very appreciate.
PR welcomed!