-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Added ARIA acessibility menuitem into list itens of dropdown demo #3951
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,67 +2,67 @@ | |
<div ng-controller="DropdownCtrl"> | ||
<!-- Simple dropdown --> | ||
<span class="dropdown" dropdown on-toggle="toggled(open)"> | ||
<a href class="dropdown-toggle" dropdown-toggle> | ||
Click me for a dropdown, yo! | ||
<a href id="simple-dropdown" class="dropdown-toggle" dropdown-toggle> | ||
Click me for a dropdown, yo! | ||
</a> | ||
<ul class="dropdown-menu"> | ||
<li ng-repeat="choice in items"> | ||
<a href>{{choice}}</a> | ||
</li> | ||
<ul class="dropdown-menu" aria-labelledby="simple-dropdown"> | ||
<li ng-repeat="choice in items"> | ||
<a href>{{choice}}</a> | ||
</li> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Undo indentation change in lines 9-11 |
||
</ul> | ||
</span> | ||
|
||
<!-- Single button --> | ||
<div class="btn-group" dropdown is-open="status.isopen"> | ||
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"> | ||
Button dropdown <span class="caret"></span> | ||
</button> | ||
<ul class="dropdown-menu" role="menu"> | ||
<li><a href="#">Action</a></li> | ||
<li><a href="#">Another action</a></li> | ||
<li><a href="#">Something else here</a></li> | ||
<li class="divider"></li> | ||
<li><a href="#">Separated link</a></li> | ||
</ul> | ||
<button id="single-button" type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"> | ||
Button dropdown <span class="caret"></span> | ||
</button> | ||
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button"> | ||
<li role="menuitem"><a href="#">Action</a></li> | ||
<li role="menuitem"><a href="#">Another action</a></li> | ||
<li role="menuitem"><a href="#">Something else here</a></li> | ||
<li class="divider"></li> | ||
<li role="menuitem"><a href="#">Separated link</a></li> | ||
</ul> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Undo all indentation change from lines 17 to 26. |
||
</div> | ||
|
||
<!-- Split button --> | ||
<div class="btn-group" dropdown> | ||
<button type="button" class="btn btn-danger">Action</button> | ||
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> | ||
<span class="caret"></span> | ||
<span class="sr-only">Split button!</span> | ||
</button> | ||
<ul class="dropdown-menu" role="menu"> | ||
<li><a href="#">Action</a></li> | ||
<li><a href="#">Another action</a></li> | ||
<li><a href="#">Something else here</a></li> | ||
<li class="divider"></li> | ||
<li><a href="#">Separated link</a></li> | ||
</ul> | ||
<button id="split-button" type="button" class="btn btn-danger">Action</button> | ||
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> | ||
<span class="caret"></span> | ||
<span class="sr-only">Split button!</span> | ||
</button> | ||
<ul class="dropdown-menu" role="menu" aria-labelledby="split-button"> | ||
<li role="menuitem"><a href="#">Action</a></li> | ||
<li role="menuitem"><a href="#">Another action</a></li> | ||
<li role="menuitem"><a href="#">Something else here</a></li> | ||
<li class="divider"></li> | ||
<li role="menuitem"><a href="#">Separated link</a></li> | ||
</ul> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Undo all indentation changes from lines 31-42 |
||
</div> | ||
|
||
<!-- Single button using append-to-body --> | ||
<div class="btn-group" dropdown dropdown-append-to-body> | ||
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle> | ||
Dropdown on Body <span class="caret"></span> | ||
</button> | ||
<ul class="dropdown-menu" role="menu"> | ||
<li><a href="#">Action</a></li> | ||
<li><a href="#">Another action</a></li> | ||
<li><a href="#">Something else here</a></li> | ||
<li class="divider"></li> | ||
<li><a href="#">Separated link</a></li> | ||
</ul> | ||
<button id="btn-append-to-body" type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle> | ||
Dropdown on Body <span class="caret"></span> | ||
</button> | ||
<ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body"> | ||
<li role="menuitem"><a href="#">Action</a></li> | ||
<li role="menuitem"><a href="#">Another action</a></li> | ||
<li role="menuitem"><a href="#">Something else here</a></li> | ||
<li class="divider"></li> | ||
<li role="menuitem"><a href="#">Separated link</a></li> | ||
</ul> | ||
</div> | ||
|
||
<!-- Single button using template-url --> | ||
<div class="btn-group" dropdown> | ||
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"> | ||
Dropdown using template <span class="caret"></span> | ||
</button> | ||
<ul class="dropdown-menu" template-url="dropdown.html"> | ||
</ul> | ||
<button id="button-template-url" type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"> | ||
Dropdown using template <span class="caret"></span> | ||
</button> | ||
<ul class="dropdown-menu" template-url="dropdown.html" aria-labelledby="button-template-url"> | ||
</ul> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ditto with indentation changes. |
||
</div> | ||
|
||
<hr /> | ||
|
@@ -74,25 +74,25 @@ | |
<hr> | ||
<!-- Single button with keyboard nav --> | ||
<div class="btn-group" dropdown keyboard-nav> | ||
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle> | ||
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle> | ||
Dropdown with keyboard navigation <span class="caret"></span> | ||
</button> | ||
<ul class="dropdown-menu" role="menu"> | ||
<li><a href="#">Action</a></li> | ||
<li><a href="#">Another action</a></li> | ||
<li><a href="#">Something else here</a></li> | ||
<ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav"> | ||
<li role="menuitem"><a href="#">Action</a></li> | ||
<li role="menuitem"><a href="#">Another action</a></li> | ||
<li role="menuitem"><a href="#">Something else here</a></li> | ||
<li class="divider"></li> | ||
<li><a href="#">Separated link</a></li> | ||
<li role="menuitem"><a href="#">Separated link</a></li> | ||
</ul> | ||
</div> | ||
|
||
<script type="text/ng-template" id="dropdown.html"> | ||
<ul class="dropdown-menu" role="menu"> | ||
<li><a href="#">Action in Template</a></li> | ||
<li><a href="#">Another action in Template</a></li> | ||
<li><a href="#">Something else here</a></li> | ||
<li class="divider"></li> | ||
<li><a href="#">Separated link in Template</a></li> | ||
<script type="text/ng-template" id="dropdown.html"> | ||
<ul class="dropdown-menu" role="menu" aria-labelledby="button-template-url"> | ||
<li role="menuitem"><a href="#">Action in Template</a></li> | ||
<li role="menuitem"><a href="#">Another action in Template</a></li> | ||
<li role="menuitem"><a href="#">Something else here</a></li> | ||
<li class="divider"></li> | ||
<li role="menuitem"><a href="#">Separated link in Template</a></li> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Undo indentation changes from lines 90-95. |
||
</ul> | ||
</script> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Undo indentation change