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.

Feature request: better ARIA support and less click listeners

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
Matth10commented, Dec 25, 2021

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

3reactions
07akionicommented, Jun 9, 2021

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!

Read more comments on GitHub >

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

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