[Feature Request] Focus / Outline Indicator for Buttons

[dmcknight26]

Problem to solve

Currently when tabbing through a group of buttons it can be extremely difficult (if not impossible) to tell which one is currently focused. Especially for normal and icon buttons that have a color applied to them. Generally browsers will apply a blue outline around the focused element to indicate to the user that is the currently focused element.

Proposed solution

Support (or re-enable) the default blue outline that's applied to focused elements, perhaps making that a configuration option for the element. Failing that Google Play Music has an interesting take on icon buttons which applies an outer grayish circle on focused icon buttons that have a color assigned to them. You can see an example here which shows the pause button currently being focused: https://imgur.com/a/nCTJdsc. This could be a nice alternative...

[johnleider]

Going to move this to help wanted as we have met MD2 spec for v2 and this did not make the cut.

[renoirb]

For reference, here is the WCAG success criterion this issue is about.

For the issue regarding button focus visibility

It's WCAG 2.4.7, w3.org/WAI/WCAG21/quickref, some more notes are in w3.org/WAI/WCAG21/Understanding section

The bigger the visible change the easier it is for someone to see, authors are encouraged to make the change as large as possible. For example, a thick outline around the element.

[KaelWD]

My current implementation uses a more opaque overlay on buttons with dark backgrounds:

This is still only 1.45 contrast against unfocused buttons, but you can customise it per colour with --v-theme-<color>-overlay-multiplier (here it's 4):

Another solution would be a lighter ring overlaid only on keyboard focus like material-ui:

One problem is if it's too opaque it can make the text unreadable.