fix(a11y): use <button> with aria-expanded for the version toggle

_shared_assets/static/custom.css

@@ -46,6 +46,18 @@ h6 {
 .rst-versions .rst-current-version .fa-book {
 	display: none;
 }
+
+/* The version toggle is now a <button> element. Reset default button
+   styling so it looks identical to the old <span>. */
+button.rst-current-version {
+	background: none;
+	border: none;
+	padding: 12px;
+	font-family: inherit;
+	font-size: 90%;
+	width: 100%;
+	cursor: pointer;
+}
 .rst-versions .rst-current-version:before {
 	content: 'Nextcloud';
 	margin-right: auto;
@@ -59,6 +71,10 @@ h6 {
 	margin-left: 5px;
 }
 
+.rst-versions .rst-current-version .fa-caret-down:not(:last-of-type) {
+	margin-right: 10px;
+}
+
 /* Code blocks */
 .highlight {
 	/* nc blue */

admin_manual/_templates/versions.html

@@ -1,11 +1,18 @@
 {% if READTHEDOCS %}
 {# Add rst-badge after rst-versions for small badge style. #}
   <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
-    <span class="rst-current-version" data-toggle="rst-current-version">
+    {# Use <button> so the toggle has native keyboard semantics and can
+       carry aria-expanded. The RTD theme JS uses [data-toggle] selectors
+       so the element type does not matter for the toggle behaviour. #}
+    <button type="button"
+            class="rst-current-version"
+            data-toggle="rst-current-version"
+            aria-expanded="false"
+            aria-controls="rst-other-versions-admin">
       ☁️ {{ current_version }}
-      <span class="fa fa-caret-down"></span>
-    </span>
-    <div class="rst-other-versions">
+      <span class="fa fa-caret-down" aria-hidden="true"></span>
+    </button>
+    <div id="rst-other-versions-admin" class="rst-other-versions">
       <dl>
         <dt>☁️ {{ _('Versions') }}</dt>
         {% for slug, url in versions|reverse %}
@@ -22,4 +29,15 @@
       </dl>
     </div>
   </div>
-{% endif %}
+  <script>
+    /* Keep aria-expanded in sync with the RTD theme toggle class. */
+    (function () {
+      var btn = document.querySelector('.rst-current-version[aria-expanded]');
+      if (!btn) return;
+      btn.addEventListener('click', function () {
+        var expanded = this.getAttribute('aria-expanded') === 'true';
+        this.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+      });
+    }());
+  </script>
+{% endif %}

developer_manual/_templates/versions.html

@@ -1,11 +1,18 @@
 {% if READTHEDOCS %}
 {# Add rst-badge after rst-versions for small badge style. #}
   <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
-    <span class="rst-current-version" data-toggle="rst-current-version">
+    {# Use <button> so the toggle has native keyboard semantics and can
+       carry aria-expanded. The RTD theme JS uses [data-toggle] selectors
+       so the element type does not matter for the toggle behaviour. #}
+    <button type="button"
+            class="rst-current-version"
+            data-toggle="rst-current-version"
+            aria-expanded="false"
+            aria-controls="rst-other-versions-dev">
       ☁️ {{ current_version }}
-      <span class="fa fa-caret-down"></span>
-    </span>
-    <div class="rst-other-versions">
+      <span class="fa fa-caret-down" aria-hidden="true"></span>
+    </button>
+    <div id="rst-other-versions-dev" class="rst-other-versions">
       <dl>
         <dt>☁️ {{ _('Versions') }}</dt>
         {% for slug, url in versions|reverse %}
@@ -22,4 +29,15 @@
       </dl>
     </div>
   </div>
-{% endif %}
+  <script>
+    /* Keep aria-expanded in sync with the RTD theme toggle class. */
+    (function () {
+      var btn = document.querySelector('.rst-current-version[aria-expanded]');
+      if (!btn) return;
+      btn.addEventListener('click', function () {
+        var expanded = this.getAttribute('aria-expanded') === 'true';
+        this.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+      });
+    }());
+  </script>
+{% endif %}

user_manual/_templates/versions.html

@@ -58,13 +58,20 @@
   {% set sorted_languages = language_tuples | sort(attribute='name') %}
 
   <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
-    <span class="rst-current-version" data-toggle="rst-current-version">
+    {# Use <button> so the toggle has native keyboard semantics and can
+       carry aria-expanded. The RTD theme JS uses [data-toggle] selectors
+       so the element type does not matter for the toggle behaviour. #}
+    <button type="button"
+            class="rst-current-version"
+            data-toggle="rst-current-version"
+            aria-expanded="false"
+            aria-controls="rst-other-versions-user">
       🌐 {{ language_names.get(language, language) }}
-      <span class="fa fa-caret-down"></span>
-       ☁️ {{ current_version }}
-      <span class="fa fa-caret-down"></span>
-    </span>
-    <div class="rst-other-versions">
+      <span class="fa fa-caret-down" aria-hidden="true"></span>
+       ☁️ {{ current_version }}
+      <span class="fa fa-caret-down" aria-hidden="true"></span>
+    </button>
+    <div id="rst-other-versions-user" class="rst-other-versions">
       <dl>
         <dt>🌐 {{ _('Languages') }}</dt>
         {% for lang in sorted_languages %}
@@ -97,4 +104,15 @@
       </dl>
     </div>
   </div>
+  <script>
+    /* Keep aria-expanded in sync with the RTD theme toggle class. */
+    (function () {
+      var btn = document.querySelector('.rst-current-version[aria-expanded]');
+      if (!btn) return;
+      btn.addEventListener('click', function () {
+        var expanded = this.getAttribute('aria-expanded') === 'true';
+        this.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+      });
+    }());
+  </script>
 {% endif %}