[UI] - use :focus-visible

michalkvasnicak commented 4 years ago

https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo

This could close the #310

Basically we want some component that will detect if the focus was caused by a keyboard event or pointer event and sets the behaviour for all focusable elements based on that (e.g. :focus).

Mechanism:

if user presses Tab then the component will apply global styles for focus-visible on all focusable elements
if user uses any pointer event then the component will remove the focus from global styles so the focus won't be visible

Usage:

<DesignSystem>
  <TouchVisibleManager />
  {children}
</DesignSystem>

michalkvasnicak commented 4 years ago

This one doesn't look so hard but the catch is when you programatically focus something. Then it's behaviour changes depending on :focus-visible status of the previous element.

michalkvasnicak commented 4 years ago

@jurajhrib Looking on available polyfills there are issues so it won't work 100% of time. I'm not sure if we should implement our own solution because if solutions that are used in thousands of projects are not 100% ok then what's the point?

michalkvasnicak commented 4 years ago

@jurajhrib there is an interesting package https://react-spectrum.adobe.com/react-aria/index.html and they have focus ring and other accessibility features solved by hooks, maybe it would be beneficial to take a look on their implementation, if we can use their package or just get inspired.

Byteclaw / visage

[UI] - use :focus-visible #349