Repository: nodejs/nodejs.dev
Pull request #2888 (2022-10-08 17:13:22)

fix: add aria-pressed to dark mode toggle
<!--
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

Just a small change but now the dark mode toggle reads out the state of the button (pressed when dark mode is activated and not-pressed when lightmode is activated) for better feedback for screen reader users.

## 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.
- [ ] 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/2888?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.14**% // Increases project coverage by **`+1.11%`** :tada:
> Coverage data is based on head [(`607d654`)](https://codecov.io/gh/nodejs/nodejs.dev/pull/2888?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    #2888      +/-   ##
==========================================
+ Coverage   66.02%   67.14%   +1.11%     
==========================================
  Files         118      127       +9     
  Lines        1351     1473     +122     
  Branches      342      364      +22     
==========================================
+ Hits          892      989      +97     
- Misses        422      444      +22     
- Partials       37       40       +3     
```


| [Impacted Files](https://codecov.io/gh/nodejs/nodejs.dev/pull/2888?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/2888/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/2888/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/2888/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/2888/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/2888/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/2888/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/2888/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/Article/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2888/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXJ0aWNsZS9pbmRleC50c3g=) | `100.00% <ø> (ø)` | |
| [src/components/Banner/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2888/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQmFubmVyL2luZGV4LnRzeA==) | `100.00% <ø> (ø)` | |
| [src/components/Codebox/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2888/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQ29kZWJveC9pbmRleC50c3g=) | `100.00% <ø> (ø)` | |
| ... and [95 more](https://codecov.io/gh/nodejs/nodejs.dev/pull/2888/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/2888?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/DarkModeToggle/index.tsx b/src/components/DarkModeToggle/index.tsx
index ad120243..147d4171 100644
--- a/src/components/DarkModeToggle/index.tsx
+++ b/src/components/DarkModeToggle/index.tsx
@@ -26,6 +26,7 @@ const DarkModeToggle = () => {
       className={styles.darkModeToggle}
       onClick={() => handleThemeOnClick()}
       onKeyPress={() => handleThemeOnClick(true)}
+      aria-pressed={theme === 'dark'}
     >
       <span className="sr-only">Toggle Dark Mode</span>
       <ModeNightIcon className="light-mode-only" />


Test patch:
diff --git a/src/components/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap
index f84e815a..d9ca26af 100644
--- a/src/components/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/DarkModeToggle/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`DarkModeToggle Component render dark mode toggle 1`] = `
 <div>
   <button
+    aria-pressed="false"
     class="darkModeToggle"
     type="button"
   >
diff --git a/src/components/Header/__tests__/__snapshots__/index.test.tsx.snap b/src/components/Header/__tests__/__snapshots__/index.test.tsx.snap
index bd40e05d..a4bec4a3 100644
--- a/src/components/Header/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/Header/__tests__/__snapshots__/index.test.tsx.snap
@@ -120,6 +120,7 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
           </li>
           <li>
             <button
+              aria-pressed="true"
               class="darkModeToggle"
               type="button"
             >
@@ -309,6 +310,7 @@ exports[`Tests for Header component renders correctly 1`] = `
           </li>
           <li>
             <button
+              aria-pressed="true"
               class="darkModeToggle"
               type="button"
             >
@@ -498,6 +500,7 @@ exports[`Tests for Header component renders shorter menu items for mobile 1`] =
           </li>
           <li>
             <button
+              aria-pressed="true"
               class="darkModeToggle"
               type="button"
             >
diff --git a/src/components/Layout/__tests__/__snapshots__/index.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/index.test.tsx.snap
index 37d57c8a..77681054 100644
--- a/src/components/Layout/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/index.test.tsx.snap
@@ -123,6 +123,7 @@ exports[`Layout component renders correctly with data 1`] = `
             </li>
             <li>
               <button
+                aria-pressed="false"
                 class="darkModeToggle"
                 type="button"
               >
diff --git a/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap
index a6c184a8..ede6b1fa 100644
--- a/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/page.test.tsx.snap
@@ -123,6 +123,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
             </li>
             <li>
               <button
+                aria-pressed="false"
                 class="darkModeToggle"
                 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 5a4761a2..d1ecce1f 100644
--- a/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
+++ b/src/pages/about/__tests__/__snapshots__/resources.test.tsx.snap
@@ -123,6 +123,7 @@ exports[`Resources page renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-pressed="false"
                 class="darkModeToggle"
                 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 4cbc239a..39b1f82e 100644
--- a/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/pages/download/__tests__/__snapshots__/index.test.tsx.snap
@@ -123,6 +123,7 @@ exports[`Download page renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-pressed="false"
                 class="darkModeToggle"
                 type="button"
               >
@@ -1064,6 +1065,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
             </li>
             <li>
               <button
+                aria-pressed="false"
                 class="darkModeToggle"
                 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 50d2160c..0fadf54e 100644
--- a/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
+++ b/src/pages/download/__tests__/__snapshots__/package-manager.test.tsx.snap
@@ -123,6 +123,7 @@ exports[`Package Manager Page renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-pressed="false"
                 class="darkModeToggle"
                 type="button"
               >
diff --git a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
index 537acb55..7ae36665 100644
--- a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
+++ b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap
@@ -123,6 +123,7 @@ exports[`Learn Template renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-pressed="false"
                 class="darkModeToggle"
                 type="button"
               >
diff --git a/src/templates/__tests__/__snapshots__/post.test.tsx.snap b/src/templates/__tests__/__snapshots__/post.test.tsx.snap
index c52f1aae..64ce1a1f 100644
--- a/src/templates/__tests__/__snapshots__/post.test.tsx.snap
+++ b/src/templates/__tests__/__snapshots__/post.test.tsx.snap
@@ -123,6 +123,7 @@ exports[`LearnLayout Template renders correctly 1`] = `
             </li>
             <li>
               <button
+                aria-pressed="false"
                 class="darkModeToggle"
                 type="button"
               >