Repository: nodejs/nodejs.dev
Pull request #2927 (2022-10-15 13:56:36)

fix: lang selector keyboard accessibility
<!--
Please read the [Code of Conduct](https://github.com/nodejs/nodejs.dev/blob/main/CODE_OF_CONDUCT.md) and the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) before opening a pull request.
-->

## Description

The new language selector dropdown had a small bug in that if you tabbed through the selections with the keyboard it would automatically change the language to French as you tabbed away from the dropdown. This is not the expected behaviour.

I added a check to the event to make sure only `space` and `enter` keys could trigger a language change.

I also added an aria-expanded attribute to the button so that screen reader users are made aware that the button has a popup and whether it is open or closed.

## Related Issues

<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->

### Check List

<!--
ATTENTION
Please follow this check list to ensure that you've followed all items before opening this PR
-->

- [x] I have read the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) and made commit messages that follow the guideline.
- [x] I have run `npm run lint:js -- --fix` and/or `npm run lint:md -- --fix` for my JavaScript and/or Markdown changes.
  - This is important as most of the cases your code changes might not be correctly linted
- [x] I have run `npm run test` to check if all tests are passing, and/or `npm run test -- -u` to update snapshots if I created and/or updated React Components.
- [x] I have checked that the build works locally and that `npm run build` work fine.
- [ ] I've covered new added functionality with unit tests if necessary.


codecov-commenter: # [Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) Report
Base: **66.02**% // Head: **66.99**% // Increases project coverage by **`+0.96%`** :tada:
> Coverage data is based on head [(`dadc0b0`)](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) compared to base [(`fd57b87`)](https://codecov.io/gh/nodejs/nodejs.dev/commit/fd57b871c2b1ad2f6fb812ed066dec074d76db22?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).
> Patch has no changes to coverable lines.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##             main    #2927      +/-   ##
==========================================
+ Coverage   66.02%   66.99%   +0.96%     
==========================================
  Files         118      136      +18     
  Lines        1351     1533     +182     
  Branches      342      358      +16     
==========================================
+ Hits          892     1027     +135     
- Misses        422      464      +42     
- Partials       37       42       +5     
```


| [Impacted Files](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | Coverage Δ | |
|---|---|---|
| [src/\_\_fixtures\_\_/hooks.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL19fZml4dHVyZXNfXy9ob29rcy50c3g=) | `100.00% <ø> (ø)` | |
| [src/\_\_fixtures\_\_/page.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL19fZml4dHVyZXNfXy9wYWdlLnRzeA==) | `94.11% <ø> (-5.89%)` | :arrow_down: |
| [...components/ApiComponents/Components/ApiHeading.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9Db21wb25lbnRzL0FwaUhlYWRpbmcudHN4) | `100.00% <ø> (+100.00%)` | :arrow_up: |
| [...rc/components/ApiComponents/Components/ApiLink.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9Db21wb25lbnRzL0FwaUxpbmsudHN4) | `100.00% <ø> (+100.00%)` | :arrow_up: |
| [...ents/ApiComponents/Components/SourceLink/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9Db21wb25lbnRzL1NvdXJjZUxpbmsvaW5kZXgudHN4) | `50.00% <ø> (+50.00%)` | :arrow_up: |
| [...ApiComponents/Components/VersionSelector/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9Db21wb25lbnRzL1ZlcnNpb25TZWxlY3Rvci9pbmRleC50c3g=) | `100.00% <ø> (+100.00%)` | :arrow_up: |
| [src/components/ApiComponents/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXBpQ29tcG9uZW50cy9pbmRleC50c3g=) | `100.00% <ø> (+100.00%)` | :arrow_up: |
| [src/components/ArticleComponents/Alert/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXJ0aWNsZUNvbXBvbmVudHMvQWxlcnQvaW5kZXgudHN4) | `100.00% <ø> (ø)` | |
| [...ents/ArticleComponents/AuthorList/Author/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXJ0aWNsZUNvbXBvbmVudHMvQXV0aG9yTGlzdC9BdXRob3IvaW5kZXgudHN4) | `88.88% <ø> (ø)` | |
| [.../components/ArticleComponents/AuthorList/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXJ0aWNsZUNvbXBvbmVudHMvQXV0aG9yTGlzdC9pbmRleC50c3g=) | `100.00% <ø> (ø)` | |
| ... and [171 more](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/2927?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None).


Patch:
diff --git a/src/components/CommonComponents/Dropdown/index.tsx b/src/components/CommonComponents/Dropdown/index.tsx
index 8a3415f4..b225dce8 100644
--- 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/index.tsx b/src/components/CommonComponents/LanguageSelector/index.tsx
index e25229e1..cc05846e 100644
--- 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 />


Test patch:
diff --git a/src/components/CommonComponents/LanguageSelector/__tests__/__snapshots__/LanguageSelector.test.tsx.snap b/src/components/CommonComponents/LanguageSelector/__tests__/__snapshots__/LanguageSelector.test.tsx.snap
index e917f945..6f5c4615 100644
--- 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/layouts/__tests__/__snapshots__/index.test.tsx.snap b/src/layouts/__tests__/__snapshots__/index.test.tsx.snap
index 0f2c8e05..ee673c9b 100644
--- 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
index c34449df..333af6b1 100644
--- 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
index a7ec5046..ac3fbd08 100644
--- 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
index 69823bdb..08b7e8dc 100644
--- 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
index e3a546ca..d1cab208 100644
--- 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
index 27647103..c96e3f32 100644
--- 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
index ebeb43b1..57e42274 100644
--- 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
index acea9507..c8eeac56 100644
--- 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"
               >