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

[form-single-select] Invalid example foucs and safari browser issue fixes #3902

Merged
merged 9 commits into from
Sep 13, 2023

Conversation

KV106606Viswanath
Copy link
Contributor

Summary

Invalid example focus issue - Previously, under 'Invalid' group 'Select a colour' combo box, Focus is not visible on Select a colour combo box. As a result Accessibility user unable to identify the focus. - It has fixed now.
Safari browser issue - Previously, In Safari browser when we bring focus on combobox and expand, and Press 'Escape' key to close combobox menu, browser is getting minimised - It has fixed now.

What was changed:
Added focus to the Invalid example.
Safari browser minimising issue has fixed.

Why it was changed:
Invalid example focus issue - As a result Accessibility user unable to identify the focus.
Safari browser issue - When we expand the combobox and press escape key browser shouldn't get minimised.

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-9570, 9572


Thank you for contributing to Terra.
@cerner/terra

@KV106606Viswanath KV106606Viswanath requested a review from a team as a code owner September 1, 2023 08:53
Comment on lines 40 to 41
--terra-form-select-single-select-invalid-focus-border-color: #004c76;
--terra-form-select-single-select-invalid-focus-box-shadow: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Were inputs from UX taken regarding these. On focus the red color disappears which does not seem correct

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These styles has been removed and added outline around the red colour border when it gets focussed. So that we can see the red colour border as usual with outline.

@@ -37,6 +37,8 @@
--terra-form-select-invalid-focus-background-size: 0 0;
--terra-form-select-invalid-focus-border-color: #fb4c4c;
--terra-form-select-invalid-focus-box-shadow: 0 0 0 1px #fb4c4c, 0 0 0 1px #fb4c4c;
--terra-form-select-single-select-invalid-focus-border-color: #004c76;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style values are missing for orion-fusion-theme

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Above styles has been removed and added outline around the red colour border. Since there is no red colour border for invalid example in fusion theme, outline is not required so i have removed outline for fusion theme.

@KV106606Viswanath KV106606Viswanath self-assigned this Sep 8, 2023
@github-actions github-actions bot temporarily deployed to preview-pr-3902 September 12, 2023 13:37 Destroyed
@saket2403 saket2403 merged commit 35c7ddd into main Sep 13, 2023
21 checks passed
@saket2403 saket2403 deleted the KV106606-Form-Single-Select-Issues branch September 13, 2023 05:23
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants