Remove tabindex and replace va-links (#33477)

* Remove tabindex and replace va-links * Fix unit tests * Refactoring code climate suggestion
department-of-veterans-affairs · Dec 11, 2024 · 9bd610b · 9bd610b
1 parent 2fb08c3
commit 9bd610b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git a/src/applications/discover-your-benefits/components/BenefitCard.jsx b/src/applications/discover-your-benefits/components/BenefitCard.jsx
@@ -10,9 +10,28 @@ const BenefitCard = ({ benefit }) => {
     learnMoreURL,
     applyNowURL,
   } = benefit;
+
+  const renderLink = (url, text, label) => {
+    if (url) {
+      return (
+        <a
+          href={url}
+          rel="noreferrer"
+          className="link--center"
+          aria-label={label}
+          target="_blank"
+        >
+          {text} (opens in a new tab)
+          <span className="usa-sr-only">opens in a new tab</span>
+        </a>
+      );
+    }
+    return null;
+  };
+
   return (
     <div className="benefit-card vads-u-margin-bottom--2">
-      <va-card tabIndex="0">
+      <va-card>
         <>
           {isTimeSensitive && (
             <div className="blue-heading">
@@ -31,26 +50,10 @@ const BenefitCard = ({ benefit }) => {
         <p className="vads-u-margin-y--0">{description}</p>
         <div>
           <div className="vads-u-display--inline-block vads-u-margin-right--2">
-            {learnMoreURL && (
-              <va-link
-                href={learnMoreURL}
-                external
-                text="Learn more"
-                type="secondary"
-                label={`Learn more about ${name}`}
-              />
-            )}
+            {renderLink(learnMoreURL, 'Learn more', `Learn more about ${name}`)}
           </div>
           <div className="vads-u-display--inline-block">
-            {applyNowURL && (
-              <va-link
-                href={applyNowURL}
-                external
-                text="Apply now"
-                type="secondary"
-                label={`Apply now for ${name}`}
-              />
-            )}
+            {renderLink(applyNowURL, 'Apply now', `Apply now for ${name}`)}
           </div>
         </div>
       </va-card>

diff --git a/src/applications/discover-your-benefits/tests/unit/components/BenefitCard.unit.spec.js b/src/applications/discover-your-benefits/tests/unit/components/BenefitCard.unit.spec.js
@@ -12,7 +12,7 @@ describe('<BenefitCard>', () => {
 
     expect(container.querySelector('h3')).to.contain.text(benefit.name);
     expect(container.querySelector('p')).to.have.text(benefit.description);
-    expect(container.querySelectorAll('va-link')).to.have.lengthOf(1);
+    expect(container.querySelectorAll('a')).to.have.lengthOf(1);
   });
 
   it('renders time sensitive benefit card', () => {
@@ -21,7 +21,7 @@ describe('<BenefitCard>', () => {
 
     expect(container.querySelector('h3')).to.contain.text(benefit.name);
     expect(container.querySelector('p')).to.have.text(benefit.description);
-    expect(container.querySelectorAll('va-link')).to.have.lengthOf(1);
+    expect(container.querySelectorAll('a')).to.have.lengthOf(1);
     expect(container.querySelector('div.blue-heading')).to.exist;
   });
 });