Accessibility: Enable an outline focus indicator by default

[TobyKLight]

When you press TAB to cycle through interactive HTML elements on a page you should see a so called 'focus highlight' that shows you what element is selected. It would be great to have one of these by default to improve accessibility of everything made by cables.

Browsers usually have this in the default styles so possibly cables.gl own CSS is blocking outline from being drawn? This is perhaps due to concerns the outline appears when not needed, e.g from sighted mouse users clicking on elements.

There is a modern solution for this using the css selector :focus-visible

Generally:

• :focus-visible This smart option is only meant to show focus indicators when the user needs it. As far as I can tell the focus indicator appears when the user tries to discover elements with TAB key
• :focus This will also set focus indicators when the user clicks with a pointing device

For more details on this see the MDN entry.

---

Workaround:
Cables.gl users can of course manually add a :focus-visible style.

For a demo of an outline go to this patch page and press TAB, notice the blue outline