From: Julien Déramond <juderamond@gmail.com>
Date: Sun, 7 Jun 2026 20:00:38 +0000 (+0200)
Subject: Docs: add missing `role='button'` to `<a>` menus (#42483)
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6741944fd64e7a00a7ec090a6822f93ee21f1f74;p=thirdparty%2Fbootstrap.git

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 a560ef66d0..108fbd93f0 100644
--- 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 4d0d004481..fba9674d5f 100644
--- 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 1627875815..189269c466 100644
--- 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 787c67091e..8dbf24a1f6 100644
--- 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 a4d0b6ee11..afa6701f09 100644
--- 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 ac803da2be..aa7c909b31 100644
--- 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 e438c1cf63..8d79a82678 100644
--- 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 55b5182c97..1683540b30 100644
--- 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 05f76e895b..565cb8c19b 100644
--- 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 9f59045a28..8fc02bf18a 100644
--- 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 24d3159468..e9725a818c 100644
--- 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 e422882eec..eb9afef580 100644
--- 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>