Accessibility Improvement: Close buttons to use visually-hidden text instead of aria-labels

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 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
       </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 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1>
       </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 @@ <h1>Modal <small>Bootstrap Visual Test</small></h1>
           <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 @@ <h4>Overflowing text to show scroll behavior</h4>
           <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 @@ <h1 class="modal-title fs-4" id="firefoxModalLabel">Firefox Bug Test</h1>
           <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 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
           <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>
         `)} />
 
@@ -1463,7 +1463,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.
@@ -1496,7 +1496,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">
         ...
@@ -1513,7 +1513,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>
@@ -1530,7 +1530,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>
@@ -1549,7 +1549,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"></button>
+          data-bs-target="#bdNavbar"><span class="visually-hidden">Close</span></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" disabled aria-label="Close"></button>
+    <button type="button" class="btn-close"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close" disabled><span class="visually-hidden">Close</span></button>
   </div>`} />
 
 ## CSS