tusen-ai/naive-ui

Feature request: better ARIA support and less click listeners

Open

#41 opened on Jun 9, 2021

View on GitHub
 (12 comments) (5 reactions) (0 assignees)TypeScript (14,240 stars) (1,531 forks)batch import
a11yfeature requesthelp wantedpr welcome

Description

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.

Contributor guide

Tech stack
vuetypescript
Domain
accessibility
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
understanding of ARIA rolesfamiliarity with Vue component propsbasic knowledge of naive ui codebase structure
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Examine the component files in src/components for dropdown, radio, breadcrumbs, tags, cascader, checkboxes, and input. Add aria role, aria hidden, and aria disabled attributes as described. Check comments in the issue for any additional guidelines. Ensure consistency with existing ARIA patterns in the codebase.