Focus State on the Web

Hi Everyone,

(I originally posted this on blink dev but it was highlighted to me that
this would be a more appropriate place to discuss this topic)

I just wanted to open a discussion on why the focus state is being applied
on elements when touched or clicked, rather than just using active state,
resulting in :focus & :focus:active state being reserved exclusively for
keyboard interaction (or other input devices).

I started to look at how the two states work across browsers and the
behaviour is a bit messy on desktop, although fairly consistent on mobile
(apart from Safari).

http://www.gauntface.co.uk/blog/2013/12/09/focusing-on-the-web-today/

(I've filed a bug against Chrome for the loss of focus on label element in
Chrome: https://code.google.com/p/chromium/issues/detail?id=326993)

Initially my assumption was that the focus state would only take affect
when using a keyboard and this seems to be what Safari is doing on desktop,
while it requires a setting to enable tabbing on all elements, once
enabled, clicking will only use the active state until you interact via a
keyboard, at which point focus is used. Once you start interacting with a
keyboard and then go back to using the mouse, the focus state will stop
being used.

The obvious exception from this is the input field which is focused when
typing.

The main advantage for this approach is you can have more subtle changes in
your UI for touches and clicks and have more drastic calls to action with
the :focus state.

I can't think of any major disadvantage to this behaviour other than if
people are relying on this behaviour today and don't have an :active pseudo
class.

What is the reason for the current behaviour and are there any
accessibility concerns I may be missing? If not could we change the spec'ed
behaviour to be more in line with Safari where focus is reserved for
keyboard input?

Thanks,
Matt Gaunt