1455/language tabs a11y

CHANGELOG.md

@@ -38,6 +38,10 @@ All notable changes to this project will be documented in this file. The format
 
 ### UI Components
 
+- Fixed:
+
+  - Fix a11y language navigation ([#1528](https://github.com/bloom-housing/bloom/pull/1528)) (Dominik Barcikowski)
+
 - Added:
   - Preview (disabled) state for Listings Application button ([#1502](https://github.com/bloom-housing/bloom/pull/1502)) (Jared White)
   - Automated a11y testing for ui-components ([#1450](https://github.com/bloom-housing/bloom/pull/1450))

sites/public/cypress/integration/pages/application/review/confirmation.spec.ts

@@ -11,7 +11,7 @@ describe("applications/review/confirmation", function () {
   })
 
   it("Should redirect to create account page", function () {
-    cy.get("button").contains("Create Account").click()
+    cy.get("button.button").contains("Create Account").click()
     cy.location("pathname").should("include", "/create-account")
   })
 

ui-components/src/navigation/LanguageNav.scss

@@ -11,16 +11,22 @@
 
 .language-nav__list {
   @apply flex;
+}
+
+.language-nav__list-button {
+  @apply py-2;
+  @apply px-2;
+  @apply text-gray-500;
+  @apply font-semibold;
+  @apply cursor-pointer;
+  @apply bg-none;
 
-  li {
-    @apply py-2;
-    @apply px-2;
-    @apply text-gray-500;
-    @apply font-semibold;
-    @apply cursor-pointer;
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px $tailwind-accent-cool;
+  }
 
-    &.is-active {
-      @apply text-white;
-    }
+  &.is-active {
+    @apply text-white;
   }
 }

ui-components/src/navigation/LanguageNav.stories.tsx

@@ -9,15 +9,18 @@ export default {
 
 export const Default = () => (
   <LanguageNav
-    items={[
-      {
-        prefix: "",
-        label: "English",
-      },
-      {
-        prefix: "es",
-        label: "Spanish",
-      },
-    ]}
+    language={{
+      list: [
+        {
+          prefix: "",
+          label: "English",
+        },
+        {
+          prefix: "es",
+          label: "Spanish",
+        },
+      ],
+      codes: ["en", "es"],
+    }}
   />
 )

ui-components/src/navigation/LanguageNav.tsx

@@ -27,14 +27,20 @@ const LanguageNav = ({ language }: LanguageNavProps) => {
         <nav className="language-nav">
           <ul className="language-nav__list">
             {language.list?.map((item) => (
-              <li
-                key={item.prefix}
-                onClick={() => {
-                  void router.push(router.asPath, router.asPath, { locale: item.prefix || "en" })
-                }}
-                className={routePrefix === item.prefix ? "is-active" : ""}
-              >
-                {item.label}
+              <li key={item.prefix}>
+                <button
+                  onClick={() => {
+                    void router.push(router.asPath, router.asPath, { locale: item.prefix || "en" })
+                  }}
+                  className={
+                    routePrefix === item.prefix
+                      ? "language-nav__list-button is-active"
+                      : "language-nav__list-button"
+                  }
+                  type="button"
+                >
+                  {item.label}
+                </button>
               </li>
             ))}
           </ul>