Repository: nodejs/nodejs.dev
Pull request #2928 (2022-10-15 15:09:38)

Fix: download toggle button accessibility/translation support
<!--
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 second toggle button on the download page didn't have correct aria-checked or aria-label values due to a copy-paste mistake I am guessing. They are now updated to match the corresponding button. 

While I was there I added them to the translation files ready to be translated.

## 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/2928?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: **67.08**% // Increases project coverage by **`+1.05%`** :tada:
> Coverage data is based on head [(`74ec854`)](https://codecov.io/gh/nodejs/nodejs.dev/pull/2928?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    #2928      +/-   ##
==========================================
+ Coverage   66.02%   67.08%   +1.05%     
==========================================
  Files         118      136      +18     
  Lines        1351     1531     +180     
  Branches      342      357      +15     
==========================================
+ Hits          892     1027     +135     
- Misses        422      462      +40     
- Partials       37       42       +5     
```


| [Impacted Files](https://codecov.io/gh/nodejs/nodejs.dev/pull/2928?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/2928/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/2928/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/2928/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/2928/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/2928/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/2928/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/2928/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/2928/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/2928/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/2928/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/2928/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/2928?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/DownloadComponents/DownloadToggle/index.tsx b/src/components/DownloadComponents/DownloadToggle/index.tsx
index b233b2ec..7d138680 100644
--- a/src/components/DownloadComponents/DownloadToggle/index.tsx
+++ b/src/components/DownloadComponents/DownloadToggle/index.tsx
@@ -1,5 +1,9 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import {
+  FormattedMessage,
+  injectIntl,
+  WrappedComponentProps,
+} from 'react-intl';
 import classnames from 'classnames';
 import styles from './index.module.scss';
 
@@ -13,7 +17,8 @@ const DownloadToggle = ({
   handleClick,
   selected,
   showDescription = true,
-}: Props): JSX.Element => {
+  intl,
+}: Props & WrappedComponentProps): JSX.Element => {
   const activeClassNames = classnames({ [styles.active]: selected === 'LTS' });
   const currentClassNames = classnames(styles.current, {
     [styles.active]: selected === 'CURRENT',
@@ -30,7 +35,9 @@ const DownloadToggle = ({
             className={activeClassNames}
             type="button"
             role="switch"
-            aria-label="Show LTS versions"
+            aria-label={intl.formatMessage({
+              id: 'components.downloadToggle.ltsVersions',
+            })}
             aria-checked={selected === 'LTS'}
             onClick={handleOnClick}
           >
@@ -40,8 +47,10 @@ const DownloadToggle = ({
             className={currentClassNames}
             type="button"
             role="switch"
-            aria-label="Show LTS versions"
-            aria-checked={selected === 'LTS'}
+            aria-label={intl.formatMessage({
+              id: 'components.downloadToggle.currentVersions',
+            })}
+            aria-checked={selected === 'CURRENT'}
             onClick={handleOnClick}
           >
             <FormattedMessage id="components.downloadToggle.current" />
@@ -60,4 +69,4 @@ const DownloadToggle = ({
   );
 };
 
-export default DownloadToggle;
+export default injectIntl(DownloadToggle);
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index bdb5d094..09c901bd 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -92,5 +92,7 @@
   "blog.categories.vulnerability": "Vulnerabilities",
   "blog.categories.announcements.description": "Blog category for Node.js announcements",
   "blog.categories.release.description": "Blog category for Node.js Release announcements",
-  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities"
+  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities",
+  "components.downloadToggle.ltsVersions": "LTS Versions",
+  "components.downloadToggle.currentVersions": "Current Versions"
 }
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index bdb5d094..09c901bd 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -92,5 +92,7 @@
   "blog.categories.vulnerability": "Vulnerabilities",
   "blog.categories.announcements.description": "Blog category for Node.js announcements",
   "blog.categories.release.description": "Blog category for Node.js Release announcements",
-  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities"
+  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities",
+  "components.downloadToggle.ltsVersions": "LTS Versions",
+  "components.downloadToggle.currentVersions": "Current Versions"
 }
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index da9fbaa0..8f6b1442 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -92,5 +92,7 @@
   "blog.categories.vulnerability": "Vulnerabilities",
   "blog.categories.announcements.description": "Blog category for Node.js announcements",
   "blog.categories.release.description": "Blog category for Node.js Release announcements",
-  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities"
+  "blog.categories.vulnerability.description": "Catégorie de blog concernant les vulnérabilités de sécurité",
+  "components.downloadToggle.ltsVersions": "LTS Versions",
+  "components.downloadToggle.currentVersions": "Versions actuelles"
 }
diff --git a/src/i18n/locales/zh-cn.json b/src/i18n/locales/zh-cn.json
index 8cc53c7a..d245a375 100644
--- a/src/i18n/locales/zh-cn.json
+++ b/src/i18n/locales/zh-cn.json
@@ -92,5 +92,7 @@
   "blog.categories.vulnerability": "Vulnerabilities",
   "blog.categories.announcements.description": "Blog category for Node.js announcements",
   "blog.categories.release.description": "Blog category for Node.js Release announcements",
-  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities"
+  "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities",
+  "components.downloadToggle.ltsVersions": "LTS Versions",
+  "components.downloadToggle.currentVersions": "Current Versions"
 }


Test patch:
diff --git a/src/components/DownloadComponents/DownloadAdditional/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/DownloadAdditional/__tests__/__snapshots__/index.test.tsx.snap
index 943a95d7..cc177954 100644
--- a/src/components/DownloadComponents/DownloadAdditional/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/DownloadComponents/DownloadAdditional/__tests__/__snapshots__/index.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`DownloadAdditional component allows to collapse expanded items 1`] = `
           >
             <button
               aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-label="LTS Versions"
               class="active"
               role="switch"
               type="button"
@@ -32,8 +32,8 @@ exports[`DownloadAdditional component allows to collapse expanded items 1`] = `
               LTS
             </button>
             <button
-              aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-checked="false"
+              aria-label="Current Versions"
               class="current"
               role="switch"
               type="button"
@@ -166,7 +166,7 @@ exports[`DownloadAdditional component allows to expand items 1`] = `
           >
             <button
               aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-label="LTS Versions"
               class="active"
               role="switch"
               type="button"
@@ -174,8 +174,8 @@ exports[`DownloadAdditional component allows to expand items 1`] = `
               LTS
             </button>
             <button
-              aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-checked="false"
+              aria-label="Current Versions"
               class="current"
               role="switch"
               type="button"
@@ -308,7 +308,7 @@ exports[`DownloadAdditional component renders correctly 1`] = `
           >
             <button
               aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-label="LTS Versions"
               class="active"
               role="switch"
               type="button"
@@ -316,8 +316,8 @@ exports[`DownloadAdditional component renders correctly 1`] = `
               LTS
             </button>
             <button
-              aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-checked="false"
+              aria-label="Current Versions"
               class="current"
               role="switch"
               type="button"
@@ -359,7 +359,7 @@ exports[`DownloadAdditional component renders correctly with release data 1`] =
           >
             <button
               aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-label="LTS Versions"
               class="active"
               role="switch"
               type="button"
@@ -367,8 +367,8 @@ exports[`DownloadAdditional component renders correctly with release data 1`] =
               LTS
             </button>
             <button
-              aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-checked="false"
+              aria-label="Current Versions"
               class="current"
               role="switch"
               type="button"
diff --git a/src/components/DownloadComponents/DownloadToggle/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DownloadComponents/DownloadToggle/__tests__/__snapshots__/index.test.tsx.snap
index 8d74ccb8..6f8626e6 100644
--- a/src/components/DownloadComponents/DownloadToggle/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/DownloadComponents/DownloadToggle/__tests__/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`DownloadToggle component renders correctly 1`] = `
       >
         <button
           aria-checked="true"
-          aria-label="Show LTS versions"
+          aria-label="LTS Versions"
           class="active"
           role="switch"
           type="button"
@@ -21,8 +21,8 @@ exports[`DownloadToggle component renders correctly 1`] = `
           LTS
         </button>
         <button
-          aria-checked="true"
-          aria-label="Show LTS versions"
+          aria-checked="false"
+          aria-label="Current Versions"
           class="current"
           role="switch"
           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 08b7e8dc..8e8e4df3 100644
--- a/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap
@@ -292,7 +292,7 @@ exports[`Download page renders correctly 1`] = `
           >
             <button
               aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-label="LTS Versions"
               class="active"
               role="switch"
               type="button"
@@ -300,8 +300,8 @@ exports[`Download page renders correctly 1`] = `
               LTS
             </button>
             <button
-              aria-checked="true"
-              aria-label="Show LTS versions"
+              aria-checked="false"
+              aria-label="Current Versions"
               class="current"
               role="switch"
               type="button"
@@ -723,7 +723,7 @@ exports[`Download page renders correctly 1`] = `
               >
                 <button
                   aria-checked="true"
-                  aria-label="Show LTS versions"
+                  aria-label="LTS Versions"
                   class="active"
                   role="switch"
                   type="button"
@@ -731,8 +731,8 @@ exports[`Download page renders correctly 1`] = `
                   LTS
                 </button>
                 <button
-                  aria-checked="true"
-                  aria-label="Show LTS versions"
+                  aria-checked="false"
+                  aria-label="Current Versions"
                   class="current"
                   role="switch"
                   type="button"
@@ -1279,7 +1279,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
           >
             <button
               aria-checked="false"
-              aria-label="Show LTS versions"
+              aria-label="LTS Versions"
               class=""
               role="switch"
               type="button"
@@ -1287,8 +1287,8 @@ exports[`Download page should handle LTS to Current switch 1`] = `
               LTS
             </button>
             <button
-              aria-checked="false"
-              aria-label="Show LTS versions"
+              aria-checked="true"
+              aria-label="Current Versions"
               class="current active"
               role="switch"
               type="button"
@@ -1710,7 +1710,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
               >
                 <button
                   aria-checked="false"
-                  aria-label="Show LTS versions"
+                  aria-label="LTS Versions"
                   class=""
                   role="switch"
                   type="button"
@@ -1718,8 +1718,8 @@ exports[`Download page should handle LTS to Current switch 1`] = `
                   LTS
                 </button>
                 <button
-                  aria-checked="false"
-                  aria-label="Show LTS versions"
+                  aria-checked="true"
+                  aria-label="Current Versions"
                   class="current active"
                   role="switch"
                   type="button"