doc: add missing ARIA label for button

Trott · targos · commit fef6ac77e586 · 2021-02-02T10:41:56.000+01:00
The button for toggling light mode and dark mode has no text display. Screen readers will read it as simply "button", making it not useful. Add an aria-label attribute so it gets a better description. PR-URL: #37031 Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com> Reviewed-By: Darshan Sen <raisinten@gmail.com>
diff --git a/doc/template.html b/doc/template.html
@@ -25,7 +25,7 @@
 <header>
 <div class="header-container">
 <h1>Node.js __VERSION__ Documentation</h1>
- <button class="theme-toggle-btn" id="theme-toggle-btn" hidden>
+ <button class="theme-toggle-btn" id="theme-toggle-btn" aria-label="Toggle dark mode/light mode" hidden>
 <svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24">
 <path fill="none" d="M0 0h24v24H0z" />
 <path d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15A4.01 4.01 0 0111 18c0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"/>

-Original file line number
+Diff line change
 <header>
 <divclass="header-container">
 <h1>Node.js __VERSION__ Documentation</h1>
 -<buttonclass="theme-toggle-btn" id="theme-toggle-btn" hidden>
 +<buttonclass="theme-toggle-btn" id="theme-toggle-btn" aria-label="Toggle dark mode/light mode" hidden>
 <svgxmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24">
 <pathfill="none" d="M0 0h24v24H0z" />
 <pathd="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15A4.01 4.01 0 0111 18c0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"/>