Common pseudo-class for :hover and :focus

When I was testing a website for keyboard accessibility, I noticed that most of its failures were due to hover styles not being applied to elements "hovered over" using the tab key. The solution was to add :focus selectors to :hover rules. This got me thinking about a problem many designers and developers run into with :hover.

> The :hover pseudo-class applies while the user designates an element with a pointing device...

- CSS4 specification (http://dev.w3.org/csswg/selectors/#hover-pseudo)

Limiting the :hover pseudo-class to pointing devices was a real missed opportunity for keyboard accessibility. The naming of :hover is somewhat misleading, as it specifically means elements "designated" with a pointing device, rather than any form of input.

I propose we add a common pseudo-class for :hover and :focus. A good name could be :enter, as it is harmonious with PointerEvents, and it shares an intrinsic association with keyboards.

> The :enter pseudo-class applies while the user designates an element with a keyboard, pointing device, or other form of input.


To test and perhaps implement this pseudo-class in the wild, I’ve created a polyfill / prollyfill.

https://github.com/jonathantneal/postcss-pseudo-class-enter <https://github.com/jonathantneal/postcss-pseudo-class-enter>

Best,
Jonathan