Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

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

Merged
merged 7 commits into from
Mar 25, 2024

Conversation

cm9361
Copy link
Contributor

@cm9361 cm9361 commented Mar 20, 2024

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:

  • WDIO
  • Jest
  • Visual testing (please attach a screenshot or recording)
  • Other (please describe below)
  • No tests are needed

Reviews

In addition to engineering reviews, this PR needs:

  • UX review
  • Accessibility review
  • Functional review

Additional Details

This PR resolves:

UXPLATFORM-10318


Thank you for contributing to Terra.
@cerner/terra

@cm9361 cm9361 requested a review from a team as a code owner March 20, 2024 16:24
@github-actions github-actions bot temporarily deployed to preview-pr-4069 March 20, 2024 16:26 Destroyed
@eawww
Copy link
Contributor

eawww commented Mar 22, 2024

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

@github-actions github-actions bot temporarily deployed to preview-pr-4069 March 25, 2024 00:06 Destroyed
@cm9361
Copy link
Contributor Author

cm9361 commented Mar 25, 2024

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

@eawww
Copy link
Contributor

eawww commented Mar 25, 2024

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.

@github-actions github-actions bot temporarily deployed to preview-pr-4069 March 25, 2024 16:29 Destroyed
@github-actions github-actions bot temporarily deployed to preview-pr-4069 March 25, 2024 17:34 Destroyed
@cm9361 cm9361 merged commit e7481a3 into main Mar 25, 2024
22 checks passed
@cm9361 cm9361 deleted the form-select-focus-indicator branch March 25, 2024 17:50
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants