[terra-search-field] Update search field focus indicator to standard dashed line #3834

trandrew1023 · 2023-06-30T14:49:56Z

Summary

What was changed:
Changed the search field's focus indicators to standard Terra dashed line for Terra themes. For Orion Fusion theme, there is still ongoing discussion about the styling so the only change for Orion Fusion is adding the box shadow to the input field to match the buttons to increase the visibility of the focus indicator.

Why it was changed:
Focus indicator consistency with other components

Testing

This change was tested using:

Terra Default:

Terra Lowlight:

Orion Fusion:

Reviews

In addition to engineering reviews, this PR needs:

UX review
Accessibility review
Functional review

Additional Details

This PR resolves:

UXPLATFORM-8109

Thank you for contributing to Terra.
@cerner/terra

cm9361 · 2023-07-07T18:40:18Z

packages/terra-search-field/src/SearchField.module.scss

+        outline: var(--terra-search-field-focus-keyboard-outline, 2px dashed #000);
+        outline-offset: var(--terra-search-field-focus-keyboard-outline-offset, 1px);


This pattern is showing up a lot in our code with the accessibility updates. Should this be converted to a mixin that can be reused or some other reusable concept? It is used 3 times in this file alone.

Discussed offline with Charles and team: will need to discuss as team the default focus indicators for each theme and go forward strategy to implement in a way that all components will receive a consistent styling

cm9361 · 2023-07-07T18:47:23Z

packages/terra-search-field/src/SearchField.module.scss

@@ -47,7 +47,9 @@
      }

      &:focus {
-        border-color: var(--terra-search-field-button-focus-border-color, #26a2e5);
+        box-shadow: var(--terra-search-field-clear-focus-box-shadow);
+        outline: var(--terra-search-field-focus-keyboard-outline, 2px dashed #000);


In this scenario, can't we create one descendant focus pseudo selector to cover all the use cases under the search field? I don't think we should have to add a selector for each type of element. I think this could make it so that you only have to maintain one style block for the focus.

@cm9361 I was able to add the styles under the *.focus here 4e9be89

Not sure if there's another approach you would apply here outside of the discussion had about having a library wide focus indicator style

sdadn · 2023-07-07T20:53:26Z

packages/terra-search-field/tests/wdio/search-field-spec.js

@@ -9,7 +9,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
    });

    it('should enter a search term', () => {
-      $('input').setValue('Lore');
+      $('input').setValue('Lore', { mismatchTolerance: 0.1 });


Out of curiosity, what is the reason for the mismatchTolerance being set??

Those tests were randomly failing due to some of the edges of the focus dotted lines being darker/lighter than the reference

That makes sense. Thanks!

Can you add a comment indicating why this was added for documentation purposes? Something like:
Setting the mismatchTolerance to 0.1 to account for subtle variances in the dotted line.

(Or whatever wording is more accurate)

Good idea! Added comments for the new mismatchTolerances here 0ef9818

sdadn · 2023-07-13T19:50:08Z

packages/terra-search-field/CHANGELOG.md

@@ -2,6 +2,9 @@

 ## Unreleased

+* Changed
+  * Updated focus indicators to standard dashed line.


Suggested change

* Updated focus indicators to standard dashed line.

* Updated focus indicators to be a standard dashed line.

Updated changelog here: 32d5c76#diff-9a64312164f2dbc2f8fde50e49118667ef236e6f49d7b535dab2b1191ff3df50

supreethmr · 2023-07-24T18:08:46Z

packages/terra-search-field/src/orion-fusion-theme/SearchField.module.scss

+    --terra-search-field-input-focus-keyboard-outline: none;
+    --terra-search-input-field-focus-keyboard-outline-offset: none;


Suggested change

--terra-search-field-input-focus-keyboard-outline: none;

--terra-search-input-field-focus-keyboard-outline-offset: none;

--terra-search-field-input-focus-keyboard-outline: none;

--terra-search-input-field-focus-keyboard-outline-offset: none;

not able to find these variables on other themes !! are these variables required ??

Good catch, these are no longer needed and have been removed here d61bf2c

eawww

Beautiful! 😙👌

github-actions bot temporarily deployed to preview-pr-3834 June 30, 2023 14:50 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 June 30, 2023 16:23 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 July 3, 2023 22:20 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 July 5, 2023 15:23 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 July 5, 2023 19:27 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 July 6, 2023 21:02 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 July 6, 2023 21:22 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 July 7, 2023 16:47 Destroyed

trandrew1023 self-assigned this Jul 7, 2023

github-actions bot temporarily deployed to preview-pr-3834 July 7, 2023 17:48 Destroyed

trandrew1023 marked this pull request as ready for review July 7, 2023 18:12

trandrew1023 requested a review from a team as a code owner July 7, 2023 18:12

trandrew1023 changed the title ~~Update search field focus indicator to standard dashed line~~ [terra-search-field] Update search field focus indicator to standard dashed line Jul 7, 2023

trandrew1023 added UX Review Required UX Review Ready 📦 terra-search-field labels Jul 7, 2023

cm9361 reviewed Jul 7, 2023

View reviewed changes

sdadn reviewed Jul 7, 2023

View reviewed changes

sdadn approved these changes Jul 7, 2023

View reviewed changes

sycombs approved these changes Jul 10, 2023

View reviewed changes

github-actions bot temporarily deployed to preview-pr-3834 July 11, 2023 14:53 Destroyed

trandrew1023 force-pushed the search-field-focus-updates branch from 4875aea to 7580abd Compare July 11, 2023 14:54

github-actions bot temporarily deployed to preview-pr-3834 July 11, 2023 15:16 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 July 12, 2023 21:11 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 July 12, 2023 21:21 Destroyed

github-actions bot temporarily deployed to preview-pr-3834 July 12, 2023 21:47 Destroyed

artpark approved these changes Jul 13, 2023

View reviewed changes

sycombs approved these changes Jul 13, 2023

View reviewed changes

sdadn reviewed Jul 13, 2023

View reviewed changes

github-actions bot temporarily deployed to preview-pr-3834 July 13, 2023 22:14 Destroyed

supreethmr reviewed Jul 24, 2023

View reviewed changes

eawww approved these changes Jul 24, 2023

View reviewed changes

Andrew Tran added 16 commits July 25, 2023 14:55

Update search field focus indicator to standard dashed line

8eddfc6

Fix lint

f01ebd2

Update wdio

5d359d2

Update tolerance

883006c

Change back to 2px

43ad176

Add tests and checks

41ed82c

Update css

80c3bce

Update clear icon box shadow

5f2cbc9

Fix lint

fb5f7ce

Extract focus settings

f527e7e

Only update Terra themes for dashed ind

147387d

Extract common focus styles

982ce90

Changelog suggestion

777f5bb

Add clarifications for mismatchTolerance

749d4d2

Remove mismatch

cfe3495

Remove unused vars from orion-fusion-theme

d61bf2c

trandrew1023 force-pushed the search-field-focus-updates branch from 0613c07 to d61bf2c Compare July 25, 2023 15:12

github-actions bot temporarily deployed to preview-pr-3834 July 25, 2023 15:14 Destroyed

Update wdio screenshots

66a848f

github-actions bot temporarily deployed to preview-pr-3834 July 26, 2023 02:40 Destroyed

trandrew1023 added ⭐ UX Reviewed UX Reviewed and approved. Ready To Merge and removed UX Review Required UX Review Ready labels Jul 26, 2023

sdadn merged commit 1d2e43d into main Jul 26, 2023
21 checks passed

sdadn deleted the search-field-focus-updates branch July 26, 2023 14:14

sdadn removed the Ready To Merge label Jul 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[terra-search-field] Update search field focus indicator to standard dashed line #3834

[terra-search-field] Update search field focus indicator to standard dashed line #3834

trandrew1023 commented Jun 30, 2023 •

edited

Loading

cm9361 Jul 7, 2023 •

edited

Loading

trandrew1023 Jul 12, 2023

cm9361 Jul 7, 2023 •

edited

Loading

trandrew1023 Jul 12, 2023

sdadn Jul 7, 2023

trandrew1023 Jul 7, 2023

sdadn Jul 13, 2023

trandrew1023 Jul 13, 2023

sdadn Jul 13, 2023

trandrew1023 Jul 13, 2023 •

edited

Loading

supreethmr Jul 24, 2023

trandrew1023 Jul 25, 2023

eawww left a comment

		outline: var(--terra-search-field-focus-keyboard-outline, 2px dashed #000);
		outline-offset: var(--terra-search-field-focus-keyboard-outline-offset, 1px);

	* Updated focus indicators to standard dashed line.
	* Updated focus indicators to be a standard dashed line.

		--terra-search-field-input-focus-keyboard-outline: none;
		--terra-search-input-field-focus-keyboard-outline-offset: none;

[terra-search-field] Update search field focus indicator to standard dashed line #3834

[terra-search-field] Update search field focus indicator to standard dashed line #3834

Conversation

trandrew1023 commented Jun 30, 2023 • edited Loading

Summary

Testing

Reviews

Additional Details

cm9361 Jul 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cm9361 Jul 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

trandrew1023 Jul 13, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eawww left a comment

Choose a reason for hiding this comment

trandrew1023 commented Jun 30, 2023 •

edited

Loading

cm9361 Jul 7, 2023 •

edited

Loading

cm9361 Jul 7, 2023 •

edited

Loading

trandrew1023 Jul 13, 2023 •

edited

Loading