canonical / canonical/vanilla-framework

Tabs aria-selected is not supported on role link

Open
#4,481 3 comments 0 reactions 0 assignees View on GitHub
Accessibility Bug 🐛 P3 Triaged Priority: Medium Triaged: v4
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

**Describe the bug**

Tabs example suggests using semantics that's not supported and throws an accessibility error.

"aria-selected is not supported on role link"

We should investigate using different semantics when displaying tabs as links. Maybe we could use `aria-current="section"` instead?

**To Reproduce**

Steps to reproduce the behavior:

1. Go to https://vanillaframework.io/docs/patterns/tabs#navigation
2. Validate accessibility e.g. with axe devtools
3. See the error thrown

**Additional context**

https://www.stefanjudis.com/blog/aria-selected-and-when-to-use-it/#how-to-not(!)-use-%60aria-selected%60
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current

Contributor guide

Open the contributing guide

Research direction

Start at the tabs navigation example at vanilla-framework.io/docs/patterns/tabs#navigation and reproduce the aria-selected error with axe DevTools. Read the linked ARIA guidance, compare aria-selected with aria-current="section", and confirm the updated example passes accessibility validation.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
accessibility, documentation
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.