generalize dropdowns / drop role="menu"

as role="menu" is a very specific (and strict) ARIA pattern for
desktop-like application menus, and our dropdowns are often used
as pure navigation dropdowns, this change abandons ARIA menus for
a more open-ended and light-weight approach
(see http://heydonworks.com/practical_aria_examples/#submenus and
http://www.w3.org/WAI/tutorials/menus/flyout/#improve-screen-reader-support-using-wai-aria)
note that in dropdown.js, switched to now target ``.dropdown-menu``
instead of ``role["menu"]`` - this also prevents bootstrap scripts
from "bleeding" into non-bootstrap components on the same page.
also removed the ``role=["listbox"]`` part, which appears to be
vestigial/unused (only place in bootstrap that uses that
role are carousels, and their key handling is done separately)

5 files changed, 63 insertions, 63 deletions

diff --git a/js/dropdown.js b/js/dropdown.js
index 8fd86a025..3a89fa61d 100644
--- a/js/dropdown.js
+++ b/js/dropdown.js
@@ -110,7 +110,7 @@
     }
 
     var desc = ' li:not(.disabled):visible a'
-    var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
+    var $items = $parent.find('.dropdown-menu' + desc)
 
     if (!$items.length) return
 
diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index e0d1df970..a55684d52 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -186,7 +186,7 @@ $(function () {
         + '<li><a href="#menu1">Menu 1</a></li>'
         + '<li class="dropdown" id="testmenu">'
         + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
-        + '<ul class="dropdown-menu" role="menu">'
+        + '<ul class="dropdown-menu">'
         + '<li><a href="#sub1">Submenu 1</a></li>'
         + '</ul>'
         + '</li>'
@@ -293,7 +293,7 @@ $(function () {
     var dropdownHTML = '<ul class="tabs">'
         + '<li class="dropdown">'
         + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
-        + '<ul class="dropdown-menu" role="menu">'
+        + '<ul class="dropdown-menu">'
         + '<li><a href="#">Secondary link</a></li>'
         + '<li><a href="#">Something else here</a></li>'
         + '<li class="divider"/>'
@@ -333,7 +333,7 @@ $(function () {
     var dropdownHTML = '<ul class="tabs">'
         + '<li class="dropdown">'
         + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
-        + '<ul class="dropdown-menu" role="menu">'
+        + '<ul class="dropdown-menu">'
         + '<li class="disabled"><a href="#">Disabled link</a></li>'
         + '<li><a href="#">Another link</a></li>'
         + '</ul>'
@@ -355,7 +355,7 @@ $(function () {
     assert.expect(1)
     var dropdownHTML = '<div class="btn-group">'
         + '<button type="button" data-toggle="dropdown">Dropdown</button>'
-        + '<ul class="dropdown-menu" role="menu">'
+        + '<ul class="dropdown-menu">'
         + '<li><input id="textField" type="text" /></li>'
         + '</ul>'
         + '</div>'
@@ -374,7 +374,7 @@ $(function () {
     assert.expect(1)
     var dropdownHTML = '<div class="btn-group">'
         + '<button type="button" data-toggle="dropdown">Dropdown</button>'
-        + '<ul class="dropdown-menu" role="menu">'
+        + '<ul class="dropdown-menu">'
         + '<li><textarea id="textArea"></textarea></li>'
         + '</ul>'
         + '</div>'
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 02090b6cc..f723a0e57 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -36,35 +36,35 @@
       <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
         <ul class="nav navbar-nav">
           <li class="dropdown">
-            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-              <li role="presentation" class="divider"></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+            <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
+            <ul class="dropdown-menu" aria-labelledby="drop1">
+              <li><a href="#">Action</a></li>
+              <li><a href="#">Another action</a></li>
+              <li><a href="#">Something else here</a></li>
+              <li role="separator" class="divider"></li>
+              <li><a href="#">Separated link</a></li>
             </ul>
           </li>
           <li class="dropdown">
-            <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
-            <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-              <li role="presentation" class="divider"></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+            <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 2 <b class="caret"></b></a>
+            <ul class="dropdown-menu" aria-labelledby="drop2">
+              <li><a href="#">Action</a></li>
+              <li><a href="#">Another action</a></li>
+              <li><a href="#">Something else here</a></li>
+              <li role="separator" class="divider"></li>
+              <li><a href="#">Separated link</a></li>
             </ul>
           </li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
           <li id="fat-menu" class="dropdown">
-            <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
-            <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-              <li role="presentation" class="divider"></li>
-              <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+            <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown 3 <b class="caret"></b></a>
+            <ul class="dropdown-menu" aria-labelledby="drop3">
+              <li><a href="#">Action</a></li>
+              <li><a href="#">Another action</a></li>
+              <li><a href="#">Something else here</a></li>
+              <li role="separator" class="divider"></li>
+              <li><a href="#">Separated link</a></li>
             </ul>
           </li>
         </ul>
@@ -75,23 +75,23 @@
   <ul class="nav nav-pills">
     <li class="active"><a href="#">Regular link</a></li>
     <li class="dropdown">
-      <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
-      <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-        <li role="presentation" class="divider"></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+      <a id="drop4" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
+      <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
+        <li role="separator" class="divider"></li>
+        <li><a href="#">Separated link</a></li>
       </ul>
     </li>
     <li class="dropdown">
-      <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
-      <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Another action</a></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Something else here</a></li>
-        <li role="presentation" class="divider"></li>
-        <li role="presentation"><a role="menuitem" tabindex="-1" href="https://twitter.com/fat">Separated link</a></li>
+      <a id="drop5" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Dropdown 2 <b class="caret"></b></a>
+      <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
+        <li><a href="#">Action</a></li>
+        <li><a href="#">Another action</a></li>
+        <li><a href="#">Something else here</a></li>
+        <li role="separator" class="divider"></li>
+        <li><a href="#">Separated link</a></li>
       </ul>
     </li>
   </ul>
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 5952b7e59..580faeccf 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -38,12 +38,12 @@
           <li class=""><a href="#fat">@fat</a></li>
           <li class=""><a href="#mdo">@mdo</a></li>
           <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-            <ul class="dropdown-menu" role="menu">
-              <li class=""><a href="#one" tabindex="-1">one</a></li>
-              <li><a href="#two" tabindex="-1">two</a></li>
-              <li class="divider"></li>
-              <li><a href="#three" tabindex="-1">three</a></li>
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
+            <ul class="dropdown-menu">
+              <li class=""><a href="#one">one</a></li>
+              <li><a href="#two">two</a></li>
+              <li role="separator" class="divider"></li>
+              <li><a href="#three">three</a></li>
             </ul>
           </li>
         </ul>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index a3fed1e9f..a6d44b3b0 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -38,10 +38,10 @@
     <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
     <li><a href="#profile" data-toggle="tab">Profile</a></li>
     <li class="dropdown">
-      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
-        <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
+      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
+      <ul class="dropdown-menu" aria-labelledby="myTabDrop1">
+        <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
+        <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
       </ul>
     </li>
   </ul>
@@ -70,10 +70,10 @@
     <li class="active"><a href="#home1" data-toggle="tab">Home</a></li>
     <li><a href="#profile1" data-toggle="tab">Profile</a></li>
     <li class="dropdown">
-      <a href="#" id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
-        <li><a href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
+      <a href="#" id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
+      <ul class="dropdown-menu" aria-labelledby="myTabDrop2">
+        <li><a href="#dropdown1-1" data-toggle="tab">@fat</a></li>
+        <li><a href="#dropdown1-2" data-toggle="tab">@mdo</a></li>
       </ul>
     </li>
   </ul>
@@ -102,10 +102,10 @@
     <li><a href="#home2" data-toggle="tab">Home</a></li>
     <li><a href="#profile2" data-toggle="tab">Profile</a></li>
     <li class="dropdown">
-      <a href="#" id="myTabDrop3" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
-        <li><a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
+      <a href="#" id="myTabDrop3" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
+      <ul class="dropdown-menu" aria-labelledby="myTabDrop3">
+        <li><a href="#dropdown2-1" data-toggle="tab">@fat</a></li>
+        <li><a href="#dropdown2-2" data-toggle="tab">@mdo</a></li>
       </ul>
     </li>
   </ul>
@@ -134,10 +134,10 @@
     <li><a href="#home3" data-toggle="tab">Home</a></li>
     <li><a href="#profile3" data-toggle="tab">Profile</a></li>
     <li class="dropdown">
-      <a href="#" id="myTabDrop4" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
-        <li><a href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
+      <a href="#" id="myTabDrop4" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
+      <ul class="dropdown-menu" aria-labelledby="myTabDrop4">
+        <li><a href="#dropdown3-1" data-toggle="tab">@fat</a></li>
+        <li><a href="#dropdown3-2" data-toggle="tab">@mdo</a></li>
       </ul>
     </li>
   </ul>