[terra-hyperlink] Fix focus indicator (#4076)

cerner · Mar 29, 2024 · b702696 · b702696
1 parent f819166
commit b702696
Show file tree

Hide file tree

Showing 28 changed files with 13 additions and 121 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/StatesHyperlink.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/StatesHyperlink.test.jsx
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/StatesHyperlinkButton.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/StatesHyperlinkButton.test.jsx
diff --git a/packages/terra-hyperlink/CHANGELOG.md b/packages/terra-hyperlink/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed focus indicator for default and lowlight themes.
+
 ## 2.68.0 - (March 27, 2024)
 
 * Changed

diff --git a/packages/terra-hyperlink/src/Hyperlink.module.scss b/packages/terra-hyperlink/src/Hyperlink.module.scss
@@ -39,8 +39,10 @@
     &[data-focus-styles-enabled='true']:focus {
       background-color: var(--terra-hyperlink-focus-background-color, transparent);
       border-radius: var(--terra-hyperlink-focus-border-radius, 0.2142rem);
-      box-shadow: var(--terra-hyperlink-focus-box-shadow, 0 0 0 1px #4cb2e9, 0 0 0 3px rgba(76, 178, 233, 0.25));
+      box-shadow: var(--terra-hyperlink-focus-box-shadow, none);
       color: var(--terra-hyperlink-focus-color, #001f67);
+      outline: var(--terra-hyperlink-focus-outline, 2px dashed #000);
+      outline-offset: var(--terra-hyperlink-focus-outline-offset, 1px);
       text-decoration: var(--terra-hyperlink-focus-text-decoration, underline);
     }
 

diff --git a/packages/terra-hyperlink/src/HyperlinkTestCommon.module.scss b/packages/terra-hyperlink/src/HyperlinkTestCommon.module.scss
@@ -6,26 +6,4 @@
   .hyperlink-states {
     padding: 0 10px;
   }
-
-  .is-visited {
-    color: var(--terra-hyperlink-visited-color, #006fc3);
-  }
-
-  .is-hovered {
-    background-color: var(--terra-hyperlink-hover-background-color);
-    color: var(--terra-hyperlink-hover-color, #001f67);
-    text-decoration: var(--terra-hyperlink-hover-text-decoration, underline);
-  }
-
-  .is-focused {
-    background-color: var(--terra-hyperlink-focus-background-color, transparent);
-    border-radius: var(--terra-hyperlink-focus-border-radius, 0.2142rem);
-    box-shadow: var(--terra-hyperlink-focus-box-shadow, 0 0 0 1px #4cb2e9, 0 0 0 3px rgba(76, 178, 233, 0.25));
-    color: var(--terra-hyperlink-focus-color, #001f67);
-    text-decoration: var(--terra-hyperlink-focus-text-decoration, underline);
-  }
-
-  .is-active {
-    color: var(--terra-hyperlink-active-color, #001f67);
-  }
 }
diff --git a/packages/terra-hyperlink/src/clinical-lowlight-theme/Hyperlink.module.scss b/packages/terra-hyperlink/src/clinical-lowlight-theme/Hyperlink.module.scss
@@ -9,7 +9,7 @@
     --terra-hyperlink-hover-text-decoration: underline;
     --terra-hyperlink-focus-background-color: transparent;
     --terra-hyperlink-focus-border-radius: 0.2142rem;
-    --terra-hyperlink-focus-box-shadow: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
+    --terra-hyperlink-focus-outline: 2px dashed #fff;
     --terra-hyperlink-focus-color: #007ee0;
     --terra-hyperlink-focus-text-decoration: underline;
     --terra-hyperlink-active-color: #007ee0;

diff --git a/packages/terra-hyperlink/src/orion-fusion-theme/Hyperlink.module.scss b/packages/terra-hyperlink/src/orion-fusion-theme/Hyperlink.module.scss
@@ -10,6 +10,7 @@
     --terra-hyperlink-focus-background-color: transparent;
     --terra-hyperlink-focus-border-radius: 3px;
     --terra-hyperlink-focus-box-shadow: 0 0 0 1px #4cb2e9, 0 0 0 3px rgba(76, 178, 233, 0.25);
+    --terra-hyperlink-focus-outline: none;
     --terra-hyperlink-focus-color: #004c76;
     --terra-hyperlink-focus-text-decoration: underline;
     --terra-hyperlink-active-color: #0065a3;

diff --git a/...s__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/default.png b/...s__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/default.png
diff --git a/...__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/disabled.png b/...__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/disabled.png
diff --git a/...nce/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png b/...nce/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png
diff --git a/...nical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png b/...nical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png
diff --git a/...ence/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png b/...ence/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png
diff --git a/...ts__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/states.png b/...ts__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/states.png
diff --git a/...napshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/audio.png b/...napshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/audio.png
diff --git a/...shots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/disabled.png b/...shots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/disabled.png
diff --git a/...shots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/document.png b/...shots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/document.png
diff --git a/...eference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png b/...eference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png
diff --git a/...e/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png b/...e/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png
diff --git a/...reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png b/...reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png
diff --git a/...eference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png b/...eference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png
diff --git a/...apshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/states.png b/...apshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/states.png
diff --git a/...hots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/disabled.png b/...hots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/disabled.png
diff --git a/...ference/terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png b/...ference/terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png
diff --git a/.../terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png b/.../terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png
diff --git a/...eference/terra-default-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png b/...eference/terra-default-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png
diff --git a/...pshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/states.png b/...pshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/states.png
diff --git a/packages/terra-hyperlink/tests/wdio/hyperlink-spec.js b/packages/terra-hyperlink/tests/wdio/hyperlink-spec.js
@@ -54,12 +54,6 @@ Terra.describeViewports('Hyperlink', ['tiny'], () => {
     Terra.validates.element('scaled');
   });
 
-  it('should display hyperlink states', () => {
-    browser.url('/raw/tests/cerner-terra-core-docs/hyperlink/states-hyperlink');
-
-    Terra.validates.element('states');
-  });
-
   it('should display Hyperlink with hidden underline', () => {
     browser.url('/raw/tests/cerner-terra-core-docs/hyperlink/underline-hidden-hyperlink');
 
@@ -80,12 +74,6 @@ Terra.describeViewports('Hyperlink', ['tiny'], () => {
     Terra.validates.element('focused hyperlink button');
   });
 
-  it('should render Hyperlink Button states when onClick is provided', () => {
-    browser.url('/raw/tests/cerner-terra-core-docs/hyperlink/states-hyperlink-button');
-
-    Terra.validates.element('hyperlink-button');
-  });
-
   it('should render Hyperlinks with ellipses when the context should overflow', () => {
     browser.url('/raw/tests/cerner-terra-core-docs/hyperlink/truncated-hyperlink');
     Terra.validates.element('truncated');