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/