561 focused elements- update focus style

[ghost]

Fixes #561

• Up to date with dev branch
• Branch name follows guidelines
• All PR Status checks are successful
• Peer reviewed and approved

Preview:

[adamkendis]

The style looks good with just a small change needed. Ideally, this new focus style should only apply to elements that are focused via keyboard rather than mouse clicks. I believe :focus-visible could accomplish this but it has lousy browser support - might need a polyfill for it if used.

[ghost]

I made changes using the focus-visible polyfill and its working on chrome, edge, firefox, and ie11 from my testing with Lambda Tunnel. There are a few issues remaining:

• Text Input changes to focus-visible on mouse-click as well as through tabbing, from my research this seems to be inherent to :focus-visible.

• Checkboxes in request type selection change are able to be activated on tab, but not checked using keyboard. I believe this is because the box is styled using the label::before so 'return' is not activating the checked state

• There is an issue with Mac that prevents focus on links through tabbing unless you — set Mac system preferences and add an accessibility:tabfocus preference in Firefox’s about:config (https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox). After I made those changes, focus styles showed up on tab in firefox

[adamkendis]

Looks good! Working for me in chrome, firefox, edge, IE11. Let's leave the input focus functionality in for now and see what UI thinks. I think this is normal behavior.

I'll add the request type checkbox issue to the keyboard accessibility ticket #582. Good find!