Fixed focus box bug

package.json

@@ -120,6 +120,7 @@
     "webpack": "^5.28.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.3.1",
-    "webpack-merge": "^5.1.4"
+    "webpack-merge": "^5.1.4",
+    "wicg-inert": "3.1.1"
   }
 }

packages/terra-core-docs/CHANGELOG.md

@@ -5,6 +5,9 @@
 * Fixed
   * Updated broken links in terra-form-select and action-footer.
 
+* Changed
+  * Added test for programmatic focus of hyperlink.
+
 ## 1.13.6 - (May 3, 2022)
 
 * Changed

packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ProgrammaticFocus.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Button from 'terra-button';
+import Hyperlink from 'terra-hyperlink';
+
+export default () => (
+  <>
+    <Hyperlink id="link" href="https://www.cerner.com">Hyperlink</Hyperlink>
+    <br />
+    <br />
+    <Button
+      text="Button 1 (Press to focus Hyperlink)"
+      onClick={() => { document.getElementById('link').focus(); }}
+      id="button1"
+    />
+  </>
+);

packages/terra-hyperlink/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed focus box bug for hyperlink.
+
 ## 2.51.4 - (May 3, 2022)
 
 * Changed

packages/terra-hyperlink/src/Hyperlink.jsx

@@ -94,10 +94,17 @@ class Hyperlink extends React.Component {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleKeyUp = this.handleKeyUp.bind(this);
     this.handleOnBlur = this.handleOnBlur.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.linkRef = React.createRef();
+  }
+
+  handleMouseDown() {
+    this.linkRef.current.setAttribute('data-focus-styles-enabled', 'false');
   }
 
   handleOnBlur(event) {
     this.setState({ focused: false });
+    this.linkRef.current.setAttribute('data-focus-styles-enabled', 'true');
 
     if (this.props.onBlur) {
       this.props.onBlur(event);
@@ -179,11 +186,14 @@ class Hyperlink extends React.Component {
         onKeyDown={this.handleKeyDown}
         onKeyUp={this.handleKeyUp}
         onBlur={this.handleOnBlur}
+        onMouseDown={this.handleMouseDown}
         onClick={onClick}
         onFocus={onFocus}
         href={isDisabled ? null : href}
         target={target}
         rel={rel}
+        data-focus-styles-enabled
+        ref={this.linkRef}
       >
         {children}
         {getHyperlinkIcon(variant)}

packages/terra-hyperlink/src/Hyperlink.module.scss

@@ -29,7 +29,8 @@
       }
     }
 
-    &.is-focused {
+    &.is-focused,
+    &[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));

packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap

@@ -16,10 +16,12 @@ exports[`Hyperlink correctly applies the theme context className 1`] = `
     <a
       aria-disabled={false}
       className="hyperlink default orion-fusion-theme"
+      data-focus-styles-enabled={true}
       href="https://www.cerner.com"
       onBlur={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
+      onMouseDown={[Function]}
     >
       Default hyperlink
     </a>
@@ -31,6 +33,7 @@ exports[`Hyperlink should render a audio hyperlink 1`] = `
 <a
   aria-disabled="false"
   class="hyperlink audio"
+  data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
   Audio hyperlink
@@ -58,6 +61,7 @@ exports[`Hyperlink should render a default hyperlink 1`] = `
 <a
   aria-disabled="false"
   class="hyperlink default"
+  data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
   Default hyperlink
@@ -68,6 +72,7 @@ exports[`Hyperlink should render a disabled hyperlink 1`] = `
 <span
   aria-disabled="true"
   class="hyperlink default is-disabled"
+  data-focus-styles-enabled="true"
 >
   Disabled hyperlink
 </span>
@@ -77,6 +82,7 @@ exports[`Hyperlink should render a document hyperlink 1`] = `
 <a
   aria-disabled="false"
   class="hyperlink document"
+  data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
   Document hyperlink
@@ -105,6 +111,7 @@ exports[`Hyperlink should render a external hyperlink 1`] = `
 <a
   aria-disabled="false"
   class="hyperlink external"
+  data-focus-styles-enabled="true"
   href="https://www.cerner.com"
   rel="noopener noreferrer"
   target="_blank"
@@ -134,6 +141,7 @@ exports[`Hyperlink should render a image hyperlink 1`] = `
 <a
   aria-disabled="false"
   class="hyperlink image"
+  data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
   Image hyperlink
@@ -161,6 +169,7 @@ exports[`Hyperlink should render a underline hidden hyperlink 1`] = `
 <a
   aria-disabled="false"
   class="hyperlink default is-underline-hidden"
+  data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
   Underline hidden hyperlink
@@ -171,6 +180,7 @@ exports[`Hyperlink should render a video hyperlink 1`] = `
 <a
   aria-disabled="false"
   class="hyperlink video"
+  data-focus-styles-enabled="true"
   href="https://www.cerner.com"
 >
   Video hyperlink
@@ -198,6 +208,7 @@ exports[`Hyperlink should render with custom props 1`] = `
 <a
   aria-disabled="false"
   class="hyperlink default"
+  data-focus-styles-enabled="true"
   href="https://www.cerner.com"
   rel="nofollow"
   target="_self"
@@ -210,6 +221,7 @@ exports[`Hyperlink should render with custom props with external variant 1`] = `
 <a
   aria-disabled="false"
   class="hyperlink external"
+  data-focus-styles-enabled="true"
   href="https://www.cerner.com"
   rel="external"
   target="_parent"

packages/terra-hyperlink/tests/wdio/hyperlink-spec.js

@@ -65,4 +65,11 @@ Terra.describeViewports('Hyperlink', ['tiny'], () => {
 
     Terra.validates.element('hidden underline');
   });
+
+  it('should display programmatic focus on hyperlink', () => {
+    browser.url('/raw/tests/cerner-terra-core-docs/hyperlink/programmatic-focus');
+    $('#button1').click();
+
+    Terra.validates.element('focused hyperlink');
+  });
 });