aria-hidden-focus rule is broken by TabsterDummyInput element
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 165
- Forks
- 42
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 9
Description
While testing our product that uses tabster, the Accessibility Insights fast pass failed because the aria-hidden-focus rule is being broken by one of tabster's components. Our component is a Toolbar that uses tabster to enable circular arrow navigation in the toolbar, and the element breaking this rule is a that gets added above and below the children of the toolbar.
According to the rule, elements that have "aria-hidden" = true should not be focusable. The element has aria-hidden=true and tabindex=0, which are contradictory. Looks like this is being set here: https://github.com/microsoft/tabster/blob/3596de9c7029f9cfb3653c7a80956d37a22f007c/src/Utils.ts#L707.
Link to the broken rule: https://accessibilityinsights.io/info-examples/web/aria-hidden-focus/
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Inspect src/Utils.ts at the linked line where TabsterDummyInput receives its attributes, then trace how the toolbar's boundary elements are created. Reproduce the issue with the Toolbar and Tabster setup described, and use the Accessibility Insights aria-hidden-focus check to verify that the generated elements no longer violate the rule.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100