diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2022-06-05 11:59:41 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-06-05 11:59:41 +0300 |
commit | af0c1d8618a70a756a820ec3c9fd8dbc4807982c (patch) | |
tree | 810cd38d4217c5451441855e3a36c48c5440167a /site | |
parent | 5b0bf3f49a94ca96334651eca9aeeb56d48bf144 (diff) |
Improve accessible name of version dropdown in docs navbar (#36495)
- add `aria-hidden="true"` to the "Bootstrap" text that is hidden on large screens
- add separate visually-hidden "Bootstrap", which will be part of the accessible name regardless of whether the other string is visible or not (on large screen)
- extra visually-hidden text to give some context - that the dropdown is about switching versions
- remove the redundant id/aria-labelledby for the dropdown
Diffstat (limited to 'site')
-rw-r--r-- | site/layouts/partials/docs-versions.html | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index 54cf3a2e2a..2ebf4416d3 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -11,10 +11,10 @@ {{- end }} <li class="nav-item dropdown"> - <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"> - <span class="d-lg-none">Bootstrap</span> v{{ .Site.Params.docs_version }} + <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"> + <span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v{{ .Site.Params.docs_version }} <span class="visually-hidden">(switch to other versions)</span> </button> - <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions"> + <ul class="dropdown-menu dropdown-menu-end"> <li><h6 class="dropdown-header">v5 releases</h6></li> <li> <a class="dropdown-item current" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}"> |