From 6da5715958b04f4d549db6a2e07e5e5d4ad78ef1 Mon Sep 17 00:00:00 2001
From: M Bussonnier <bussonniermatthias@gmail.com>
Date: Wed, 11 Sep 2024 03:20:45 -0700
Subject: [PATCH] A11Y: Add title attribute to theme switcher (#1924)

Co-authored-by: Tania Allard <taniar.allard@gmail.com>
---
 .../pydata_sphinx_theme/components/theme-switcher.html |  8 ++++----
 tests/test_build.py                                    | 10 +++++++++-
 tests/test_build/navbar_theme.html                     |  8 ++++----
 tests/test_build/sidebar_subpage.html                  |  8 ++++----
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html
index 0dc060df3..5b25d800d 100644
--- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html
+++ b/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>
diff --git a/tests/test_build.py b/tests/test_build.py
index f782e4751..47045c617 100644
--- a/tests/test_build.py
+++ b/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)
diff --git a/tests/test_build/navbar_theme.html b/tests/test_build/navbar_theme.html
index bd61854c8..b17a4297d 100644
--- a/tests/test_build/navbar_theme.html
+++ b/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>
diff --git a/tests/test_build/sidebar_subpage.html b/tests/test_build/sidebar_subpage.html
index 320f487f3..54a4a2e49 100644
--- a/tests/test_build/sidebar_subpage.html
+++ b/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>