diff options
| author | Patrick H. Lauke <redux@splintered.co.uk> | 2022-06-03 13:18:22 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-06-03 13:18:22 +0300 |
| commit | 8965b11dd5ec9f6d353c53b58e256880d6a96703 (patch) | |
| tree | 03cd881cb6c7d1bb55c87e2a398c17936beb6a2b /js | |
| parent | 3102b4a3e9a7af8737b5330ccf5c6879022577b4 (diff) | |
Remove confusing unnecessary id/aria-labelledby for dropdown menus (#36487)
see https://github.com/twbs/bootstrap/discussions/35755
Note that even the APG guide for disclosure widgets doesn't use this optional "nice-to-have" extra bit https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ (though they do use `aria-controls`, which in most current browser/AT combos is borked though)
Diffstat (limited to 'js')
| -rw-r--r-- | js/tests/visual/dropdown.html | 20 | ||||
| -rw-r--r-- | js/tests/visual/scrollspy.html | 4 |
2 files changed, 12 insertions, 12 deletions
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index 9524cccec0..04cf06d7b6 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -28,8 +28,8 @@ <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> @@ -50,8 +50,8 @@ <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown2"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> @@ -137,10 +137,10 @@ </div> </div> <div class="btn-group dropend"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropend </button> - <div class="dropdown-menu" aria-labelledby="dropdownMenuRight"> + <div class="dropdown-menu"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> @@ -159,10 +159,10 @@ </div> </div> <div class="btn-group dropstart"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenu" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropstart </button> - <div class="dropdown-menu" aria-labelledby="dropstartMenu"> + <div class="dropdown-menu"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> @@ -187,10 +187,10 @@ </div> <div class="col-sm-3 mt-4"> <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Dropdown menu without Popper </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index 7999b0ee78..2daa7abd69 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -24,8 +24,8 @@ <a class="nav-link" href="#mdo">@mdo</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#one">One</a></li> <li><a class="dropdown-item" href="#two">Two</a></li> <li><a class="dropdown-item" href="#three">Three</a></li> |