[terra-search-field] Update search field focus indicator to standard …

…dashed line (#3834)

README.md

@@ -162,7 +162,7 @@ Please review [Terra\'s Internationalization documentation](https://engineering.
   Contributing
 </h2>
 
-Please read through our [contributing guidelines](CONTRIBUTING.md). Included are directions for issue reporting and pull requests.
+Please read through our [contributing guidelines](./CONTRIBUTING.md). Included are directions for issue reporting and pull requests.
 
 <h2 id="local-development">
   Local Development

packages/terra-search-field/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated focus indicators to be a standard dashed line.
+
 ## 3.83.0 - (June 14, 2023)
 
 * Fixed

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

@@ -11,6 +11,11 @@
     vertical-align: middle;
     width: var(--terra-search-field-max-width, 16.5rem);
 
+    *:focus {
+      outline: var(--terra-search-field-focus-keyboard-outline, 2px dashed #000);
+      outline-offset: var(--terra-search-field-focus-keyboard-outline-offset, 1px);
+    }
+
     .input-group {
       display: inline-flex;
       flex: 1 1 auto;
@@ -23,12 +28,12 @@
     .input::-ms-reveal {
       display: none;
     }
-  
+
     .input::-webkit-search-cancel-button {
       // Remove webkit search clear functionality
       display: none;
     }
-  
+
     .input::-webkit-search-decoration {
       // Get rid of extra left-padding getting added in Safari for search fields
       appearance: none;
@@ -47,7 +52,8 @@
       }
 
       &:focus {
-        border-color: var(--terra-search-field-button-focus-border-color, #26a2e5);
+        border-color: var(--terra-search-field-button-focus-border-color, transparent);
+        box-shadow: var(--terra-search-field-button-focus-box-shadow, none);
         z-index: 1;
       }
     }
@@ -77,9 +83,8 @@
       margin-top: var(--terra-search-field-button-margin-top, 0);
 
       &:focus {
-        border-color: var(--terra-search-field-button-focus-border-color, #26a2e5);
-        box-shadow: var(--terra-search-field-button-focus-box-shadow, 0 0 1px 3px rgba(76, 178, 233, 0.5), 0 0 7px 4px rgba(76, 178, 233, 0.35));
-        outline: none;
+        border-color: var(--terra-search-field-button-focus-border-color, transparent);
+        box-shadow: var(--terra-search-field-button-focus-box-shadow, none);
         z-index: 1;
       }
     }
@@ -153,18 +158,9 @@
     &:focus {
       background-color: var(--terra-search-field-input-focus-background-color, #fff);
       background-size: auto;
-      border: var(--terra-search-field-input-focus-border, 1px solid #4cb2e9);
-      box-shadow: var(--terra-search-field-input-focus-box-shadow);
+      border: var(--terra-search-field-input-focus-border, 1px solid #dedfe0);
+      box-shadow: var(--terra-search-field-input-focus-box-shadow, none);
       color: var(--terra-search-field-input-focus-color);
-      outline: none;
-
-      [dir=ltr] & {
-        box-shadow: var(--terra-search-field-input-focus-ltr-box-shadow);
-      }
-
-      [dir=rtl] & {
-        box-shadow: var(--terra-search-field-input-focus-rtl-box-shadow);
-      }
     }
   }
 }

packages/terra-search-field/src/clinical-lowlight-theme/SearchField.module.scss

@@ -11,7 +11,6 @@
     --terra-search-field-input-margin-top: 0;
     --terra-search-field-input-padding-right: 2.28571rem;
     --terra-search-field-clear-active-background-color: #0c0d0e;
-    --terra-search-field-button-focus-border-color: #004c76;
     --terra-search-field-clear-icon-height: 1.14286rem;
     --terra-search-field-clear-icon-margin-top: -0.214285rem;
     --terra-search-field-clear-icon-width: 1.14286rem;
@@ -24,7 +23,6 @@
     --terra-search-field-button-margin-left: -1px;
     --terra-search-field-button-margin-right: 0;
     --terra-search-field-button-margin-top: 0;
-    --terra-search-field-button-focus-box-shadow: #004c76;
 
     --terra-search-field-input-background-color: #222a2e;
     --terra-search-field-input-border: 1px solid #181b1d;
@@ -51,13 +49,16 @@
     --terra-search-field-input-placeholder-disabled-font-style: italic;
 
     --terra-search-field-input-focus-background-color: #222a2e;
-    --terra-search-field-input-focus-border: 1px solid #004c76;
-    --terra-search-field-input-focus-box-shadow: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
+    --terra-search-field-input-focus-border: 1px solid #181b1d;
     --terra-search-field-input-focus-color: #b2b5b6;
 
     --terra-search-field-input-focus-ltr-box-shadow: none;
     --terra-search-field-input-focus-rtl-box-shadow: none;
 
+    // focus - keyboard
+    --terra-search-field-focus-keyboard-outline: 2px dashed #b2b5b6;
+    --terra-search-field-focus-keyboard-outline-offset: 1px;
+
     @include terra-inline-svg-var('--terra-search-field-clear-icon-background-image', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#b2b5b6" d="M24 0C10.7 0 0 10.7 0 24s10.7 24 24 24 24-10.7 24-24S37.3 0 24 0zm13.9 33.8l-2.1 2.1-1.2 1.2-1 .9-9.6-9.7-9.6 9.7-2.2-2.1-1.1-1.1-1-1 9.7-9.8-9.7-9.8 1-1 1.1-1.1 2.2-2.1 9.6 9.7 9.6-9.7 1 .9 1.2 1.2 2.1 2.1-9.7 9.8 9.7 9.8z"/></svg>');
   }
 }

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

@@ -12,6 +12,8 @@
     --terra-search-field-input-padding-right: 2.28571rem;
     --terra-search-field-clear-active-background-color: transparent;
     --terra-search-field-button-focus-border-color: #26a2e5;
+    --terra-search-field-focus-keyboard-outline: none;
+    --terra-search-field-focus-keyboard-outline-offset: none;
     --terra-search-field-clear-icon-height: 1.14286rem;
     --terra-search-field-clear-icon-margin-top: -0.214285rem;
     --terra-search-field-clear-icon-width: 1.14286rem;
@@ -52,12 +54,9 @@
 
     --terra-search-field-input-focus-background-color: #fff;
     --terra-search-field-input-focus-border: 1px solid #4cb2e9;
-    --terra-search-field-input-focus-box-shadow: 0 0 8px #a6d9f4;
+    --terra-search-field-input-focus-box-shadow: inset 0 3rem 1.5rem -2rem #f4f4f4, 0 0 1px 1px rgba(255, 255, 255, 0.65), 0 0 2px 3px rgba(76, 178, 233, 0.5), 0 0 6px 4px rgba(76, 178, 233, 0.3);
     --terra-search-field-input-focus-color: #1c1f21;
 
-    --terra-search-field-input-focus-ltr-box-shadow: 0 0 8px #a6d9f4;
-    --terra-search-field-input-focus-rtl-box-shadow: 0 0 8px #a6d9f4;
-
     @include terra-inline-svg-var('--terra-search-field-clear-icon-background-image', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#909496" d="M24 0C10.7 0 0 10.7 0 24s10.7 24 24 24 24-10.7 24-24S37.3 0 24 0zm13.9 33.8l-2.1 2.1-1.2 1.2-1 .9-9.6-9.7-9.6 9.7-2.2-2.1-1.1-1.1-1-1 9.7-9.8-9.7-9.8 1-1 1.1-1.1 2.2-2.1 9.6 9.7 9.6-9.7 1 .9 1.2 1.2 2.1 2.1-9.7 9.8 9.7 9.8z"/></svg>');
   }
 }

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

@@ -21,6 +21,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with scrolled text', () => {
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('default scrolled text', { mismatchTolerance: 0.1 });
     });
   });
@@ -37,6 +38,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with text', () => {
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('block with text');
     });
   });
@@ -69,6 +71,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with text', () => {
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('placeholder with text');
     });
   });
@@ -90,6 +93,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     it('should clear the value', () => {
       $('#searchfield [data-terra-search-field-button="Clear"]').click();
 
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('default value clear');
     });
 
@@ -98,6 +102,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with overwritten text', () => {
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('default value with overwritten text');
     });
   });
@@ -119,6 +124,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with unchanged text', () => {
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('value unchanged text');
     });
   });
@@ -131,7 +137,8 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with too short text', () => {
-      Terra.validates.element('minimum length too short text');
+      // mismatchTolerance set to 0.1 to account for subtle variances in the dotted line
+      Terra.validates.element('minimum length too short text', { mismatchTolerance: 0.1 });
     });
 
     it('should not search with the button', () => {
@@ -149,7 +156,9 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with long enough text', () => {
-      Terra.validates.element('minimum length with long enough text');
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
+      // mismatchTolerance set to 0.1 to account for subtle variances in the dotted line
+      Terra.validates.element('minimum length with long enough text', { mismatchTolerance: 0.1 });
     });
   });
 
@@ -165,6 +174,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with long enough text', () => {
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('callback with long enough text');
     });
 
@@ -174,7 +184,9 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with too short text', () => {
-      Terra.validates.element('callback with too short text');
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
+      // mismatchTolerance set to 0.1 to account for subtle variances in the dotted line
+      Terra.validates.element('callback with too short text', { mismatchTolerance: 0.1 });
     });
   });
 
@@ -190,7 +202,9 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field with typed text', () => {
-      Terra.validates.element('setting value typed');
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
+      // mismatchTolerance set to 0.1 to account for subtle variances in the dotted line
+      Terra.validates.element('setting value typed', { mismatchTolerance: 0.1 });
     });
 
     it('should trigger search when cutting', () => {
@@ -201,6 +215,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field after cut operation', () => {
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('setting value cut');
     });
 
@@ -210,6 +225,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     });
 
     it('should display Search Field after paste operation', () => {
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('setting value paste');
     });
 
@@ -218,12 +234,14 @@ Terra.describeViewports('Search Field', ['medium'], () => {
       $('#searchfield').click();
       browser.pause(2000);
 
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('setting value programmatically');
     });
 
     it('should search with value on search button press', () => {
       $('#searchfield > [data-terra-search-field-button="Search"]').click();
 
+      expect($('button[data-terra-search-field-button="Search"]').isFocused()).toBeTruthy();
       Terra.validates.element('setting value search');
     });
   });
@@ -234,12 +252,14 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     it('should enter a letter', () => {
       $('input').setValue('L');
 
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('on change updated once');
     });
 
     it('should enter another letter', () => {
       $('input').addValue('o');
 
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('on change updated twice');
     });
   });
@@ -251,6 +271,7 @@ Terra.describeViewports('Search Field', ['medium'], () => {
       $('input').click();
       browser.keys('Enter');
 
+      expect($('button[data-terra-search-field-button="Search"]').isFocused()).toBeTruthy();
       Terra.validates.element('search with enter default');
     });
   });
@@ -261,19 +282,23 @@ Terra.describeViewports('Search Field', ['medium'], () => {
     it('should enter a search term', () => {
       $('input').setValue('Lore');
 
-      Terra.validates.element('auto search disabled text before search');
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
+      // mismatchTolerance set to 0.1 to account for subtle variances in the dotted line
+      Terra.validates.element('auto search disabled text before search', { mismatchTolerance: 0.1 });
     });
 
     it('should search with the button', () => {
       browser.keys('Enter');
 
+      expect($('button[data-terra-search-field-button="Search"]').isFocused()).toBeTruthy();
       Terra.validates.element('auto search disabled searched text');
     });
 
     it('should search using enter', () => {
       $('input').addValue(' is spelled correctly');
       browser.keys('Enter');
 
+      expect($('button[data-terra-search-field-button="Search"]').isFocused()).toBeTruthy();
       Terra.validates.element('auto search disabled extended search');
     });
   });
@@ -289,10 +314,25 @@ Terra.describeViewports('Search Field', ['medium'], () => {
       $('#search-field-focus-button').waitForDisplayed();
       $('#search-field-focus-button').click();
 
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
       Terra.validates.element('focus with focus');
     });
   });
 
+  describe('Clear Button in Focus', () => {
+    before(() => browser.url('/raw/tests/cerner-terra-core-docs/search-field/minimum-length-search-field'));
+
+    it('should enter a search term', () => {
+      $('input').setValue('Lore');
+      browser.keys(['Tab']);
+    });
+
+    it('should focus clear button', () => {
+      expect($('button[data-terra-search-field-button="Clear"]').isFocused()).toBeTruthy();
+      Terra.validates.element('clear button focused');
+    });
+  });
+
   describe('Delayed Search Field', () => {
     before(() => browser.url('/raw/tests/cerner-terra-core-docs/search-field/delayed-search-field'));
 
@@ -304,7 +344,9 @@ Terra.describeViewports('Search Field', ['medium'], () => {
       setTimeout(() => { input.addValue('L'); }, 250);
       setTimeout(() => { input.addValue('L'); }, 250);
 
-      Terra.validates.element('empty search text');
+      expect($('input[type="search"]').isFocused()).toBeTruthy();
+      // mismatchTolerance set to 0.1 to account for subtle variances in the dotted line
+      Terra.validates.element('empty search text', { mismatchTolerance: 0.1 });
     });
   });
 });