Skip to content

Commit 8965b11

Browse files
patrickhlaukepatrickhlauke
authored
Remove confusing unnecessary id/aria-labelledby for dropdown menus (#36487)
see #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)
1 parent 3102b4a commit 8965b11

File tree

15 files changed

+146
-146
lines changed

15 files changed

+146
-146
lines changed

‎js/tests/visual/dropdown.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
2828
<a class="nav-link" href="#">Link</a>
2929
</li>
3030
<li class="nav-item dropdown">
31-
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
32-
<ul class="dropdown-menu" aria-labelledby="dropdown">
31+
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
32+
<ul class="dropdown-menu">
3333
<li><a class="dropdown-item" href="#">Action</a></li>
3434
<li><a class="dropdown-item" href="#">Another action</a></li>
3535
<li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -50,8 +50,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
5050
<a class="nav-link" href="#">Link</a>
5151
</li>
5252
<li class="nav-item dropdown">
53-
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
54-
<ul class="dropdown-menu" aria-labelledby="dropdown2">
53+
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
54+
<ul class="dropdown-menu">
5555
<li><a class="dropdown-item" href="#">Action</a></li>
5656
<li><a class="dropdown-item" href="#">Another action</a></li>
5757
<li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -137,10 +137,10 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
137137
</div>
138138
</div>
139139
<div class="btn-group dropend">
140-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-bs-toggle="dropdown" aria-expanded="false">
140+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
141141
Dropend
142142
</button>
143-
<div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
143+
<div class="dropdown-menu">
144144
<button class="dropdown-item" type="button">Action</button>
145145
<button class="dropdown-item" type="button">Another action</button>
146146
<button class="dropdown-item" type="button">Something else here</button>
@@ -159,10 +159,10 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
159159
</div>
160160
</div>
161161
<div class="btn-group dropstart">
162-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenu" data-bs-toggle="dropdown" aria-expanded="false">
162+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
163163
Dropstart
164164
</button>
165-
<div class="dropdown-menu" aria-labelledby="dropstartMenu">
165+
<div class="dropdown-menu">
166166
<button class="dropdown-item" type="button">Action</button>
167167
<button class="dropdown-item" type="button">Another action</button>
168168
<button class="dropdown-item" type="button">Something else here</button>
@@ -187,10 +187,10 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
187187
</div>
188188
<div class="col-sm-3 mt-4">
189189
<div class="dropdown">
190-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
190+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
191191
Dropdown menu without Popper
192192
</button>
193-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
193+
<ul class="dropdown-menu">
194194
<li><a class="dropdown-item" href="#">Action</a></li>
195195
<li><a class="dropdown-item" href="#">Another action</a></li>
196196
<li><a class="dropdown-item" href="#">Something else here</a></li>

‎js/tests/visual/scrollspy.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
<a class="nav-link" href="#mdo">@mdo</a>
2525
</li>
2626
<li class="nav-item dropdown">
27-
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
28-
<ul class="dropdown-menu" aria-labelledby="dropdown">
27+
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
28+
<ul class="dropdown-menu">
2929
<li><a class="dropdown-item" href="#one">One</a></li>
3030
<li><a class="dropdown-item" href="#two">Two</a></li>
3131
<li><a class="dropdown-item" href="#three">Three</a></li>

‎site/content/docs/5.2/components/button-group.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -173,10 +173,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
173173
<button type="button" class="btn btn-primary">2</button>
174174

175175
<div class="btn-group" role="group">
176-
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
176+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
177177
Dropdown
178178
</button>
179-
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
179+
<ul class="dropdown-menu">
180180
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
181181
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
182182
</ul>
@@ -204,39 +204,39 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
204204
<button type="button" class="btn btn-primary">Button</button>
205205
<button type="button" class="btn btn-primary">Button</button>
206206
<div class="btn-group" role="group">
207-
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
207+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
208208
Dropdown
209209
</button>
210-
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
210+
<ul class="dropdown-menu">
211211
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
212212
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
213213
</ul>
214214
</div>
215215
<button type="button" class="btn btn-primary">Button</button>
216216
<button type="button" class="btn btn-primary">Button</button>
217217
<div class="btn-group" role="group">
218-
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
218+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
219219
Dropdown
220220
</button>
221-
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
221+
<ul class="dropdown-menu">
222222
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
223223
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
224224
</ul>
225225
</div>
226226
<div class="btn-group" role="group">
227-
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
227+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
228228
Dropdown
229229
</button>
230-
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
230+
<ul class="dropdown-menu">
231231
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
232232
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
233233
</ul>
234234
</div>
235235
<div class="btn-group" role="group">
236-
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
236+
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
237237
Dropdown
238238
</button>
239-
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
239+
<ul class="dropdown-menu">
240240
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
241241
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
242242
</ul>

‎site/content/docs/5.2/components/dropdowns.md

+30-30
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
3030

3131
{{< example >}}
3232
<div class="dropdown">
33-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
33+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
3434
Dropdown button
3535
</button>
36-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
36+
<ul class="dropdown-menu">
3737
<li><a class="dropdown-item" href="#">Action</a></li>
3838
<li><a class="dropdown-item" href="#">Another action</a></li>
3939
<li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -45,11 +45,11 @@ And with `<a>` elements:
4545

4646
{{< example >}}
4747
<div class="dropdown">
48-
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
48+
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
4949
Dropdown link
5050
</a>
5151

52-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
52+
<ul class="dropdown-menu">
5353
<li><a class="dropdown-item" href="#">Action</a></li>
5454
<li><a class="dropdown-item" href="#">Another action</a></li>
5555
<li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -353,10 +353,10 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
353353

354354
{{< example >}}
355355
<div class="dropdown">
356-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
356+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
357357
Dropdown button
358358
</button>
359-
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
359+
<ul class="dropdown-menu dropdown-menu-dark">
360360
<li><a class="dropdown-item active" href="#">Action</a></li>
361361
<li><a class="dropdown-item" href="#">Another action</a></li>
362362
<li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -378,10 +378,10 @@ And putting it to use in a navbar:
378378
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
379379
<ul class="navbar-nav">
380380
<li class="nav-item dropdown">
381-
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
381+
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
382382
Dropdown
383383
</a>
384-
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
384+
<ul class="dropdown-menu dropdown-menu-dark">
385385
<li><a class="dropdown-item" href="#">Action</a></li>
386386
<li><a class="dropdown-item" href="#">Another action</a></li>
387387
<li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -406,10 +406,10 @@ Make the dropdown menu centered below the toggle with `.dropdown-center` on the
406406

407407
{{< example >}}
408408
<div class="dropdown-center">
409-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCenterBtn" data-bs-toggle="dropdown" aria-expanded="false">
409+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
410410
Centered dropdown
411411
</button>
412-
<ul class="dropdown-menu" aria-labelledby="dropdownCenterBtn">
412+
<ul class="dropdown-menu">
413413
<li><a class="dropdown-item" href="#">Action</a></li>
414414
<li><a class="dropdown-item" href="#">Action two</a></li>
415415
<li><a class="dropdown-item" href="#">Action three</a></li>
@@ -482,10 +482,10 @@ Make the dropup menu centered above the toggle with `.dropup-center` on the pare
482482

483483
{{< example >}}
484484
<div class="dropup-center dropup">
485-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupCenterBtn" data-bs-toggle="dropdown" aria-expanded="false">
485+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
486486
Centered dropup
487487
</button>
488-
<ul class="dropdown-menu" aria-labelledby="dropupCenterBtn">
488+
<ul class="dropdown-menu">
489489
<li><a class="dropdown-item" href="#">Action</a></li>
490490
<li><a class="dropdown-item" href="#">Action two</a></li>
491491
<li><a class="dropdown-item" href="#">Action three</a></li>
@@ -617,10 +617,10 @@ You can use `<a>` or `<button>` elements as dropdown items.
617617

618618
{{< example >}}
619619
<div class="dropdown">
620-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
620+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
621621
Dropdown
622622
</button>
623-
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
623+
<ul class="dropdown-menu">
624624
<li><button class="dropdown-item" type="button">Action</button></li>
625625
<li><button class="dropdown-item" type="button">Another action</button></li>
626626
<li><button class="dropdown-item" type="button">Something else here</button></li>
@@ -728,10 +728,10 @@ Taking most of the options shown above, here's a small kitchen sink demo of vari
728728

729729
{{< example >}}
730730
<div class="btn-group">
731-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
731+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
732732
Dropdown
733733
</button>
734-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
734+
<ul class="dropdown-menu">
735735
<li><a class="dropdown-item" href="#">Menu item</a></li>
736736
<li><a class="dropdown-item" href="#">Menu item</a></li>
737737
<li><a class="dropdown-item" href="#">Menu item</a></li>
@@ -913,21 +913,21 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
913913
{{< example >}}
914914
<div class="d-flex">
915915
<div class="dropdown me-1">
916-
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
916+
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
917917
Offset
918918
</button>
919-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
919+
<ul class="dropdown-menu">
920920
<li><a class="dropdown-item" href="#">Action</a></li>
921921
<li><a class="dropdown-item" href="#">Another action</a></li>
922922
<li><a class="dropdown-item" href="#">Something else here</a></li>
923923
</ul>
924924
</div>
925925
<div class="btn-group">
926926
<button type="button" class="btn btn-secondary">Reference</button>
927-
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
927+
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
928928
<span class="visually-hidden">Toggle Dropdown</span>
929929
</button>
930-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
930+
<ul class="dropdown-menu">
931931
<li><a class="dropdown-item" href="#">Action</a></li>
932932
<li><a class="dropdown-item" href="#">Another action</a></li>
933933
<li><a class="dropdown-item" href="#">Something else here</a></li>
@@ -944,43 +944,43 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
944944

945945
{{< example >}}
946946
<div class="btn-group">
947-
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
947+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
948948
Default dropdown
949949
</button>
950-
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
950+
<ul class="dropdown-menu">
951951
<li><a class="dropdown-item" href="#">Menu item</a></li>
952952
<li><a class="dropdown-item" href="#">Menu item</a></li>
953953
<li><a class="dropdown-item" href="#">Menu item</a></li>
954954
</ul>
955955
</div>
956956

957957
<div class="btn-group">
958-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
958+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
959959
Clickable outside
960960
</button>
961-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
961+
<ul class="dropdown-menu">
962962
<li><a class="dropdown-item" href="#">Menu item</a></li>
963963
<li><a class="dropdown-item" href="#">Menu item</a></li>
964964
<li><a class="dropdown-item" href="#">Menu item</a></li>
965965
</ul>
966966
</div>
967967

968968
<div class="btn-group">
969-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
969+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
970970
Clickable inside
971971
</button>
972-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
972+
<ul class="dropdown-menu">
973973
<li><a class="dropdown-item" href="#">Menu item</a></li>
974974
<li><a class="dropdown-item" href="#">Menu item</a></li>
975975
<li><a class="dropdown-item" href="#">Menu item</a></li>
976976
</ul>
977977
</div>
978978

979979
<div class="btn-group">
980-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
980+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
981981
Manual close
982982
</button>
983-
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
983+
<ul class="dropdown-menu">
984984
<li><a class="dropdown-item" href="#">Menu item</a></li>
985985
<li><a class="dropdown-item" href="#">Menu item</a></li>
986986
<li><a class="dropdown-item" href="#">Menu item</a></li>
@@ -1036,10 +1036,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
10361036

10371037
```html
10381038
<div class="dropdown">
1039-
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
1039+
<button type="button" data-bs-toggle="dropdown" aria-expanded="false">
10401040
Dropdown trigger
10411041
</button>
1042-
<ul class="dropdown-menu" aria-labelledby="dLabel">
1042+
<ul class="dropdown-menu">
10431043
...
10441044
</ul>
10451045
</div>

0 commit comments

Comments
 (0)