cerner / terra-core

Terra offers a set of configurable React components designed to help build scalable and modular application UIs. This UI library was created to solve real-world issues in projects we work on day to day.
http://terra-ui.com
Apache License 2.0
181 stars 167 forks source link

[terra-form-select] Update focus indicators for Fusion theme #4069

Closed cm9361 closed 6 months ago

cm9361 commented 6 months ago

Summary

What was changed: The focus indicators were updated for the terra-form-select controls for the orion-fusion-theme.

Why it was changed: The change was made so that the focus indicators would be consistent with others in the theme.

Testing

This change was tested using:

Reviews

In addition to engineering reviews, this PR needs:

Additional Details

This PR resolves:

UXPLATFORM-10318


Thank you for contributing to Terra. @cerner/terra

eawww commented 6 months ago

It doesn't look like the new focus style was applied to the invalid variant: image

Noting that the big fuzzy focus indicator looks a tad strange while navigating the items but the borderless light blue background that would otherwise be used would be much further from meeting contrast requirements. image

cm9361 commented 6 months ago

@eawww - I fixed the invalid select control. Is there any change you would like me to make on the selection focus indicator?

eawww commented 6 months ago

Looking at this again, I don't think the giant glow on the secondary indicator is going to go over well. While I think that indicator just had the light blue background before, terra select component with options expanded and a faint blue background indicating the focused option that has a 1.1:1 contrast ratio which will actually disappear on some displays regardless of vision ability. So I'm not comfortable signing off on that.

After chatting with a few of my UX compatriots, I think just removing the outer glow from the indicator on the options will have to do for now. box-shadow: rgba(76, 178, 233, 0.5) 0px 0px 1px 3px inset; terra select component with options expanded and a faint blue background with a slightly deeper blue inset box shadow indicating the focused option

Note: this still doesn't quite meet contrast requirements. I'm going to try to get a conversation started to get the standard Fusion focus styles updated.