Merge 23a9a751fea86b6ab04aaae476a71c62bc84258b into 815af314f34add7b0a3012b703fc95884968a95e

js/tests/unit/tab.spec.js

@@ -376,17 +376,17 @@ describe('Tab', () => {
           '<ul class="nav nav-tabs" role="tablist">',
           '  <li class="nav-item" role="presentation">',
           '    <a class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">',
-          '      <button class="btn-close" aria-label="Close"></button>',
+          '      <button class="btn-close"><span class="visually-hidden">Close</span></button>',
           '    </a>',
           '  </li>',
           '  <li class="nav-item" role="presentation">',
           '    <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-bs-toggle="tab">',
-          '      <button class="btn-close" aria-label="Close"></button>',
+          '      <button class="btn-close"><span class="visually-hidden">Close</span></button>',
           '    </a>',
           '  </li>',
           '  <li class="nav-item" role="presentation">',
           '    <a class="nav-link nav-tab" href="#references" role="tab" data-bs-toggle="tab">',
-          '      <button id="btnClose" class="btn-close" aria-label="Close"></button>',
+          '      <button id="btnClose"><span class="visually-hidden">Close</span></button>',
           '    </a>',
           '  </li>',
           '</ul>',

js/tests/unit/toast.spec.js

@@ -66,7 +66,7 @@ describe('Toast', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [
           '<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
-          '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
+          '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>',
           '</div>'
         ].join('')
 
@@ -99,7 +99,7 @@ describe('Toast', () => {
 
       fixtureEl.innerHTML = [
         '<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
-        '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
+        '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>',
         '</div>'
       ].join('')
 

js/tests/visual/alert.html

@@ -11,12 +11,12 @@
       <h1>Alert <small>Bootstrap Visual Test</small></h1>
 
       <div class="alert alert-warning alert-dismissible fade show" role="alert">
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         <strong>Holy guacamole!</strong> You should check in on some of those fields below.
       </div>
 
       <div class="alert alert-danger alert-dismissible fade show" role="alert">
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         <p>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
         </p>
@@ -27,7 +27,7 @@
       </div>
 
       <div class="alert alert-danger alert-dismissible fade show" role="alert">
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         <p>
           <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
         </p>
@@ -38,7 +38,7 @@
       </div>
 
       <div class="alert alert-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         This alert will take 5 seconds to fade out.
       </div>
     </div>

js/tests/visual/modal.html

@@ -43,7 +43,7 @@
           <div class="modal-content">
             <div class="modal-header">
               <h1 class="modal-title fs-4" id="myModalLabel">Modal title</h1>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
             </div>
             <div class="modal-body">
               <h4>Text in a modal</h4>
@@ -128,7 +128,7 @@
           <div class="modal-content">
             <div class="modal-header">
               <h1 class="modal-title fs-4" id="firefoxModalLabel">Firefox Bug Test</h1>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
             </div>
             <div class="modal-body">
               <ol>
@@ -152,7 +152,7 @@
           <div class="modal-content">
             <div class="modal-header">
               <h1 class="modal-title fs-4" id="slowModalLabel">Lorem slowly</h1>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
             </div>
             <div class="modal-body">
               <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>

js/tests/visual/toast.html

@@ -42,7 +42,7 @@
           <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">2 seconds ago</small>
-          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="toast-body">
           Heads up, toasts will stack automatically

site/src/assets/examples/cheatsheet/index.astro

@@ -654,7 +654,7 @@ export const body_class = 'bg-body-tertiary'
         <Example showMarkup={false} code={getData('theme-colors').map((themeColor) => `
         <div class="alert alert-${themeColor.name} alert-dismissible fade show" role="alert">
           A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
         </div>
         `)} />
 
@@ -1462,7 +1462,7 @@ export const body_class = 'bg-body-tertiary'
             <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
             <strong class="me-auto">Bootstrap</strong>
             <small class="text-body-secondary">11 mins ago</small>
-            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
           </div>
           <div class="toast-body">
             Hello, world! This is a toast message.
@@ -1495,7 +1495,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -1512,7 +1512,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>I will not close if you click outside me. Don't even try to press escape key.</p>
@@ -1529,7 +1529,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
@@ -1548,7 +1548,7 @@ export const body_class = 'bg-body-tertiary'
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...

site/src/assets/examples/dashboard/index.astro

@@ -84,7 +84,7 @@ export const extra_js = [
       <div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
           <ul class="nav flex-column">

site/src/assets/examples/jumbotrons/index.astro

@@ -40,7 +40,7 @@ export const extra_css = ['jumbotrons.css']
 
 <div class="container my-5">
   <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
-    <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
+    <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill"><span class="visually-hidden">Close</span></button>
     <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
     <h1 class="text-body-emphasis">Placeholder jumbotron</h1>
     <p class="col-lg-6 mx-auto mb-4">

site/src/assets/examples/modals/index.astro

@@ -35,7 +35,7 @@ export const extra_css = ['modals.css']
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header border-bottom-0">
         <h1 class="modal-title fs-5">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body py-0">
         <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
@@ -109,7 +109,7 @@ export const extra_css = ['modals.css']
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header p-5 pb-4 border-bottom-0">
         <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
 
       <div class="modal-body p-5 pt-0">

site/src/assets/examples/navbars-offcanvas/index.astro

@@ -15,7 +15,7 @@ export const extra_css = ['navbars-offcanvas.css']
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@@ -57,7 +57,7 @@ export const extra_css = ['navbars-offcanvas.css']
       <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">Offcanvas</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@@ -99,7 +99,7 @@ export const extra_css = ['navbars-offcanvas.css']
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">

site/src/assets/examples/product/index.astro

@@ -28,7 +28,7 @@ export const extra_css = ['product.css']
     <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
       <div class="offcanvas-header">
         <h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="offcanvas-body">
         <ul class="navbar-nav flex-grow-1 justify-content-between">

site/src/assets/partials/snippets.js

@@ -82,7 +82,7 @@ export default () => {
     wrapper.innerHTML = [
       `<div class="alert alert-${type} alert-dismissible" role="alert">`,
       `   <div>${message}</div>`,
-      '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
+      '   <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>',
       '</div>'
     ].join('')
 

site/src/components/header/Navigation.astro

@@ -73,8 +73,7 @@ const { addedIn, layout, title } = Astro.props
           type="button"
           class="btn-close btn-close-white"
           data-bs-dismiss="offcanvas"
-          aria-label="Close"
+          data-bs-target="#bdNavbar"><span class="visually-hidden">Close</span></button>
-          data-bs-target="#bdNavbar"></button>
       </div>
 
       <div class="offcanvas-body p-4 pt-0 p-lg-0">

site/src/components/shortcodes/JsDismiss.astro

@@ -15,7 +15,7 @@ const { name } = Astro.props
 </p>
 
 <Code
-  code={`<button type="button" class="btn-close" data-bs-dismiss="${name}" aria-label="Close"></button>`}
+  code={`<button type="button" class="btn-close" data-bs-dismiss="${name}"><span class="visually-hidden">Close</span></button>`}
   lang="html"
 />
 
@@ -24,6 +24,6 @@ const { name } = Astro.props
 </p>
 
 <Code
-  code={`<button type="button" class="btn-close" data-bs-dismiss="${name}" data-bs-target="#my-${name}" aria-label="Close"></button>`}
+  code={`<button type="button" class="btn-close" data-bs-dismiss="${name}" data-bs-target="#my-${name}"><span class="visually-hidden">Close</span></button>`}
   lang="html"
 />

site/src/content/docs/components/alerts.mdx

@@ -115,7 +115,7 @@ You can see this in action with a live demo:
 
 <Example code={`<div class="alert alert-warning alert-dismissible fade show" role="alert">
     <strong>Holy guacamole!</strong> You should check in on some of those fields below.
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    <button type="button" class="btn-close" data-bs-dismiss="alert"><span class="visually-hidden">Close</span></button>
   </div>`} />
 
 <Callout type="warning">

site/src/content/docs/components/close-button.mdx

@@ -8,13 +8,13 @@ toc: true
 
 Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `background-image`. **Be sure to include text for screen readers**, as we’ve done with `aria-label`.
 
-<Example code={`<button type="button" class="btn-close" aria-label="Close"></button>`} />
+<Example code={`<button type="button" class="btn-close"><span class="visually-hidden">Close</span></button>`} />
 
 ## Disabled state
 
 Disabled close buttons change their `opacity`. We’ve also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
 
-<Example code={`<button type="button" class="btn-close" disabled aria-label="Close"></button>`} />
+<Example code={`<button type="button" class="btn-close" disabled><span class="visually-hidden">Close</span></button>`} />
 
 ## Dark variant
 
@@ -27,8 +27,8 @@ Disabled close buttons change their `opacity`. We’ve also applied `pointer-eve
 Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
 
 <Example class="bg-dark" code={`<div data-bs-theme="dark">
-    <button type="button" class="btn-close" aria-label="Close"></button>
+    <button type="button" class="btn-close"><span class="visually-hidden">Close</span></button>
-    <button type="button" class="btn-close" disabled aria-label="Close"></button>
+    <button type="button" class="btn-close" disabled><span class="visually-hidden">Close</span></button>
   </div>`} />
 
 ## CSS

site/src/content/docs/components/modal.mdx

@@ -40,7 +40,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title">Modal title</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <p>Modal body text goes here.</p>
@@ -60,7 +60,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">Modal title</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>Modal body text goes here.</p>
@@ -87,7 +87,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalLiveLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>Woo-hoo, you’re reading this text in a modal!</p>
@@ -116,7 +116,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -139,7 +139,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>I will not close if you click outside of me. Don’t even try to press escape key.</p>
@@ -168,7 +168,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -191,7 +191,7 @@ When modals become too long for the user’s viewport or device, they scroll ind
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body" style="min-height: 100vh">
         <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
@@ -215,7 +215,7 @@ You can also create a scrollable modal that allows scrolling the modal body by a
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="exampleModalScrollableTitle">Modal title</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
@@ -250,7 +250,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalCenterTitle">Modal title</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <p>This is a vertically centered modal.</p>
@@ -268,7 +268,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <p>This is some placeholder content to show a vertically centered modal. We’ve added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
@@ -307,7 +307,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalPopoversLabel">Modal title</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <h2 class="fs-5">Popover in a modal</h2>
@@ -345,7 +345,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-5" id="gridModalLabel">Grids in modals</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         <div class="container-fluid bd-example-row">
@@ -433,7 +433,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           <form>
@@ -466,7 +466,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           Show a second modal and hide this one with the button below.
@@ -482,7 +482,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
       <div class="modal-content">
         <div class="modal-header">
           <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="modal-body">
           Hide this modal and show the first with the button below.
@@ -553,7 +553,7 @@ Our default modal without modifier class constitutes the “medium” size modal
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalXlLabel">Extra large modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -567,7 +567,7 @@ Our default modal without modifier class constitutes the “medium” size modal
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalLgLabel">Large modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -581,7 +581,7 @@ Our default modal without modifier class constitutes the “medium” size modal
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalSmLabel">Small modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -624,7 +624,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -641,7 +641,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenSmLabel">Full screen below sm</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -658,7 +658,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenMdLabel">Full screen below md</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -675,7 +675,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenLgLabel">Full screen below lg</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -692,7 +692,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenXlLabel">Full screen below xl</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...
@@ -709,7 +709,7 @@ Another override is the option to pop up a modal that covers the user viewport,
     <div class="modal-content">
       <div class="modal-header">
         <h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="modal-body">
         ...

site/src/content/docs/components/navbar.mdx

@@ -635,7 +635,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
       <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@@ -693,7 +693,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
         <div class="offcanvas-header">
           <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="offcanvas-body">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">

site/src/content/docs/components/offcanvas.mdx

@@ -26,7 +26,7 @@ Below is an offcanvas example that is shown by default (via `.show` on `.offcanv
 <Example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" code={`<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
@@ -52,7 +52,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
   <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <div>
@@ -80,7 +80,7 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
   <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <p>Try scrolling the rest of the page to see this option in action.</p>
@@ -96,7 +96,7 @@ You can also enable `<body>` scrolling with a visible backdrop.
   <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <p>Try scrolling the rest of the page to see this option in action.</p>
@@ -114,7 +114,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
   <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <div>
@@ -136,7 +136,7 @@ Change the appearance of offcanvases with utilities to better match them to diff
 <Example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" code={`<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
-      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
+      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <p>Place offcanvas content here.</p>
@@ -165,7 +165,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo
   <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
@@ -174,7 +174,7 @@ To make a responsive offcanvas, replace the `.offcanvas` base class with a respo
 
 ## Placement
 
-There’s no default placement for offcanvas components, so you must add one of the modifier classes below.
+There's no default placement for offcanvas components, so you must add one of the modifier classes below.
 
 - `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
 - `.offcanvas-end` places offcanvas on the right of the viewport
@@ -188,7 +188,7 @@ Try the top, right, and bottom examples out below.
   <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       ...
@@ -200,7 +200,7 @@ Try the top, right, and bottom examples out below.
   <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body">
       ...
@@ -212,7 +212,7 @@ Try the top, right, and bottom examples out below.
   <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
-      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="offcanvas-body small">
       ...

site/src/content/docs/components/toasts.mdx

@@ -28,7 +28,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
@@ -49,7 +49,7 @@ Click the button below to show a toast (positioned with our utilities in the low
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
@@ -70,7 +70,7 @@ Click the button below to show a toast (positioned with our utilities in the low
       <img src="..." class="rounded me-2" alt="...">
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
@@ -92,7 +92,7 @@ Toasts are slightly translucent to blend in with what’s below them.
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
       <small class="text-body-secondary">11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.
@@ -109,7 +109,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
         <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
         <strong class="me-auto">Bootstrap</strong>
         <small class="text-body-secondary">just now</small>
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="toast-body">
         See? Just like this.
@@ -121,7 +121,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
         <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
         <strong class="me-auto">Bootstrap</strong>
         <small class="text-body-secondary">2 seconds ago</small>
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="toast-body">
         Heads up, toasts will stack automatically
@@ -138,7 +138,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]
       <div class="toast-body">
         Hello, world! This is a toast message.
       </div>
-      <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
   </div>`} />
 
@@ -163,7 +163,7 @@ Building on the above example, you can create different toast color schemes with
       <div class="toast-body">
         Hello, world! This is a toast message.
       </div>
-      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
   </div>`} />
 
@@ -218,7 +218,7 @@ For systems that generate more notifications, consider using a wrapping element
           <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">just now</small>
-          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="toast-body">
           See? Just like this.
@@ -230,7 +230,7 @@ For systems that generate more notifications, consider using a wrapping element
           <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">2 seconds ago</small>
-          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
         </div>
         <div class="toast-body">
           Heads up, toasts will stack automatically
@@ -250,7 +250,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
         <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
         <strong class="me-auto">Bootstrap</strong>
         <small>11 mins ago</small>
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
       </div>
       <div class="toast-body">
         Hello, world! This is a toast message.
@@ -281,7 +281,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
       <small>11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+      <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>
     </div>
     <div class="toast-body">
       Hello, world! This is a toast message.

site/src/layouts/DocsLayout.astro

@@ -39,8 +39,7 @@ if (frontmatter.toc) {
             type="button"
             class="btn-close"
             data-bs-dismiss="offcanvas"
-            aria-label="Close"
+            data-bs-target="#bdSidebar"><span class="visually-hidden">Close</span></button>
-            data-bs-target="#bdSidebar"></button>
         </div>
 
         <div class="offcanvas-body">