[Redesign] Considere using focus-visible

[josemarluedke]

I have been following the redesign effort and I would like to start a discussion about the focus state.

The focus indicator is essential for keyboard navigation and accessibility. However, for users using a mouse or trackpad, the focus indicator can be a little distracting. Below are a few examples that I find super distracting.

There is a solution that allows hiding the focus indicator when using a mouse, and show them when keyboard is used.

This is such a common use case that it's being implemented directly into browsers: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

In my projects, I always use this "polyfill" that works great: https://github.com/WICG/focus-visible

You can also find an example using that lib here: https://josemarluedke.github.io/frontile/versions/master/docs/core/accessibility/focus-management

Here is what I'm referring to:

cc/ @mansona @MelSumner

[MelSumner]

We don't plan to remove focus, but we do plan to update the styleguide to ensure that the focus outline is on-brand for the rest of the design.

Thank you for submitting this issue- I have it documented in ember-styleguide (where our styling lives) so I will close this issue and track it there- ember-learn/ember-styleguide#285

[Windvis]

@MelSumner Can you elaborate on why the focus styles are needed when the user is using mouse navigation? Just trying to understand the reasoning behind always showing the focus state, since @josemarluedke's explanation seemed very reasonable to me. 😄