Merge pull request #392 from cagov/kat/389_tab_to_lang

Make the language switcher tab navigable
cagov · Aug 18, 2021 · bc8ef46 · bc8ef46
2 parents fa8b972 + 9df158b
commit bc8ef46
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
@@ -12,11 +12,14 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({ userArrivedF
   const router = useRouter()
 
   const queryString = userArrivedFromUioMobile ? { from: 'uiom' } : {}
+  // The Next Link will add the href value to the final <a> tag
+  /* eslint-disable jsx-a11y/anchor-is-valid */
   return (
     <div className="language-switcher">
       <Link href={{ pathname: '/', query: queryString }} locale={router.locale === 'en' ? 'es' : 'en'}>
-        <span className="text">{t('change-locale')}</span>
+        <a className="text">{t('change-locale')}</a>
       </Link>
     </div>
   )
+  /* eslint-enable jsx-a11y/anchor-is-valid */
 }
diff --git a/tests/pages/__snapshots__/index.test.tsx.snap b/tests/pages/__snapshots__/index.test.tsx.snap
@@ -155,13 +155,14 @@ exports[`Full page snapshot renders homepage unchanged 1`] = `
       <div
         className="language-switcher"
       >
-        <span
+        <a
           className="text"
+          href="/"
           onClick={[Function]}
           onMouseEnter={[Function]}
         >
           En español
-        </span>
+        </a>
       </div>
       <div
         className="claim-section"