Skip to content
This repository was 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
Closed
Changes from 1 commit
Commits
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
114 changes: 57 additions & 57 deletions src/dropdown/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Undo indentation change

</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>
Copy link
Contributor

Choose a reason for hiding this comment

The 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>
Copy link
Contributor

Choose a reason for hiding this comment

The 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>
Copy link
Contributor

Choose a reason for hiding this comment

The 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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ditto with indentation changes.

</div>

<hr />
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>
<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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Undo indentation changes from lines 90-95.

</ul>
</script>
</div>