Skip to content

Commit b4c994d

Browse files
patrickhlaukepatrickhlauke
authored
Remove confusing unnecessary id/aria-labelledby for dropdown menus (#36491)
v4 port of #36487
1 parent 4e951f8 commit b4c994d

File tree

11 files changed

+70
-70
lines changed

11 files changed

+70
-70
lines changed

‎js/tests/unit/dropdown.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -752,8 +752,8 @@ $(function () {
752752
var done = assert.async()
753753
var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">' +
754754
'<div class="dropdown">' +
755-
' <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a>' +
756-
' <div class="dropdown-menu" aria-labelledby="dropdown">' +
755+
' <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Dropdown</a>' +
756+
' <div class="dropdown-menu">' +
757757
' <a class="dropdown-item" href="#">Action</a>' +
758758
' <a class="dropdown-item" href="#">Another action</a>' +
759759
' <a class="dropdown-item" href="#">Something else here</a>' +

‎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-toggle="dropdown" aria-expanded="false">Dropdown</a>
32-
<div class="dropdown-menu" aria-labelledby="dropdown">
31+
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
32+
<div class="dropdown-menu">
3333
<a class="dropdown-item" href="#">Action</a>
3434
<a class="dropdown-item" href="#">Another action</a>
3535
<a class="dropdown-item" href="#">Something else here</a>
@@ -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-toggle="dropdown" aria-expanded="false">Dropdown</a>
54-
<div class="dropdown-menu" aria-labelledby="dropdown2">
53+
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
54+
<div class="dropdown-menu">
5555
<a class="dropdown-item" href="#">Action</a>
5656
<a class="dropdown-item" href="#">Another action</a>
5757
<a class="dropdown-item" href="#">Something else here</a>
@@ -129,10 +129,10 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
129129
</div>
130130
</div>
131131
<div class="btn-group dropright">
132-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-expanded="false">
132+
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
133133
Dropright
134134
</button>
135-
<div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
135+
<div class="dropdown-menu">
136136
<button class="dropdown-item" type="button">Action</button>
137137
<button class="dropdown-item" type="button">Another action</button>
138138
<button class="dropdown-item" type="button">Something else here</button>
@@ -151,10 +151,10 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
151151
</div>
152152
</div>
153153
<div class="btn-group dropleft">
154-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-expanded="false">
154+
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
155155
Dropleft
156156
</button>
157-
<div class="dropdown-menu" aria-labelledby="dropleftMenu">
157+
<div class="dropdown-menu">
158158
<button class="dropdown-item" type="button">Action</button>
159159
<button class="dropdown-item" type="button">Another action</button>
160160
<button class="dropdown-item" type="button">Something else here</button>
@@ -189,10 +189,10 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
189189
</div>
190190
<div class="col-sm-3 mt-4">
191191
<div class="dropdown">
192-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-display="static" aria-expanded="false">
192+
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static" aria-expanded="false">
193193
Dropdown menu without Popper.js
194194
</button>
195-
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
195+
<div class="dropdown-menu">
196196
<a class="dropdown-item" href="#">Action</a>
197197
<a class="dropdown-item" href="#">Another action</a>
198198
<a class="dropdown-item" href="#">Something else here</a>

‎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-toggle="dropdown" aria-expanded="false">Dropdown</a>
28-
<div class="dropdown-menu" aria-labelledby="dropdown">
27+
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
28+
<div class="dropdown-menu">
2929
<a class="dropdown-item" href="#one">One</a>
3030
<a class="dropdown-item" href="#two">Two</a>
3131
<a class="dropdown-item" href="#three">Three</a>

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

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

125125
<div class="btn-group" role="group">
126-
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
126+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
127127
Dropdown
128128
</button>
129-
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
129+
<div class="dropdown-menu">
130130
<a class="dropdown-item" href="#">Dropdown link</a>
131131
<a class="dropdown-item" href="#">Dropdown link</a>
132132
</div>
@@ -155,39 +155,39 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
155155
<button type="button" class="btn btn-secondary">Button</button>
156156
<button type="button" class="btn btn-secondary">Button</button>
157157
<div class="btn-group" role="group">
158-
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
158+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
159159
Dropdown
160160
</button>
161-
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
161+
<div class="dropdown-menu">
162162
<a class="dropdown-item" href="#">Dropdown link</a>
163163
<a class="dropdown-item" href="#">Dropdown link</a>
164164
</div>
165165
</div>
166166
<button type="button" class="btn btn-secondary">Button</button>
167167
<button type="button" class="btn btn-secondary">Button</button>
168168
<div class="btn-group" role="group">
169-
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
169+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
170170
Dropdown
171171
</button>
172-
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
172+
<div class="dropdown-menu">
173173
<a class="dropdown-item" href="#">Dropdown link</a>
174174
<a class="dropdown-item" href="#">Dropdown link</a>
175175
</div>
176176
</div>
177177
<div class="btn-group" role="group">
178-
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
178+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
179179
Dropdown
180180
</button>
181-
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
181+
<div class="dropdown-menu">
182182
<a class="dropdown-item" href="#">Dropdown link</a>
183183
<a class="dropdown-item" href="#">Dropdown link</a>
184184
</div>
185185
</div>
186186
<div class="btn-group" role="group">
187-
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
187+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
188188
Dropdown
189189
</button>
190-
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
190+
<div class="dropdown-menu">
191191
<a class="dropdown-item" href="#">Dropdown link</a>
192192
<a class="dropdown-item" href="#">Dropdown link</a>
193193
</div>

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

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

3333
{{< example >}}
3434
<div class="dropdown">
35-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
35+
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
3636
Dropdown button
3737
</button>
38-
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
38+
<div class="dropdown-menu">
3939
<a class="dropdown-item" href="#">Action</a>
4040
<a class="dropdown-item" href="#">Another action</a>
4141
<a class="dropdown-item" href="#">Something else here</a>
@@ -47,11 +47,11 @@ And with `<a>` elements:
4747

4848
{{< example >}}
4949
<div class="dropdown">
50-
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-expanded="false">
50+
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
5151
Dropdown link
5252
</a>
5353

54-
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
54+
<div class="dropdown-menu">
5555
<a class="dropdown-item" href="#">Action</a>
5656
<a class="dropdown-item" href="#">Another action</a>
5757
<a class="dropdown-item" href="#">Something else here</a>
@@ -539,10 +539,10 @@ Historically dropdown menu contents *had* to be links, but that's no longer the
539539

540540
{{< example >}}
541541
<div class="dropdown">
542-
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false">
542+
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
543543
Dropdown
544544
</button>
545-
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
545+
<div class="dropdown-menu">
546546
<button class="dropdown-item" type="button">Action</button>
547547
<button class="dropdown-item" type="button">Another action</button>
548548
<button class="dropdown-item" type="button">Something else here</button>
@@ -745,21 +745,21 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
745745
{{< example >}}
746746
<div class="d-flex">
747747
<div class="dropdown mr-1">
748-
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
748+
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
749749
Offset
750750
</button>
751-
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
751+
<div class="dropdown-menu">
752752
<a class="dropdown-item" href="#">Action</a>
753753
<a class="dropdown-item" href="#">Another action</a>
754754
<a class="dropdown-item" href="#">Something else here</a>
755755
</div>
756756
</div>
757757
<div class="btn-group">
758758
<button type="button" class="btn btn-secondary">Reference</button>
759-
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
759+
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
760760
<span class="sr-only">Toggle Dropdown</span>
761761
</button>
762-
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
762+
<div class="dropdown-menu">
763763
<a class="dropdown-item" href="#">Action</a>
764764
<a class="dropdown-item" href="#">Another action</a>
765765
<a class="dropdown-item" href="#">Something else here</a>
@@ -784,10 +784,10 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
784784

785785
```html
786786
<div class="dropdown">
787-
<button id="dLabel" type="button" data-toggle="dropdown" aria-expanded="false">
787+
<button type="button" data-toggle="dropdown" aria-expanded="false">
788788
Dropdown trigger
789789
</button>
790-
<div class="dropdown-menu" aria-labelledby="dLabel">
790+
<div class="dropdown-menu">
791791
...
792792
</div>
793793
</div>

‎site/content/docs/4.6/components/navbar.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,10 @@ Here's an example of all the sub-components included in a responsive light-theme
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="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
53+
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
5454
Dropdown
5555
</a>
56-
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
56+
<div class="dropdown-menu">
5757
<a class="dropdown-item" href="#">Action</a>
5858
<a class="dropdown-item" href="#">Another action</a>
5959
<div class="dropdown-divider"></div>
@@ -181,10 +181,10 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
181181
<a class="nav-link" href="#">Pricing</a>
182182
</li>
183183
<li class="nav-item dropdown">
184-
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
184+
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
185185
Dropdown link
186186
</a>
187-
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
187+
<div class="dropdown-menu">
188188
<a class="dropdown-item" href="#">Action</a>
189189
<a class="dropdown-item" href="#">Another action</a>
190190
<a class="dropdown-item" href="#">Something else here</a>
@@ -461,10 +461,10 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="max-height: 100
461461
<a class="nav-link" href="#">Link</a>
462462
</li>
463463
<li class="nav-item dropdown">
464-
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
464+
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
465465
Link
466466
</a>
467-
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
467+
<ul class="dropdown-menu">
468468
<li><a class="dropdown-item" href="#">Action</a></li>
469469
<li><a class="dropdown-item" href="#">Another action</a></li>
470470
<li><hr class="dropdown-divider"></li>

‎site/content/docs/4.6/examples/jumbotron/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
<a class="nav-link disabled">Disabled</a>
2424
</li>
2525
<li class="nav-item dropdown">
26-
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
27-
<div class="dropdown-menu" aria-labelledby="dropdown01">
26+
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
27+
<div class="dropdown-menu">
2828
<a class="dropdown-item" href="#">Action</a>
2929
<a class="dropdown-item" href="#">Another action</a>
3030
<a class="dropdown-item" href="#">Something else here</a>

‎site/content/docs/4.6/examples/navbar-bottom/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ <h1>Bottom Navbar example</h1>
2727
<a class="nav-link disabled">Disabled</a>
2828
</li>
2929
<li class="nav-item dropup">
30-
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-expanded="false">Dropup</a>
31-
<div class="dropdown-menu" aria-labelledby="dropdown10">
30+
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Dropup</a>
31+
<div class="dropdown-menu">
3232
<a class="dropdown-item" href="#">Action</a>
3333
<a class="dropdown-item" href="#">Another action</a>
3434
<a class="dropdown-item" href="#">Something else here</a>

0 commit comments

Comments
 (0)