fix: lang selector keyboard accessibility (#2927)

EmmaDawsonDev · ovflowd · web-flow · commit 6dbdad2fcfd3 · 2022-10-17T09:18:52.000Z
Co-authored-by: Claudio Wunder &lt;cwunder@gnome.org&gt;
diff --git a/src/components/CommonComponents/Dropdown/index.tsx b/src/components/CommonComponents/Dropdown/index.tsx
@@ -24,12 +24,18 @@ const Dropdown = <T extends HTMLElement>({
       fontWeight: (item.active ? 'bold' : 'normal') as 'bold' | 'normal',
     };
 
+    const handleKeyPress = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        item.onClick();
+      }
+    };
+
     return (
       <li key={`dropdown-item-${item.label}`}>
         <button
           style={extraStyles}
           onClick={item.onClick}
-          onKeyDown={item.onClick}
+          onKeyDown={handleKeyPress}
           type="button"
         >
           {item.title}
diff --git a/src/components/CommonComponents/LanguageSelector/__tests__/__snapshots__/LanguageSelector.test.tsx.snap b/src/components/CommonComponents/LanguageSelector/__tests__/__snapshots__/LanguageSelector.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`LanguageSelector component renders correctly 1`] = `
 <div>
   <button
+    aria-expanded="false"
     class="languageSwitch"
     type="button"
   >
diff --git a/src/components/CommonComponents/LanguageSelector/index.tsx b/src/components/CommonComponents/LanguageSelector/index.tsx
@@ -21,6 +21,7 @@ const LanguageSelector = () => {
         className={styles.languageSwitch}
         ref={languageButtonRef}
         onClick={() => showDropdown(!visible)}
+        aria-expanded={visible}
       >
         <span className="sr-only">Switch Language</span>
         <TranslateIcon />
diff --git a/src/layouts/__tests__/__snapshots__/index.test.tsx.snap b/src/layouts/__tests__/__snapshots__/index.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`Layout component renders correctly with data 1`] = `
             </li>
             <li>
               <button
+                aria-expanded="false"
                 class="languageSwitch"
                 type="button"
               >
diff --git a/src/layouts/__tests__/__snapshots__/page.test.tsx.snap b/src/layouts/__tests__/__snapshots__/page.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
             </li>
             <li>
               <button
+                aria-expanded="false"
                 class="languageSwitch"
                 type="button"
               >
diff --git a/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap b/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`Resources page renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-expanded="false"
                 class="languageSwitch"
                 type="button"
               >
diff --git a/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap b/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`Download page renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-expanded="false"
                 class="languageSwitch"
                 type="button"
               >
@@ -1144,6 +1145,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
             </li>
             <li>
               <button
+                aria-expanded="false"
                 class="languageSwitch"
                 type="button"
               >
diff --git a/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap b/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`Package Manager Page renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-expanded="false"
                 class="languageSwitch"
                 type="button"
               >
diff --git a/src/sections/Header/__tests__/__snapshots__/index.test.tsx.snap b/src/sections/Header/__tests__/__snapshots__/index.test.tsx.snap
@@ -155,6 +155,7 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
           </li>
           <li>
             <button
+              aria-expanded="false"
               class="languageSwitch"
               type="button"
             >
@@ -389,6 +390,7 @@ exports[`Tests for Header component renders correctly 1`] = `
           </li>
           <li>
             <button
+              aria-expanded="false"
               class="languageSwitch"
               type="button"
             >
@@ -623,6 +625,7 @@ exports[`Tests for Header component renders shorter menu items for mobile 1`] =
           </li>
           <li>
             <button
+              aria-expanded="false"
               class="languageSwitch"
               type="button"
             >
diff --git a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`Learn Template renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-expanded="false"
                 class="languageSwitch"
                 type="button"
               >
diff --git a/src/templates/__tests__/__snapshots__/post.test.tsx.snap b/src/templates/__tests__/__snapshots__/post.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`LearnLayout Template renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-expanded="false"
                 class="languageSwitch"
                 type="button"
               >

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	exports[`LanguageSelector component renders correctly 1`] = `
`4`	`4`	`<div>`
`5`	`5`	`<button`
	`6`	`+ aria-expanded="false"`
`6`	`7`	`class="languageSwitch"`
`7`	`8`	`type="button"`
`8`	`9`	`>`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@ const LanguageSelector = () => {`
`21`	`21`	`className={styles.languageSwitch}`
`22`	`22`	`ref={languageButtonRef}`
`23`	`23`	`onClick={() => showDropdown(!visible)}`
	`24`	`+ aria-expanded={visible}`
`24`	`25`	`>`
`25`	`26`	`<span className="sr-only">Switch Language</span>`
`26`	`27`	`<TranslateIcon />`
Original file line number	Diff line number	Diff line change
@@ -158,6 +158,7 @@ exports[`Layout component renders correctly with data 1`] = `
`158`	`158`	`</li>`
`159`	`159`	`<li>`
`160`	`160`	`<button`
	`161`	`+ aria-expanded="false"`
`161`	`162`	`class="languageSwitch"`
`162`	`163`	`type="button"`
`163`	`164`	`>`
Original file line number	Diff line number	Diff line change
@@ -158,6 +158,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
`158`	`158`	`</li>`
`159`	`159`	`<li>`
`160`	`160`	`<button`
	`161`	`+ aria-expanded="false"`
`161`	`162`	`class="languageSwitch"`
`162`	`163`	`type="button"`
`163`	`164`	`>`
Original file line number	Diff line number	Diff line change
@@ -158,6 +158,7 @@ exports[`Resources page renders correctly 1`] = `
`158`	`158`	`</li>`
`159`	`159`	`<li>`
`160`	`160`	`<button`
	`161`	`+ aria-expanded="false"`
`161`	`162`	`class="languageSwitch"`
`162`	`163`	`type="button"`
`163`	`164`	`>`
Original file line number	Diff line number	Diff line change
@@ -158,6 +158,7 @@ exports[`Package Manager Page renders correctly 1`] = `
`158`	`158`	`</li>`
`159`	`159`	`<li>`
`160`	`160`	`<button`
	`161`	`+ aria-expanded="false"`
`161`	`162`	`class="languageSwitch"`
`162`	`163`	`type="button"`
`163`	`164`	`>`
Original file line number	Diff line number	Diff line change
@@ -158,6 +158,7 @@ exports[`Learn Template renders correctly 1`] = `
`158`	`158`	`</li>`
`159`	`159`	`<li>`
`160`	`160`	`<button`
	`161`	`+ aria-expanded="false"`
`161`	`162`	`class="languageSwitch"`
`162`	`163`	`type="button"`
`163`	`164`	`>`