Made the language and documentation version switcher accessible by keyboard.

Author: sarahboyce

djangoproject/scss/_style.scss

@@ -2286,88 +2286,93 @@ h2+.list-link-soup {
     z-index: 1;
     pointer-events: none;
 
-    list-style: none;
-
-    .icon {
-        margin-right: 4px;
-    }
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.6em;
 
     ul {
         text-align: right;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 3px;
+        @include sans-serif;
+        font-size: 12px;
     }
 }
 
-#doc-versions,
-#doc-languages,
-#faq-link,
-#backtotop-link {
-    margin: 0;
-    padding-top: 0.25em;
-    padding-bottom: 0.25em;
-
-    &.open {
-        li {
-            display: inline-block;
+#doc-versions li,
+#doc-languages li,
+#faq-link li,
+#backtotop-link li {
+    margin: 0 3px;
+    background: var(--body-bg);
+    border: 1px solid var(--hairline-color);
+    border-radius: 4px;
+    cursor: pointer;
+    pointer-events: auto;
 
-            &.current {
-                border: 1px solid $green-light;
-            }
-        }
+    a,
+    > span {
+        display: inline-block;
+        padding: 8px 15px;
+        border-radius: 4px;
     }
 
-    li {
-        display: none;
-        margin: 0 3px;
-        @include sans-serif;
-        color: var(--body-fg);
-        @include font-size(12);
-        pointer-events: auto;
+    a {
+        text-decoration: none;
+        font-weight: 700;
+        color: var(--primary);
+    }
 
-        &.current {
-            display: inline-block;
-            background: var(--body-bg);
-            padding: 8px 15px;
-            border: 1px solid var(--hairline-color);
-            border-radius: 4px;
-            cursor: pointer;
+    &:hover,
+    &:focus-within {
+        border-color: $green-light;
+        a {
+            color: var(--secondary);
         }
+    }
+}
 
-        &.current-link {
-            display: inline-block;
-        }
+#doc-languages,
+#doc-versions {
+    position: relative;
 
-        a {
-            display: inline-block;
-            background: var(--body-bg);
-            color: var(--primary);
-            text-decoration: none;
-            font-weight: 700;
-            padding: 8px 15px;
-            border: 1px solid var(--hairline-color);
-            border-radius: 4px;
+    li {
+        display: inline-block;
+        padding: 0;
+        position: relative;
 
-            &:hover {
-                color: var(--secondary);
-                border: 1px solid $green-light;
+        &.current {
+            &::after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: -8px;
+                width: 8px;
+                height: 100%;
             }
         }
 
-        a.icon-chevron-up-align {
-            // Should be removed when icon-chevron-up image have the same black space on both sides.
-            padding-right: 11px;
+        &.other {
+            display: none;
+            position: absolute;
+            right: 100%;
+            top: 0;
+            margin-right: 2px;
+            white-space: nowrap;
+            z-index: 2;
         }
     }
 
-    &:hover {
-        pointer-events: auto;
-        padding: 2em 0;
-        margin: -1.75em 0;
-
-        li {
-            display: inline-block;
-        }
+    &:hover li.other,
+    &:focus-within li.other {
+        display: inline-block;
     }
-
 }
 
 #dev-warning,

docs/templates/docs/doc.html

@@ -56,12 +56,15 @@
   <div id="version-switcher">
     <ul id="faq-link">
       <li class="current-link">
-        <a href="{% url 'document-detail' lang=lang version=version url='faq/help' host 'docs' %}">
+        <a tabindex="0" href="{% url 'document-detail' lang=lang version=version url='faq/help' host 'docs' %}">
           <span>{% trans "Getting Help" %}</span>
         </a>
       </li>
     </ul>
     <ul id="doc-languages" class="language-switcher doc-switcher">
+      <li class="current" tabindex="0">
+        <span>{% trans "Language:" %} <strong>{{ lang }}</strong></span>
+      </li>
       {% for available_lang in available_languages %}
         {% if lang != available_lang %}
           <li class="other">
@@ -74,14 +77,15 @@
           </li>
         {% endif %}
       {% endfor %}
-      <li class="current"
-          title="{% blocktrans %}Click on the links on the left to switch to another language.{% endblocktrans %}">
-        <span>{% trans "Language:" %} <strong>{{ lang }}</strong></span>
-      </li>
     </ul>
 
     {% get_all_doc_versions docurl as other_versions %}
     <ul id="doc-versions" class="version-switcher doc-switcher">
+      <li class="current {% if release.is_dev %}dev{% endif %}" tabindex="0">
+        <span>{% trans "Documentation version:" %}
+          <strong>{% if release.is_dev %}development{% else %}{{ version }}{% endif %}</strong>
+        </span>
+      </li>
       {% for other_version in other_versions %}
         {% if version != other_version %}
           <li class="other">
@@ -94,22 +98,10 @@
           </li>
         {% endif %}
       {% endfor %}
-      <li class="current{% if release.is_dev %} dev{% endif %}"
-          title="{% if release.is_dev %}{% blocktrans trimmed %}
-                   This document is for Django's development version, which can be significantly different from previous releases.
-                 {% endblocktrans %}{% else %}{% blocktrans trimmed %}
-                   This document describes Django {{ version }}.
-                 {% endblocktrans %}{% endif %} {% blocktrans trimmed %}
-                   Click on the links on the left to see other versions.
-                 {% endblocktrans %}">
-        <span>{% trans "Documentation version:" %}
-          <strong>{% if release.is_dev %}development{% else %}{{ version }}{% endif %}</strong>
-        </span>
-      </li>
     </ul>
     <ul id="backtotop-link">
       <li class="current-link">
-        <a href="#top" aria-label="Back to top" class="icon-chevron-up-align"><i class="icon icon-chevron-up"></i></a>
+        <a tabindex="0" href="#top" aria-label="Back to top" class="icon-chevron-up-align"><i class="icon icon-chevron-up"></i></a>
       </li>
     </ul>
   </div>