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

Added ARIA acessibility menuitem into list itens of dropdown demo #3951

Closed
wants to merge 2 commits into from
Closed

Added ARIA acessibility menuitem into list itens of dropdown demo #3951

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fab76a3
Added ARIA acessibility menuitem into list itens of dropdown demo
paulorbpacheco Jul 15, 2015
56aeb7a
All the indentation changes were undone.
paulorbpacheco Jul 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 34 additions & 34 deletions src/dropdown/docs/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<div ng-controller="DropdownCtrl">
<!-- Simple dropdown -->
<span class="dropdown" dropdown on-toggle="toggled(open)">
<a href class="dropdown-toggle" dropdown-toggle>
<a href id="simple-dropdown" class="dropdown-toggle" dropdown-toggle>
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="simple-dropdown">
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
Expand All @@ -14,54 +14,54 @@

<!-- 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 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">
<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="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><a href="#">Separated link</a></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>

<!-- Split button -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<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">
<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="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><a href="#">Separated link</a></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</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>
<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">
<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="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><a href="#">Separated link</a></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">
<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">
<ul class="dropdown-menu" template-url="dropdown.html" aria-labelledby="button-template-url">
</ul>
</div>

Expand All @@ -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>
<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><a href="#">Separated link in Template</a></li>
<li role="menuitem"><a href="#">Separated link in Template</a></li>
</ul>
</script>
</div>