A11Y: Add title attribute to theme switcher (#1924)

Co-authored-by: Tania Allard <[email protected]>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html

@@ -1,7 +1,7 @@
 {# Displays an icon to switch between light mode, dark mode, and auto (use browser's setting). #}
 {# As the theme switcher will only work when JavaScript is enabled, we hide it with `pst-js-only`. #}
-<button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
-  <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light"></i>
-  <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark"></i>
-  <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"></i>
+<button class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" aria-label="{{ _('Color mode') }}" data-bs-title="{{ _('Color mode') }}"  data-bs-placement="bottom" data-bs-toggle="tooltip">
+  <i class="theme-switch fa-solid fa-sun                fa-lg" data-mode="light" title="{{ _('Light') }}"></i>
+  <i class="theme-switch fa-solid fa-moon               fa-lg" data-mode="dark"  title="{{ _('Dark') }}"></i>
+  <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto"  title="{{ _('System Settings') }}"></i>
 </button>

tests/test_build.py

@@ -997,7 +997,15 @@ def test_translations(sphinx_build_factory) -> None:
     assert "Modifier sur GitHub" in str(sidebar_secondary)
 
     header = index.select(".bd-header")[0]
-    assert "clair/sombre" in str(header)
+    ## TODO: update once translataion up to date
+    # assert "clair/sombre" in str(header)
+    # Text of theme switcher button have been changed,
+    # "light/dark" has been updated to "Color mode" and does not have a translation yet.
+    if "Color mode" not in str(header):
+        pytest.xfail(
+            "Please update test_build.py::test_translations now that new translation are available."
+        )
+    # End TODO
 
     footer = index.select(".bd-footer")[0]
     assert "Copyright" in str(footer)

tests/test_build/navbar_theme.html

@@ -1,8 +1,8 @@
-<button aria-label="light/dark" class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" data-bs-placement="bottom" data-bs-toggle="tooltip" title="light/dark">
- <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light">
+<button aria-label="Color mode" class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" data-bs-placement="bottom" data-bs-title="Color mode" data-bs-toggle="tooltip">
+ <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light" title="Light">
  </i>
- <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark">
+ <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark" title="Dark">
  </i>
- <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto">
+ <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto" title="System Settings">
  </i>
 </button>

tests/test_build/sidebar_subpage.html

@@ -33,12 +33,12 @@
   </div>
   <div class="sidebar-header-items__end">
    <div class="navbar-item">
-    <button aria-label="light/dark" class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" data-bs-placement="bottom" data-bs-toggle="tooltip" title="light/dark">
-     <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light">
+    <button aria-label="Color mode" class="btn btn-sm nav-link pst-navbar-icon theme-switch-button pst-js-only" data-bs-placement="bottom" data-bs-title="Color mode" data-bs-toggle="tooltip">
+     <i class="theme-switch fa-solid fa-sun fa-lg" data-mode="light" title="Light">
      </i>
-     <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark">
+     <i class="theme-switch fa-solid fa-moon fa-lg" data-mode="dark" title="Dark">
      </i>
-     <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto">
+     <i class="theme-switch fa-solid fa-circle-half-stroke fa-lg" data-mode="auto" title="System Settings">
      </i>
     </button>
    </div>