Docs: add missing `role='button'` to `<a>` menus (#42483)

diff --git a/js/tests/unit/menu.spec.js b/js/tests/unit/menu.spec.js
index a560ef66d0270ce69c0e4797bc9a29fdccb25770..108fbd93f04af97d25b3847b4e6f5fd62a7e78ad 100644 (file)
--- a/js/tests/unit/menu.spec.js
+++ b/js/tests/unit/menu.spec.js
@@ -1438,7 +1438,7 @@ describe('Menu', () => {
         fixtureEl.innerHTML = [
           '<div class="nav">',
           '  <div id="testmenu">',
-          '    <a class="btn" data-bs-toggle="menu" href="#testmenu">Test menu</a>',
+          '    <a class="btn" href="#testmenu" role="button" data-bs-toggle="menu" aria-expanded="false">Test menu</a>',
           '    <div class="menu">',
           '      <a class="menu-item" href="#sub1">Submenu 1</a>',
           '    </div>',
@@ -1489,7 +1489,7 @@ describe('Menu', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [
           '<div>',
-          '  <a class="btn" data-bs-toggle="menu" href="#testmenu">Test menu</a>',
+          '  <a class="btn" href="#testmenu" role="button" data-bs-toggle="menu" aria-expanded="false">Test menu</a>',
           '  <div class="menu">',
           '    <a class="menu-item" href="#sub1">Submenu 1</a>',
           '  </div>',

diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 4d0d004481acfd1e75210543690e87ce12c9604a..fba9674d5fd7c1c8cfc53b311b6cfe9648c9634d 100644 (file)
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -897,7 +897,7 @@ describe('Tab', () => {
         '  <li class="nav-item"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
         '  <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>',
         '  <li class="nav-item">',
-        '    <a class="nav-link active" data-bs-toggle="menu" href="#">Menu</a>',
+        '    <a class="nav-link active" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>',
         '    <div class="menu">',
         '      <a class="menu-item active" href="#menu1" id="menu1-tab" data-bs-toggle="tab">@fat</a>',
         '      <a class="menu-item" href="#menu2" id="menu2-tab" data-bs-toggle="tab">@mdo</a>',
@@ -919,7 +919,7 @@ describe('Tab', () => {
         '<ul class="nav nav-tabs" id="nav1">',
         '  <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
         '  <li class="nav-item">',
-        '    <a class="nav-link" data-bs-toggle="menu" href="#">Menu</a>',
+        '    <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>',
         '    <div class="menu">',
         '      <a class="menu-item" href="#menu1" id="menu1-tab" data-bs-toggle="tab">@fat</a>',
         '    </div>',
@@ -930,7 +930,7 @@ describe('Tab', () => {
         '<ul class="nav nav-tabs" id="nav2">',
         '  <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
         '  <li class="nav-item">',
-        '    <a class="nav-link" data-bs-toggle="menu" href="#">Menu</a>',
+        '    <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>',
         '    <div class="menu">',
         '      <a class="menu-item" href="#menu1" id="menu1-tab" data-bs-toggle="tab">@fat</a>',
         '    </div>',
@@ -955,7 +955,7 @@ describe('Tab', () => {
         '  <li class="nav-item"><a class="nav-link active" href="#home" data-bs-toggle="tab">Home</a></li>',
         '  <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>',
         '  <li class="nav-item">',
-        '    <a class="nav-link" data-bs-toggle="menu" href="#">Menu</a>',
+        '    <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>',
         '    <div class="menu">',
         '      <a class="menu-item" href="#menu1" id="menu1-tab" data-bs-toggle="tab">@fat</a>',
         '      <a class="menu-item" href="#menu2" id="menu2-tab" data-bs-toggle="tab">@mdo</a>',

diff --git a/js/tests/visual/menu.html b/js/tests/visual/menu.html
index 1627875815aa0516230af45a53f820bcb8da5b8d..189269c466091545245e0bb41d2126434aefe281 100644 (file)
--- a/js/tests/visual/menu.html
+++ b/js/tests/visual/menu.html
@@ -28,7 +28,7 @@
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>
@@ -50,7 +50,7 @@
           <a class="nav-link" href="#">Link</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+          <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
           <div class="menu">
             <a class="menu-item" href="#">Action</a>
             <a class="menu-item" href="#">Another action</a>

diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 787c67091e550d2c1d5532e4d3dff00636edc915..8dbf24a1f630b7f10425f3825f2b259b87543dd0 100644 (file)
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -24,7 +24,7 @@
             <a class="nav-link" href="#mdo">@mdo</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#one">One</a>
               <a class="menu-item" href="#two">Two</a>

diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index a4d0b6ee117d0cef44df27a7afdae04e8a99bbc1..afa6701f092b2a6c09ba0d722ed42d2cdd2f7e9c 100644 (file)
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -1406,7 +1406,7 @@ export const body_class = 'bg-body-tertiary'
               <a class="nav-link" href="#scrollspyHeading2">Second</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" data-bs-toggle="menu" href="#" role="button" aria-expanded="false">Menu</a>
+              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
               <div class="menu">
                 <a class="menu-item" href="#scrollspyHeading3">Third</a>
                 <a class="menu-item" href="#scrollspyHeading4">Fourth</a>

diff --git a/site/src/assets/examples/drawer-navbar/index.astro b/site/src/assets/examples/drawer-navbar/index.astro
index ac803da2be3e233f42378afdda27578564323614..aa7c909b311634039701454091cf5721cb7b05ee 100644 (file)
--- a/site/src/assets/examples/drawer-navbar/index.astro
+++ b/site/src/assets/examples/drawer-navbar/index.astro
@@ -31,7 +31,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <a class="nav-link" href="#">Switch account</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Settings</a>
+          <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Settings</a>
           <div class="menu">
             <a class="menu-item" href="#">Action</a>
             <a class="menu-item" href="#">Another action</a>

diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro
index e438c1cf637e2d9b9dc7ece96b3643d6827011d8..8d79a826785d4d4d0d631c9f5fd75af592ca8f08 100644 (file)
--- a/site/src/assets/examples/headers/index.astro
+++ b/site/src/assets/examples/headers/index.astro
@@ -136,7 +136,7 @@ export const extra_css = ['headers.css']
         </form>
 
         <div class="text-end">
-          <a href="#" class="d-block link-body-emphasis text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
+          <a class="d-block link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
           <div class="menu text-small">
@@ -156,7 +156,7 @@ export const extra_css = ['headers.css']
   <header class="py-3 mb-3 border-bottom">
     <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
       <div>
-        <a href="#" class="d-flex align-items-center lg:col-4 mb-2 lg:mb-0 link-body-emphasis text-decoration-none" data-bs-toggle="menu" aria-expanded="false" aria-label="Bootstrap menu">
+        <a class="d-flex align-items-center lg:col-4 mb-2 lg:mb-0 link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false" aria-label="Bootstrap menu">
           <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
         </a>
         <div class="menu text-small shadow">
@@ -176,7 +176,7 @@ export const extra_css = ['headers.css']
         </form>
 
         <div class="flex-shrink-0">
-          <a href="#" class="d-block link-body-emphasis text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
+          <a class="d-block link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
             <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
           </a>
           <div class="menu text-small shadow">

diff --git a/site/src/assets/examples/navbar-bottom/index.astro b/site/src/assets/examples/navbar-bottom/index.astro
index 55b5182c975e7cf9dfcb0ecb9b075775e745050b..1683540b304237bda90b0e9c411c3dd5f7e4cfdd 100644 (file)
--- a/site/src/assets/examples/navbar-bottom/index.astro
+++ b/site/src/assets/examples/navbar-bottom/index.astro
@@ -29,7 +29,7 @@ export const title = 'Bottom navbar example'
           <a class="nav-link disabled" aria-disabled="true">Disabled</a>
         </li>
         <li class="nav-item dropup">
-          <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Dropup</a>
+          <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Dropup</a>
           <div class="menu">
             <a class="menu-item" href="#">Action</a>
             <a class="menu-item" href="#">Another action</a>

diff --git a/site/src/assets/examples/navbars/index.astro b/site/src/assets/examples/navbars/index.astro
index 05f76e895b56fcc9ed43d6e90197c2568a93de8a..565cb8c19bd50e1a9dd4dae74bfa0ffffac12c48 100644 (file)
--- a/site/src/assets/examples/navbars/index.astro
+++ b/site/src/assets/examples/navbars/index.astro
@@ -25,7 +25,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#">Action</a>
               <a class="menu-item" href="#">Another action</a>
@@ -82,7 +82,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#">Action</a>
               <a class="menu-item" href="#">Another action</a>
@@ -116,7 +116,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#">Action</a>
               <a class="menu-item" href="#">Another action</a>
@@ -150,7 +150,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#">Action</a>
               <a class="menu-item" href="#">Another action</a>
@@ -184,7 +184,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#">Action</a>
               <a class="menu-item" href="#">Another action</a>
@@ -218,7 +218,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#">Action</a>
               <a class="menu-item" href="#">Another action</a>
@@ -252,7 +252,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#">Action</a>
               <a class="menu-item" href="#">Another action</a>
@@ -286,7 +286,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#">Action</a>
               <a class="menu-item" href="#">Another action</a>
@@ -323,7 +323,7 @@ export const extra_css = ['navbars.css']
             <a class="nav-link disabled" aria-disabled="true">Disabled</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+            <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
             <div class="menu">
               <a class="menu-item" href="#">Action</a>
               <a class="menu-item" href="#">Another action</a>
@@ -355,7 +355,7 @@ export const extra_css = ['navbars.css']
               <a class="nav-link disabled" aria-disabled="true">Disabled</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>
@@ -388,7 +388,7 @@ export const extra_css = ['navbars.css']
               <a class="nav-link disabled" aria-disabled="true">Disabled</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>
@@ -419,7 +419,7 @@ export const extra_css = ['navbars.css']
               <a class="nav-link disabled" aria-disabled="true">Disabled</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="#" data-bs-toggle="menu" aria-expanded="false">Menu</a>
+              <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
               <div class="menu">
                 <a class="menu-item" href="#">Action</a>
                 <a class="menu-item" href="#">Another action</a>

diff --git a/site/src/assets/examples/sidebars/index.astro b/site/src/assets/examples/sidebars/index.astro
index 9f59045a281009b2c43c0de40f9d8afa6db3f757..8fc02bf18a1323225ebf96e6f99ba48fb5b4db34 100644 (file)
--- a/site/src/assets/examples/sidebars/index.astro
+++ b/site/src/assets/examples/sidebars/index.astro
@@ -71,7 +71,7 @@ export const extra_js = [{src: 'sidebars.js'}]
     </ul>
     <hr>
     <div>
-      <a href="#" class="d-flex align-items-center fg-white text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
+      <a class="d-flex align-items-center fg-white text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
@@ -127,7 +127,7 @@ export const extra_js = [{src: 'sidebars.js'}]
     </ul>
     <hr>
     <div>
-      <a href="#" class="d-flex align-items-center fg-body text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
+      <a class="d-flex align-items-center fg-body text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
@@ -176,7 +176,7 @@ export const extra_js = [{src: 'sidebars.js'}]
       </li>
     </ul>
     <div class="border-top">
-      <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
+      <a class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
       </a>
       <div class="menu text-small shadow">

diff --git a/site/src/content/docs/components/nav.mdx b/site/src/content/docs/components/nav.mdx
index 24d3159468a3ad4f62be41a499277e54c5317000..e9725a818c4edfb2abefceac4a0ce3e2c8a3c2a8 100644 (file)
--- a/site/src/content/docs/components/nav.mdx
+++ b/site/src/content/docs/components/nav.mdx
@@ -290,7 +290,7 @@ Add menus with a little extra HTML and the [menus JavaScript plugin]([[docsref:/
       <a class="nav-link active" aria-current="page" href="#">Active</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" data-bs-toggle="menu" href="#" role="button" aria-expanded="false">Menu</a>
+      <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
       <div class="menu">
         <a class="menu-item" href="#">Action</a>
         <a class="menu-item" href="#">Another action</a>
@@ -314,7 +314,7 @@ Add menus with a little extra HTML and the [menus JavaScript plugin]([[docsref:/
       <a class="nav-link active" aria-current="page" href="#">Active</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" data-bs-toggle="menu" href="#" role="button" aria-expanded="false">Menu</a>
+      <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
       <div class="menu">
         <a class="menu-item" href="#">Action</a>
         <a class="menu-item" href="#">Another action</a>

diff --git a/site/src/content/docs/components/scrollspy.mdx b/site/src/content/docs/components/scrollspy.mdx
index e422882eecc8121907ae8adde7cffe3de5742300..eb9afef580b1f42aa516a822938c80e7f2f9e82f 100644 (file)
--- a/site/src/content/docs/components/scrollspy.mdx
+++ b/site/src/content/docs/components/scrollspy.mdx
@@ -33,7 +33,7 @@ Scroll the area below the navbar and watch the active class change. Open the men
         <a class="nav-link" href="#scrollspyHeading2">Second</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" data-bs-toggle="menu" href="#" role="button" aria-expanded="false">Menu</a>
+        <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
         <div class="menu">
           <a class="menu-item" href="#scrollspyHeading3">Third</a>
           <a class="menu-item" href="#scrollspyHeading4">Fourth</a>
@@ -67,7 +67,7 @@ Scroll the area below the navbar and watch the active class change. Open the men
       <a class="nav-link" href="#scrollspyHeading2">Second</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" data-bs-toggle="menu" href="#" role="button" aria-expanded="false">Menu</a>
+      <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
       <div class="menu">
         <a class="menu-item" href="#scrollspyHeading3">Third</a>
         <a class="menu-item" href="#scrollspyHeading4">Fourth</a>