Feature request: better ARIA support and less click listeners

[gdh1995]

What 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 the div.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.

[07akioni]

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!

[delowardev]

Any update on this ticket? I'm also thinking of implementing a11y and better keyboard support. It would be helpful if you mention which component you're working on so that we can start with a different component.

[07akioni]

Any update on this ticket? I'm also thinking of implementing a11y and better keyboard support. It would be helpful if you mention which component you're working on so that we can start with a different component.

Currently you can pick any component you want to implement. Just mark it here. If it's duplicate I'll let you know.

[Matth10]

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:

• Alert
• Accordion
• AutoComplete
• Buttons
• Breadcrumb
• Cards
• Carousel
• Checkbox
• ComboBox
• Dialog (Modal)
• DatePicker
• Inputs
• Links
• Radio Group
• ListBox
• Menu
• Tabs

Maybe we can create a board to have a better tracking?

Anyway I'll start with the Alert component

[07akioni]

modal done, ref 5ab2182

[TheHunterDog]

Is this still active?

[TheHunterDog]

Cards headers are lacking Aria roles

[07akioni]

Is this still active?

This is still active. You can open an issue for specific component to let us know you need it so that we can add it early.

[07akioni]

Cards headers are lacking Aria roles

Can you tell us what is missing?

[TheHunterDog]

Cards headers are lacking Aria roles

Can you tell us what is missing?

I am not familiar with ARIA descriptions but lighthouse is triggering an ARIA problem

[07akioni]

Cards headers are lacking Aria roles

Can you tell us what is missing?

I am not familiar with ARIA descriptions but lighthouse is triggering a ARIA problem

If possible please describe the detail info about the problem. If it's just describe as 'a problem' or 'something missing' we are not able to fix it.