search

egoist / hack

⛷ Dead simple CSS framework.
https://hackcss.egoist.dev
MIT License
2.6k stars 140 forks source link

Add Form Control Focus Indication #55

Open ghost opened 7 years ago

ghost commented 7 years ago

Currently form-control components have their outline suppressed but do not provide an alternative style using the :focus pseudo-selector, the result of which is a usability issue.

Without outline or :focus, it's not possible to tell where the cursor is while navigating form elements using switch-based peripherals such as tab, or when shifting contextual frames of reference such as navigating through browser history.

Here's what a focused button looks like using a standard outline:

screen shot 2017-05-09 at 6 44 24 pm

And here's what that same button looks like with focus in hack@v0.8.0:

screen shot 2017-05-09 at 6 52 31 pm

This usability issue is exacerbated when using button groups and/or groups of form controls. It is not currently a problem for a elements, which maintain their focus when navigating using a

ghost commented 7 years ago

Proposal is to add :focus with a slight change in alpha transparency, the value of which may be driven by the amount of WCAG 2.0 compliance desired by the library.