Remove incorrect aria-haspopup from dropdown toggles

`aria-haspopup` use requires the use of an ARIA `menu`, `listbox`, `tree`, `grid` or `dialog` (see https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup)

in our use (as generic disclosure widgets), it's incorrect and sets up the wrong assumption/behavior from assistive technologies.

in future, we likely want to change our dropdowns to essentially be like a `dialog` - move focus to it when opened, possibly make it modal so focus is maintained inside it and the rest of the page is hidden/inert.

but for now, removing the incorrect attribute is probably the quickest, most immediate fix.

js/tests/unit/dropdown.js

@@ -727,7 +727,7 @@ $(function () {
     var done = assert.async()
     var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">' +
         '<div class="dropdown">' +
-        '  <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>' +
+        '  <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a>' +
         '  <div class="dropdown-menu" aria-labelledby="dropdown">' +
         '    <a class="dropdown-item" href="#">Action</a>' +
         '    <a class="dropdown-item" href="#">Another action</a>' +

js/tests/visual/dropdown.html

@@ -28,7 +28,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+              <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
               <div class="dropdown-menu" aria-labelledby="dropdown">
                 <a class="dropdown-item" href="#">Action</a>
                 <a class="dropdown-item" href="#">Another action</a>
@@ -50,7 +50,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
           <div class="dropdown-menu" aria-labelledby="dropdown2">
             <a class="dropdown-item" href="#">Action</a>
             <a class="dropdown-item" href="#">Another action</a>
@@ -63,7 +63,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup">
             <button type="button" class="btn btn-secondary">Dropup split</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
               <span class="sr-only">Dropup split</span>
             </button>
             <div class="dropdown-menu">
@@ -74,7 +74,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
 
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropup</button>
             <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Action</a>
               <a class="dropdown-item" href="#">Another action</a>
@@ -83,7 +83,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
 
           <div class="btn-group">
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
               This dropdown's menu is right-aligned
             </button>
             <div class="dropdown-menu dropdown-menu-right">
@@ -97,7 +97,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup" role="group">
             <a href="#" class="btn btn-secondary">Dropup split align right</a>
-            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
               <span class="sr-only">Product actions</span>
             </button>
             <div class="dropdown-menu dropdown-menu-right">
@@ -107,7 +107,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup align right</button>
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropup align right</button>
             <div class="dropdown-menu dropdown-menu-right">
               <button class="dropdown-item" type="button">Action</button>
               <button class="dropdown-item" type="button">Another action</button>
@@ -119,7 +119,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropright" role="group">
             <a href="#" class="btn btn-secondary">Dropright split</a>
-            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
               <span class="sr-only">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -129,7 +129,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropright">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-expanded="false">
               Dropright
             </button>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
@@ -141,7 +141,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           <!-- dropleft -->
           <div class="btn-group dropleft" role="group">
             <a href="#" class="btn btn-secondary">Dropleft split</a>
-            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
               <span class="sr-only">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -151,7 +151,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropleft">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-expanded="false">
               Dropleft
             </button>
             <div class="dropdown-menu" aria-labelledby="dropleftMenu">
@@ -177,7 +177,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
         <div class="col-sm-3 mt-4">
           <div class="btn-group dropdown">
             <button type="button" class="btn btn-secondary">Dropdown reference</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
+            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
               <span class="sr-only">Dropdown split</span>
             </button>
             <div class="dropdown-menu">
@@ -189,7 +189,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
         </div>
         <div class="col-sm-3 mt-4">
           <div class="dropdown">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-display="static" aria-expanded="false">
               Dropdown menu without Popper.js
             </button>
             <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

js/tests/visual/scrollspy.html

@@ -24,7 +24,7 @@
             <a class="nav-link" href="#mdo">@mdo</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
             <div class="dropdown-menu" aria-labelledby="dropdown">
               <a class="dropdown-item" href="#one">One</a>
               <a class="dropdown-item" href="#two">Two</a>

js/tests/visual/tab.html

@@ -25,7 +25,7 @@ <h4>Tabs without fade</h4>
           <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
           <div class="dropdown-menu" aria-labelledby="dropdown">
             <a class="dropdown-item" data-toggle="tab" href="#fat" role="tab">@fat</a>
             <a class="dropdown-item" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
@@ -62,7 +62,7 @@ <h4>Tabs with fade</h4>
           <a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
           <div class="dropdown-menu" aria-labelledby="dropdown2">
             <a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">@fat</a>
             <a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
@@ -99,7 +99,7 @@ <h4>Tabs without fade (no initially active pane)</h4>
           <a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a class="nav-link dropdown-toggle" href="#" id="dropdown3" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
           <div class="dropdown-menu" aria-labelledby="dropdown3">
             <a class="dropdown-item" data-toggle="tab" href="#fat3" role="tab">@fat</a>
             <a class="dropdown-item" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
@@ -136,7 +136,7 @@ <h4>Tabs with fade (no initially active pane)</h4>
           <a class="nav-link" data-toggle="tab" href="#profile4" role="tab">Profile</a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a class="nav-link dropdown-toggle" href="#" id="dropdown4" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
           <div class="dropdown-menu" aria-labelledby="dropdown4">
             <a class="dropdown-item" data-toggle="tab" href="#fat4" role="tab">@fat</a>
             <a class="dropdown-item" data-toggle="tab" href="#mdo4" role="tab">@mdo</a>
@@ -168,7 +168,7 @@ <h4>Tabs with nav (with fade)</h4>
         <a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a>
         <a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a>
         <div class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
           <div class="dropdown-menu" aria-labelledby="dropdown5">
             <a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a>
             <a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a>

site/_includes/docs-navbar.html

@@ -28,7 +28,7 @@
 
   <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
     <li class="nav-item dropdown">
-      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
         v{{ site.docs_version }}
       </a>
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">

site/docs/4.3/components/button-group.md

@@ -127,7 +127,7 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
   <button type="button" class="btn btn-secondary">2</button>
 
   <div class="btn-group" role="group">
-    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
       Dropdown
     </button>
     <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
@@ -160,7 +160,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
     <button type="button" class="btn btn-secondary">Button</button>
     <button type="button" class="btn btn-secondary">Button</button>
     <div class="btn-group" role="group">
-      <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Dropdown
       </button>
       <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
@@ -171,7 +171,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
     <button type="button" class="btn btn-secondary">Button</button>
     <button type="button" class="btn btn-secondary">Button</button>
     <div class="btn-group" role="group">
-      <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Dropdown
       </button>
       <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
@@ -180,7 +180,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
       </div>
     </div>
     <div class="btn-group" role="group">
-      <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Dropdown
       </button>
       <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
@@ -189,7 +189,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
       </div>
     </div>
     <div class="btn-group" role="group">
-      <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Dropdown
       </button>
       <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">