BUG: fix highlighting of current version in switcher menu

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

@@ -3,11 +3,11 @@
 <script>
 document.write(`
   <div class="version-switcher__container dropdown">
-    <button type="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown">
+    <button id="versionswitcherbutton" type="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-controls="versionswitcherlist">
       {{ theme_switcher.get('version_match') }}  <!-- this text may get changed later by javascript -->
       <span class="caret"></span>
     </button>
-    <div class="version-switcher__menu dropdown-menu list-group-flush py-0">
+    <div id="versionswitcherlist" class="version-switcher__menu dropdown-menu list-group-flush py-0" role="menu" aria-labelledby="versionswitcherbutton" tabindex=-1>
     <!-- dropdown will be populated by javascript on page load -->
     </div>
   </div>

tests/test_a11y.py

@@ -12,7 +12,7 @@
 
 # Using importorskip to ensure these tests are only loaded if Playwright is installed.
 playwright = pytest.importorskip("playwright")
-from playwright.sync_api import Page  # noqa: E402
+from playwright.sync_api import Page, expect  # noqa: E402
 
 # Important note: automated accessibility scans can only find a fraction of
 # potential accessibility issues.
@@ -112,3 +112,18 @@ def test_axe_core_kitchen_sink(
 
     # Expect Axe-core to have found 0 accessibility violations
     assert len(results["violations"]) == 0, pretty_axe_results(results, selector)
+
+
+def test_version_switcher_highlighting(page: Page, url_base: str) -> None:
+    """This isn't an a11y test, but needs a served site for Javascript to inject the version menu."""
+    page.goto(url=url_base)
+    button = page.get_by_role("button", name="dev")
+    active_version_name = button.get_attribute("data-active-version-name")
+    entries = page.get_by_role("menuitem", include_hidden=True).filter(
+        has_text=active_version_name
+    )
+    assert (
+        entries.count() == 2
+    )  # sidebar menu and topbar menu each have a matching entry
+    for entry in entries.all():
+        expect(entry).to_have_css("color", "rgb(69, 157, 185)")

tests/test_build.py

@@ -273,27 +273,25 @@ def test_logo_template_rejected(sphinx_build_factory) -> None:
         sphinx_build_factory("base", confoverrides=confoverrides).build()
 
 
-@pytest.mark.parametrize(
-    "align,klass",
-    [
-        ("content", ("col-lg-3", "col-lg-9", "me-auto")),
-        ("left", ("", "", "me-auto")),
-        ("right", ("", "", "ms-auto")),
-    ],
-)
-def test_navbar_align(align, klass, sphinx_build_factory) -> None:
+def test_navbar_align_default(sphinx_build_factory) -> None:
+    """The navbar items align with the proper part of the page."""
+    sphinx_build = sphinx_build_factory("base").build()
+    index_html = sphinx_build.html_tree("index.html")
+    assert "col-lg-9" in index_html.select(".navbar-header-items")[0].attrs["class"]
+
+
+def test_navbar_align_right(sphinx_build_factory) -> None:
     """The navbar items align with the proper part of the page."""
-    confoverrides = {"html_theme_options.navbar_align": align}
+    confoverrides = {"html_theme_options.navbar_align": "right"}
     sphinx_build = sphinx_build_factory("base", confoverrides=confoverrides).build()
+
+    # Both the column alignment and the margin should be changed
     index_html = sphinx_build.html_tree("index.html")
-    if klass[0]:
-        header_start = index_html.select(".navbar-header-items__start")[0]
-        assert klass[0] in header_start.attrs["class"]
-    if klass[1]:
-        header_items = index_html.select(".navbar-header-items")[0]
-        assert klass[1] in header_items.attrs["class"]
-    header_center = index_html.select(".navbar-header-items__center")[0]
-    assert klass[2] in header_center.attrs["class"]
+    assert "col-lg-9" not in index_html.select(".navbar-header-items")[0].attrs["class"]
+    assert (
+        "ms-auto"
+        in index_html.select("div.navbar-header-items__center")[0].attrs["class"]
+    )
 
 
 def test_navbar_no_in_page_headers(sphinx_build_factory, file_regression) -> None:
@@ -648,12 +646,14 @@ def test_show_nav_level(sphinx_build_factory) -> None:
         assert "checked" in checkbox.attrs
 
 
+# the switcher files tested in test_version_switcher_error_states, not all of them exist
 switcher_files = ["switcher.json", "http://a.b/switcher.json", "missing_url.json"]
-"the switcher files tested in test_version_switcher, not all of them exist"
 
 
 @pytest.mark.parametrize("url", switcher_files)
-def test_version_switcher(sphinx_build_factory, file_regression, url) -> None:
+def test_version_switcher_error_states(
+    sphinx_build_factory, file_regression, url
+) -> None:
     """Regression test the version switcher dropdown HTML.
 
     Note that a lot of the switcher HTML gets populated by JavaScript,
@@ -878,7 +878,7 @@ def test_translations(sphinx_build_factory) -> None:
     assert "Créé en utilisant" in str(footer)
     assert "Construit avec le" in str(footer)
 
-    footer_article = index.select(".prev-next-footer")[0]
+    footer_article = index.select(".prev-next-area")[0]
     assert "précédent" in str(footer_article)
     assert "page suivante" in str(footer_article)
 

tests/test_build/navbar_switcher.html

@@ -1,11 +1,11 @@
 <script>
  document.write(`
   <div class="version-switcher__container dropdown">
-    <button type="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown">
+    <button id="versionswitcherbutton" type="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-controls="versionswitcherlist">
       0.7.1  <!-- this text may get changed later by javascript -->
       <span class="caret"></span>
     </button>
-    <div class="version-switcher__menu dropdown-menu list-group-flush py-0">
+    <div id="versionswitcherlist" class="version-switcher__menu dropdown-menu list-group-flush py-0" role="menu" aria-labelledby="versionswitcherbutton" tabindex=-1>
     <!-- dropdown will be populated by javascript on page load -->
     </div>
   </div>