From 6fd203060baeb2c49bd4bb3f83a2837762802f95 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sun, 5 Jun 2022 10:33:18 +0100
Subject: [PATCH] v4: Improve accessible name of version dropdown in docs
 navbar (#36504)

- add `sr-only` "Bootstrap", which will be part of the accessible name
- extra `sr-only` text to give some context - that the dropdown is about switching versions
- remove the redundant id/aria-labelledby for the dropdown
- change the control from `<a>` to `<button>`
---
 site/layouts/partials/docs-navbar.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 33ec402b98..363814ceb6 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -31,10 +31,10 @@
 
   <ul class="navbar-nav ml-md-auto">
     <li class="nav-item dropdown">
-      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
-        v{{ .Site.Params.docs_version }}
-      </a>
-      <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
+      <button class="btn nav-link dropdown-toggle mr-md-2" data-toggle="dropdown" aria-expanded="false">
+        <span class="sr-only">Bootstrap&nbsp;</span> v{{ .Site.Params.docs_version }} <span class="sr-only">(switch to other versions)</span>
+      </button>
+      <div class="dropdown-menu dropdown-menu-md-right">
         <a class="dropdown-item active" href="/docs/{{ .Site.Params.docs_version }}/">Latest ({{ .Site.Params.docs_version }}.x)</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/">5.1.x</a>