From 14689e058c0a69653debdc7830f938a78439528c Mon Sep 17 00:00:00 2001
From: Paulo Pacheco <paulo.pacheco@softplan.com.br>
Date: Wed, 15 Jul 2015 13:52:41 -0300
Subject: [PATCH] feat(dropdown): add accessibility attributes

- Add accessibility attributes in documentation examples

Closes #3951
---
 src/dropdown/docs/demo.html | 68 ++++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/dropdown/docs/demo.html b/src/dropdown/docs/demo.html
index 9378464610..2e80a3c207 100644
--- a/src/dropdown/docs/demo.html
+++ b/src/dropdown/docs/demo.html
@@ -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>
@@ -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>
 
@@ -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>