Use `:focus-visible` instead of `:focus` in stylesheets
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.1k
- Forks
- 455
- Avg merge
- 5h 9m
- Merged PRs (30d)
- 2
Description
We should use :focus-visible instead of :focus to style the tabs on focus. This pseudoclass is only true when focus is gained via keyboard navigation, not by any other method, and is how focus is handled on native elements, like buttons and links.
This isn't supported in Safari, so we need to perform some acrobatics to keep the old styles working in that browser.
button:focus {
/* our focus styles */
}
button:focus:not(:focus-visible) {
/* UNDO our focus styles */
}
Read more:
Contributor guide
No contributing guide indexed for this repository
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
Start by locating the tab stylesheets and existing :focus rules mentioned by the issue. Check the current focus behavior with keyboard and pointer interactions, including Safari, and consider the linked articles for the compatibility pattern; done means keyboard focus remains visibly styled while pointer focus does not unnecessarily show the old styles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100