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

Commit

Permalink
feat(dropdown): add accessibility attributes
Browse files Browse the repository at this point in the history 
- Add accessibility attributes in documentation examples

Closes #3951
  • Loading branch information
@paulorbpacheco @wesleycho
paulorbpacheco authored and wesleycho committed Jul 19, 2015
1 parent 9c2a8db commit 14689e0
Showing 1 changed file with 34 additions and 34 deletions.
68 changes: 34 additions & 34 deletions src/dropdown/docs/demo.html
View file
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>

0 comments on commit 14689e0

Please sign in to comment.