Require :focus styles to accompany :hover

[shawnbot]

This is an accessibility issue. There have been some discussions about a pseudo-selector that combines the two, but we should at least be warning folks if they add :hover styles without also adding :focus.

/cc @primer/ds-core

[simurai]

One day there might be a :focus-visible pseudo-selector.

This selector is useful to provide a different focus indicator based on the user’s input modality (mouse vs. keyboard).

I think @muan added some "focused with the mouse vs keyboard" trickery on some components.

[muan]

I think @muan added some "focused with the mouse vs keyboard" trickery on some components.

In dotcom we have a short script discerning user intent (mouse or keyboard), and applying outline: none only when .intent-mouse *:focus. Check out button-outline.js/css.

[muan]

Just came across YozhikM/stylelint-a11y which comes with selector-pseudo-class-focus. ❤️