Focus indicators should be visible for keyboard and mouse users

[thibaudcolas]

What should happen?

Foundation should always preserve visible focus indicators for keyboard users, regardless of whether they also happen to be using a mouse or not.

What happens instead?

From the Foundation Accessibility documentation:

Foundation's CSS makes use of the library what-input, which can detect the user's current input device and adjust CSS accordingly. We use it to disable outlines for mouse users, but not keyboard users, who need the outline to know what element on the page has focus.

Possible Solution

Remove what-input. If focus indicators are such a problem for mouse-only users, consider switching focus styles to :focus-visible.

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://get.foundation/sites/docs/accessibility.html

How to reproduce:

1. Press the tab key on the page a few times
2. Move the mouse
3. Note the focus indicator has disappeared.

Context

Fill a form I will be using my keyboard to type into fields and tab between them, but I’d also be using my touchpad to scroll up and down the page. The focus then disappears, which makes it harder to keep track of where I was at.

Your Environment

This doesn’t seem particularly relevant as this is a default feature of Foundation across all setups.

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title and template are correctly filled.