Active State Styling - Consistent Outline Style

[sfrisk]

Given that browsers handle CSS Outlines differently, we should come up with a universal style for "active" states (for buttons, anchors, inputs), that doesn't remove the CSS Outline (because that would be bad and go against what we're trying to here), but at least makes it consistent visually across browsers.

[sfrisk]

See: http://a11yproject.com/posts/never-remove-css-outlines/

[thejdeep]

👍 How about applying an outline:none on the elements in active state and applying appropriate CSS to make them look like below on all browsers

[sfrisk]

I think we should try to style the outline element before going with outline:none.

[thejdeep]

Point of debate being : Visually consistent across browsers v/s across websites
Ref : https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/

[rawteech]

@sfrisk Thats a thoughtful Idea. Now, how about coming up with the universal active state,as you said, then give browsers an option of turning 'on' or 'off' these CSS outline styles, keeping the 'on' state as the default.

[rawteech]

@thejdeep That will be like forcing all browsers to have styled elements. It looks cool though 😎

[nashvail]

See: http://a11yproject.com/posts/never-remove-css-outlines/

@sfrisk http://a11yproject.com/posts/never-remove-css-outlines/ seems to be dead http://www.outlinenone.com/ probably makes the same point

[nashvail]

Seems like to create a universal style for the active state styling of inputs styling box-shadow is the way to go while also setting outline:none.

Firstly there is no predefined blurred/hazy style for outlines, I tried recreating the effect using multiple outlines with incrementally increasing thickness and decreasing opacity but turns out multiple outlines on same element is not possible.

Moreover our buttons and inputs have non zero border-radius and it is not possible to to add radius to outlines in CSS, adding custom outline therefore results in a triangular gap at all the four corners.

Therefore the best way I think to go around having blurred outlines for active/focus states is through box-shadow.

I also don't think we are in the process violating any a11y guidelines as we are providing alternative styling and not removing anything that will result in a11y getting harmed.

Thoughts?

[sfrisk]

My reason for being concerned about the light box shadow to indicate focus, is that a lot of the stylings is within variables, and if someone ops for a 'flat' button design, we lose that focus appearance. Also I'm not sure if our box-shadow counts as "high visibility" as a clear indicator of 'focus' state as mentioned in http://www.outlinenone.com/

Also ping @arschmitz for input.