Updates strong tag for screen reader optimization (#33318)

department-of-veterans-affairs · Dec 9, 2024 · f9ff7b9 · f9ff7b9
1 parent d1e2169
commit f9ff7b9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/applications/sign-in-changes/components/AccountSwitch.jsx b/src/applications/sign-in-changes/components/AccountSwitch.jsx
@@ -23,13 +23,14 @@ export default function AccountSwitch({ userEmails }) {
   const userHasIdme = userEmails.idme;
   const userHasLogingov = userEmails.logingov;
   const userHasBoth = userHasIdme && userHasLogingov;
-  const headingText = userHasLogingov ? 'Login.gov' : 'ID.me';
+  const cspText = userHasLogingov ? 'Login.gov' : 'ID.me';
+  const headingText = `Start using your ${
+    userHasBoth ? 'Login.gov or ID.me' : cspText
+  } account now`;
   return (
     <div>
       <h2 className="vads-u-margin-y--0" id="accountSwitchH2">
-        Start using your{' '}
-        <strong>{userHasBoth ? 'Login.gov or ID.me' : headingText}</strong>{' '}
-        account now
+        {headingText}
       </h2>
       {userHasLogingov && (
         <CspDisplay

diff --git a/src/applications/sign-in-changes/containers/InterstitialChanges.jsx b/src/applications/sign-in-changes/containers/InterstitialChanges.jsx
@@ -66,8 +66,8 @@ export default function InterstitialChanges() {
       )}
       <h2 id="interstitialH2">Or continue using your old account</h2>
       <p className="vads-u-font-size--base" id="interstitialMhvP">
-        You’ll can use your <strong>My HealtheVet</strong> account to sign in
-        until <strong>January 31, 2025</strong>.
+        You can use your <strong>My HealtheVet</strong> account to sign in until{' '}
+        <strong>January 31, 2025</strong>.
       </p>
       <VaLink
         text="Continue with your My HealtheVet account for now"

diff --git a/src/applications/sign-in-changes/tests/AccountSwitch.unit.spec.jsx b/src/applications/sign-in-changes/tests/AccountSwitch.unit.spec.jsx
@@ -57,7 +57,7 @@ describe('AccountSwitch', () => {
     expect(screen.getAllByRole('button').length).to.eql(2);
     expect(
       screen.getByText((content, element) => {
-        const hasText = /Start using your account now/i.test(content);
+        const hasText = /Start using your/i.test(content);
         const isHeading = element.tagName.toLowerCase() === 'h2';
         return hasText && isHeading;
       }),