Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit 14689e0

Browse files
paulorbpachecowesleycho
paulorbpacheco
authored and
wesleycho
committed
feat(dropdown): add accessibility attributes
- Add accessibility attributes in documentation examples Closes #3951
1 parent 9c2a8db commit 14689e0

File tree

1 file changed

+34
-34
lines changed

1 file changed

+34
-34
lines changed

Diff for: ‎src/dropdown/docs/demo.html

+34-34
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div ng-controller="DropdownCtrl">
33
<!-- Simple dropdown -->
44
<span class="dropdown" dropdown on-toggle="toggled(open)">
5-
<a href class="dropdown-toggle" dropdown-toggle>
5+
<a href id="simple-dropdown" class="dropdown-toggle" dropdown-toggle>
66
Click me for a dropdown, yo!
77
</a>
8-
<ul class="dropdown-menu">
8+
<ul class="dropdown-menu" aria-labelledby="simple-dropdown">
99
<li ng-repeat="choice in items">
1010
<a href>{{choice}}</a>
1111
</li>
@@ -14,54 +14,54 @@
1414

1515
<!-- Single button -->
1616
<div class="btn-group" dropdown is-open="status.isopen">
17-
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
17+
<button id="single-button" type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
1818
Button dropdown <span class="caret"></span>
1919
</button>
20-
<ul class="dropdown-menu" role="menu">
21-
<li><a href="#">Action</a></li>
22-
<li><a href="#">Another action</a></li>
23-
<li><a href="#">Something else here</a></li>
20+
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
21+
<li role="menuitem"><a href="#">Action</a></li>
22+
<li role="menuitem"><a href="#">Another action</a></li>
23+
<li role="menuitem"><a href="#">Something else here</a></li>
2424
<li class="divider"></li>
25-
<li><a href="#">Separated link</a></li>
25+
<li role="menuitem"><a href="#">Separated link</a></li>
2626
</ul>
2727
</div>
2828

2929
<!-- Split button -->
3030
<div class="btn-group" dropdown>
31-
<button type="button" class="btn btn-danger">Action</button>
31+
<button id="split-button" type="button" class="btn btn-danger">Action</button>
3232
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
3333
<span class="caret"></span>
3434
<span class="sr-only">Split button!</span>
3535
</button>
36-
<ul class="dropdown-menu" role="menu">
37-
<li><a href="#">Action</a></li>
38-
<li><a href="#">Another action</a></li>
39-
<li><a href="#">Something else here</a></li>
36+
<ul class="dropdown-menu" role="menu" aria-labelledby="split-button">
37+
<li role="menuitem"><a href="#">Action</a></li>
38+
<li role="menuitem"><a href="#">Another action</a></li>
39+
<li role="menuitem"><a href="#">Something else here</a></li>
4040
<li class="divider"></li>
41-
<li><a href="#">Separated link</a></li>
41+
<li role="menuitem"><a href="#">Separated link</a></li>
4242
</ul>
4343
</div>
4444

4545
<!-- Single button using append-to-body -->
4646
<div class="btn-group" dropdown dropdown-append-to-body>
47-
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
47+
<button id="btn-append-to-body" type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
4848
Dropdown on Body <span class="caret"></span>
4949
</button>
50-
<ul class="dropdown-menu" role="menu">
51-
<li><a href="#">Action</a></li>
52-
<li><a href="#">Another action</a></li>
53-
<li><a href="#">Something else here</a></li>
50+
<ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
51+
<li role="menuitem"><a href="#">Action</a></li>
52+
<li role="menuitem"><a href="#">Another action</a></li>
53+
<li role="menuitem"><a href="#">Something else here</a></li>
5454
<li class="divider"></li>
55-
<li><a href="#">Separated link</a></li>
55+
<li role="menuitem"><a href="#">Separated link</a></li>
5656
</ul>
5757
</div>
5858

5959
<!-- Single button using template-url -->
6060
<div class="btn-group" dropdown>
61-
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
61+
<button id="button-template-url" type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
6262
Dropdown using template <span class="caret"></span>
6363
</button>
64-
<ul class="dropdown-menu" template-url="dropdown.html">
64+
<ul class="dropdown-menu" template-url="dropdown.html" aria-labelledby="button-template-url">
6565
</ul>
6666
</div>
6767

@@ -74,25 +74,25 @@
7474
<hr>
7575
<!-- Single button with keyboard nav -->
7676
<div class="btn-group" dropdown keyboard-nav>
77-
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
77+
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
7878
Dropdown with keyboard navigation <span class="caret"></span>
7979
</button>
80-
<ul class="dropdown-menu" role="menu">
81-
<li><a href="#">Action</a></li>
82-
<li><a href="#">Another action</a></li>
83-
<li><a href="#">Something else here</a></li>
80+
<ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
81+
<li role="menuitem"><a href="#">Action</a></li>
82+
<li role="menuitem"><a href="#">Another action</a></li>
83+
<li role="menuitem"><a href="#">Something else here</a></li>
8484
<li class="divider"></li>
85-
<li><a href="#">Separated link</a></li>
85+
<li role="menuitem"><a href="#">Separated link</a></li>
8686
</ul>
8787
</div>
8888

89-
<script type="text/ng-template" id="dropdown.html">
90-
<ul class="dropdown-menu" role="menu">
91-
<li><a href="#">Action in Template</a></li>
92-
<li><a href="#">Another action in Template</a></li>
93-
<li><a href="#">Something else here</a></li>
89+
<script type="text/ng-template" id="dropdown.html">
90+
<ul class="dropdown-menu" role="menu" aria-labelledby="button-template-url">
91+
<li role="menuitem"><a href="#">Action in Template</a></li>
92+
<li role="menuitem"><a href="#">Another action in Template</a></li>
93+
<li role="menuitem"><a href="#">Something else here</a></li>
9494
<li class="divider"></li>
95-
<li><a href="#">Separated link in Template</a></li>
95+
<li role="menuitem"><a href="#">Separated link in Template</a></li>
9696
</ul>
9797
</script>
9898
</div>

0 commit comments

Comments
 (0)