Explore how :focus-visible might be used
Purpose
In gitlab#297353 (closed) there was a discussion the presence of a visible focus ring for both keyboard and mouse inputs.
This issue considers:
- What is the intended purpose of
:focus-visible
and current level of support? - How does
:focus-visible
impact accessibility? - What are user expectations as they switch input type?
- What are the use cases when
:focus-visible
may or may not be helpful? For example, tabbing through a form after selecting the first input with a mouse vs. clicking a toggle button or link in pagination.- In other words, what’s the argument for some elements having visible focus and others not with mouse input?
- Does inconsistency in the presence of a focus ring for mouse users pose a UX problem?
- How does a polyfill or What Input handle this instead of
:focus-visible
?
Reference
- https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo
- https://css-tricks.com/almanac/selectors/f/focus-visible/
- https://github.com/ten1seven/what-input
- https://www.nicchan.me/blog/tips-for-focus-styles/
- https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/
- https://css-tricks.com/focusing-on-focus-styles/
- https://hacks.mozilla.org/2019/06/indicating-focus-to-improve-accessibility/
- https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
- https://www.deque.com/blog/accessible-focus-indicators/
Edited by Jeremy Elder