Fix landmarks (#1454)

* add header

* fix nav landmarks

* only one main

* label indices nav

* few landmarks

* unique id todos

* fix test fixtures

* fix translations

* translations?

* make version warning a landmark

* revert translation changes

* revert changes to noxfile.py

* update tests to reflect translation reversal

* add TODO comment to make string translatable

Author: gabalafou

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

@@ -468,7 +468,9 @@ function showVersionWarningBanner(data) {
     return;
   }
   // now construct the warning banner
-  var outer = document.createElement("div");
+  var outer = document.createElement("aside");
+  // TODO: add to translatable strings
+  outer.setAttribute("aria-label", "Version warning");
   const middle = document.createElement("div");
   const inner = document.createElement("div");
   const bold = document.createElement("strong");
@@ -504,7 +506,8 @@ function showVersionWarningBanner(data) {
   inner.appendChild(bold);
   inner.appendChild(document.createTextNode("."));
   inner.appendChild(button);
-  document.body.prepend(outer);
+  const skipLink = document.getElementById("pst-skip-link");
+  skipLink.after(outer);
 }
 
 /*******************************************************************************

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/indices.html

@@ -1,6 +1,7 @@
 {# Displays links to the Sphinx-generated indices (genindex, modindex, py-modindex). #}
-<nav class="sidebar-indices-items">
-  <p class="sidebar-indices-items__title" role="heading" aria-level="1">{{ _("Indices") }}</p>
+{%- set indices_navigation_heading_id = unique_html_id("pst-indices-navigation-heading") -%}
+<nav class="sidebar-indices-items" aria-labelledby="{{ indices_navigation_heading_id }}">
+  <p id="{{ indices_navigation_heading_id }}" class="sidebar-indices-items__title" role="heading" aria-level="1">{{ _("Indices") }}</p>
   <ul class="indices-link">
     {%- for rellink in rellinks %}
       {%- if rellink[0] == 'genindex' %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html

@@ -1,10 +1,13 @@
 {# Displays the current page's Table of Contents.  #}
 {% set page_toc = generate_toc_html() %}
 {%- if page_toc | length >= 1 %}
-  <div class="page-toc tocsection onthispage">
+{%- set page_navigation_heading_id = unique_html_id("pst-page-navigation-heading") -%}
+  <div
+    id="{{ page_navigation_heading_id }}"
+    class="page-toc tocsection onthispage">
     <i class="fa-solid fa-list"></i> {{ _("On this page") }}
   </div>
-  <nav class="bd-toc-nav page-toc">
+  <nav class="bd-toc-nav page-toc" aria-labelledby="{{ page_navigation_heading_id }}">
     {{ page_toc }}
   </nav>
 {%- endif %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

@@ -50,7 +50,7 @@
 
   {# A button hidden by default to help assistive devices quickly jump to main content #}
   {# ref: https://www.youtube.com/watch?v=VUR0I5mqq7I #}
-  <a class="skip-link" href="#main-content">{{ _("Skip to main content") }}</a>
+  <a id="pst-skip-link" class="skip-link" href="#main-content">{{ _("Skip to main content") }}</a>
 
 {%- endblock %}
 
@@ -81,14 +81,18 @@
     <div class="search-button__overlay"></div>
     <div class="search-button__search-container">{% include "../components/search-field.html" %}</div>
   </div>
+
+  <header>
   {%- if theme_announcement -%}
     {% include "sections/announcement.html" %}
   {%- endif %}
   {% block docs_navbar %}
-    <nav class="bd-header navbar navbar-expand-lg bd-navbar">
+    <div class="bd-header navbar navbar-expand-lg bd-navbar">
       {%- include "sections/header.html" %}
-    </nav>
+    </div>
   {% endblock docs_navbar %}
+  </header>
+
   <div class="bd-container">
     <div class="bd-container__inner bd-page-width">
       {# Primary sidebar #}
@@ -107,7 +111,7 @@
               {% block docs_body %}
               {# This is empty and only shows up if text has been highlighted by the URL #}
                 {% include "components/searchbox.html" %}
-                <article class="bd-article" role="main">
+                <article class="bd-article">
                   {% block body %}{% endblock %}
                 </article>
               {% endblock docs_body %}