Use semantic markup in flyout

readthedocs · Jun 15, 2021 · 1cb277e · 1cb277e
1 parent 0580798
commit 1cb277e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 45 deletions.
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
@@ -17,38 +17,37 @@
         <span class="fa fa-caret-down"></span>
       </span>
       <div class="rst-other-versions">
-        <dl>
-          <dt>{{ _('Versions') }}</dt>
+        <h3 id="versions-versions">{{ _('Versions') }}</h3>
+        <ul aria-labeledby="version-versions">
           {%- if test_versions %}
             {%- for version in test_versions %}
-            <dd><a href="#">{{ version }}</a></dd>
+            <li><a href="#">{{ version }}</a></li>
             {%- endfor %}
           {%- else %}
-            <dd><a href="#">latest</a></dd>
-            <dd><a href="#">1.0</a></dd>
-            <dd><a href="#">1.1</a></dd>
+            <li><a href="#">latest</a></li>
+            <li><a href="#">1.0</a></li>
+            <li><a href="#">1.1</a></li>
           {%- endif %}
-        </dl>
-        <dl>
-          <dt>{{ _('Downloads') }}</dt>
-          <dd><a href="#">PDF</a></dd>
-          <dd><a href="#">ePub</a></dd>
-          <dd><a href="#">HTML</a></dd>
-        </dl>
-        <dl>
-          {#- Translators: The phrase "Read the Docs" is not translated #}
-          <dt>{{ _('On Read the Docs') }}</dt>
-            <dd>
-              <a href="#">{{ _('Project Home') }}</a>
-            </dd>
-            <dd>
-              <a href="#">{{ _('Builds') }}</a>
-            </dd>
-        </dl>
-        <dl>
-          <dt>Debug</dt>
-          <dd><a href="#" data-toggle="rst-debug-badge">Swap badge position</a></dd>
-        </dl>
+        </ul>
+
+        <h3 id="versions-downloads">{{ _('Downloads') }}</h3>
+        <ul aria-labeledby="versions-downloads">
+          <li><a href="#">PDF</a></li>
+          <li><a href="#">ePub</a></li>
+          <li><a href="#">HTML</a></li>
+        </ul>
+
+        {#- Translators: The phrase "Read the Docs" is not translated #}
+        <h3 id="versions-rtd-proj">{{ _('On Read the Docs') }}</h3>
+        <ul aria-labeledby="versions-rtd-proj">
+          <li><a href="#">{{ _('Project Home') }}</a></li>
+          <li><a href="#">{{ _('Builds') }}</a></li>
+        </ul>
+
+        <h3 id="versions-debug">Debug</h3>
+        <ul aria-labeledby="versions-debug">
+          <li><a href="#" data-toggle="rst-debug-badge">Swap badge position</a></li>
+        </ul>
       </div>
     </div>
   {%- endif %}

diff --git a/sphinx_rtd_theme/versions.html b/sphinx_rtd_theme/versions.html
@@ -7,28 +7,26 @@
       <span class="fa fa-caret-down"></span>
     </span>
     <div class="rst-other-versions">
-      <dl>
-        <dt>{{ _('Versions') }}</dt>
+      <h3 id="versions-versions">{{ _('Versions') }}</h3>
+      <ul aria-labeledby="version-versions">
         {% for slug, url in versions %}
-          <dd><a href="{{ url }}">{{ slug }}</a></dd>
+          <li><a href="{{ url }}">{{ slug }}</a></li>
         {% endfor %}
-      </dl>
-      <dl>
-        <dt>{{ _('Downloads') }}</dt>
+      </ul>
+
+      <h3 id="version-downloads">{{ _('Downloads') }}</h3>
+      <ul aria-labeledby="version-downloads">
         {% for type, url in downloads %}
-          <dd><a href="{{ url }}">{{ type }}</a></dd>
+          <li><a href="{{ url }}">{{ type }}</a></li>
         {% endfor %}
-      </dl>
-      <dl>
+      </ul>
+
+      <h3 id="versions-rtd-proj">{{ _('On Read the Docs') }}</h3>
+      <ul aria-labeledby="versions-rtd-proj">
         {# Translators: The phrase "Read the Docs" is not translated #}
-        <dt>{{ _('On Read the Docs') }}</dt>
-          <dd>
-            <a href="//{{ PRODUCTION_DOMAIN }}/projects/{{ slug }}/?fromdocs={{ slug }}">{{ _('Project Home') }}</a>
-          </dd>
-          <dd>
-            <a href="//{{ PRODUCTION_DOMAIN }}/builds/{{ slug }}/?fromdocs={{ slug }}">{{ _('Builds') }}</a>
-          </dd>
-      </dl>
+        <li><a href="//{{ PRODUCTION_DOMAIN }}/projects/{{ slug }}/?fromdocs={{ slug }}">{{ _('Project Home') }}</a></li>
+        <li><a href="//{{ PRODUCTION_DOMAIN }}/builds/{{ slug }}/?fromdocs={{ slug }}">{{ _('Builds') }}</a></li>
+      </ul>
     </div>
   </div>
 {% endif %}
diff --git a/src/sass/_theme_badge.sass b/src/sass/_theme_badge.sass
@@ -51,7 +51,7 @@
       margin: 20px 0
       padding: 0
       border-top: solid 1px lighten($menu-background-color, 5%)
-    dd
+    li
       display: inline-block
       margin: 0
       a
@@ -85,6 +85,9 @@
       padding: 0 $base-line-height / 4
       display: block
       text-align: center
+  h3
+    margin-bottom: 0
+    color: $nav-caption
 
 +media($tablet)
   .rst-versions