"outline: none" on form inputs prevents keyboard focus indicator

[clytwynec]

See: https://github.com/edx/ux-pattern-library/blob/d88ecee44263766703e132a0071873843cbe0032/pattern-library/sass/patterns/_forms.scss#L226

This is would cause an accessibility issue.

FYI @cptvitamin @clrux

[downzer0]

This is a tricky one. We're using a custom outline style (in the form of border-color) to show focus. Though, now that I think about it, I'm wondering if the change in border color is enough of a change to be considered "focused".

Is this causing automated tests to fail? If we decided to make the "focus" style more noticeable, would this be okay if we kept outline: none?

[clytwynec]

Ah, yea. I should have been more specific I guess. This is really only affecting checkbox/radio type inputs.

[downzer0]

Ah, yes, hm.

Two suggestions:

• use default browser outlines for all input types (blue glow on a mac, black dotted in Firefox, etc.), or
• exclude certain input types from this CSS selector using :not or similar.

The latter would use default browser styling on radios and checkboxes, but other input types would have our custom styling.

My preference (but this is ultimately up to @talbs)

• use default browser styling as it's:
  • recognizable
  • consistent
  • simpler

Edit: We have control over the focus styles for our custom/replaced inputs, including radios and checkboxes, but not the default. So, we could alternatively write separate rules for the non-replaced versions and the replaced versions, the latter getting outline: none and border treatments, the former using browser defaults.