Rename `sr-only`/`sr-only-focusable` (#31139)

* Rename `sr-only`/`sr-only-focusable`

To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html
index 0c8dd482e5afac90fa10227fba07d99dd963a42b..901f83d0c3d4dfc068ebb6b09cbce4ebe058a50f 100644 (file)
--- a/js/tests/integration/index.html
+++ b/js/tests/integration/index.html
@@ -48,11 +48,11 @@
           </div>
           <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span class="sr-only">Previous</span>
+            <span class="visually-hidden">Previous</span>
           </a>
           <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
             <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="sr-only">Next</span>
+            <span class="visually-hidden">Next</span>
           </a>
         </div>
       </div>

diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index d66f140531ea940a893d9d05219923d4d8f3bf4a..90d9a036664a9a47ee04d1c2275ce2a8d7616a9f 100644 (file)
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -36,11 +36,11 @@
         </div>
         <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-          <span class="sr-only">Previous</span>
+          <span class="visually-hidden">Previous</span>
         </a>
         <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
-          <span class="sr-only">Next</span>
+          <span class="visually-hidden">Next</span>
         </a>
       </div>
     </div>

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 0b54a125a637e7a123a2576175a9eebfb5ea48d8..a7ceb32e21ab4a2a50c9c59b1599215badd60d87 100644 (file)
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -19,7 +19,7 @@
         <div class="collapse navbar-collapse" id="navbarResponsive">
           <ul class="navbar-nav">
             <li class="nav-item active">
-              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+              <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#">Link</a>
@@ -70,7 +70,7 @@
           <div class="btn-group dropup">
             <button type="button" class="btn btn-secondary">Dropup split</button>
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-              <span class="sr-only">Dropup split</span>
+              <span class="visually-hidden">Dropup split</span>
             </button>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>
@@ -104,7 +104,7 @@
           <div class="btn-group dropup" role="group">
             <a href="#" class="btn btn-secondary">Dropup split align right</a>
             <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-              <span class="sr-only">Product actions</span>
+              <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu dropdown-menu-right">
               <button class="dropdown-item" type="button">Action</button>
@@ -126,7 +126,7 @@
           <div class="btn-group dropright" role="group">
             <a href="#" class="btn btn-secondary">Dropright split</a>
             <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-              <span class="sr-only">Product actions</span>
+              <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
               <button class="dropdown-item" type="button">Action</button>
@@ -148,7 +148,7 @@
           <div class="btn-group dropleft" role="group">
             <a href="#" class="btn btn-secondary">Dropleft split</a>
             <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-              <span class="sr-only">Product actions</span>
+              <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
               <button class="dropdown-item" type="button">Action</button>
@@ -184,7 +184,7 @@
           <div class="btn-group dropdown">
             <button type="button" class="btn btn-secondary">Dropdown reference</button>
             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
-              <span class="sr-only">Dropdown split</span>
+              <span class="visually-hidden">Dropdown split</span>
             </button>
             <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="#">Action</a></li>

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index fa043af00ed29bcf8d19c523cf4c7ada645463f2..b72e8c4ef701c032158f1a73e559e097f205f82b 100644 (file)
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -19,7 +19,7 @@
         <a class="navbar-brand" href="#">This shouldn't jump!</a>
         <ul class="navbar-nav">
           <li class="nav-item active">
-            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+            <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">Link</a>

diff --git a/scss/helpers/_screenreaders.scss b/scss/helpers/_screenreaders.scss
index c8034d10ee51d3dac50ec6ede35e8a4318e2d36b..8bade663395daf10a1d5bdc507aba36c2cae1dd6 100644 (file)
--- a/scss/helpers/_screenreaders.scss
+++ b/scss/helpers/_screenreaders.scss
@@ -2,7 +2,7 @@
 // Screenreaders
 //
 
-.sr-only,
-.sr-only-focusable:not(:focus) {
-  @include sr-only();
+.visually-hidden,
+.visually-hidden-focusable:not(:focus) {
+  @include visually-hidden();
 }

diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss
index b25fe730461b162bdf71663ea84c7ec82e198f16..e5ee63c0949e543f1ba527a01c12807d3660e63e 100644 (file)
--- a/scss/mixins/_screen-reader.scss
+++ b/scss/mixins/_screen-reader.scss
@@ -5,7 +5,7 @@
 // See: https://a11yproject.com/posts/how-to-hide-content/
 // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
-@mixin sr-only {
+@mixin visually-hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
@@ -21,8 +21,8 @@
 //
 // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 
-@mixin sr-only-focusable {
+@mixin visually-hidden-focusable {
   &:not(:focus) {
-    @include sr-only();
+    @include visually-hidden();
   }
 }

diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md
index 5f17b685b61f06701955ad127f94cc8900da058f..475eb75f06e915d7c94529fa6455e2c1f1f495e9 100644 (file)
--- a/site/content/docs/5.0/components/badge.md
+++ b/site/content/docs/5.0/components/badge.md
@@ -34,7 +34,7 @@ Unless the context is clear (as with the "Notifications" example, where it is un
 {{< example >}}
 <button type="button" class="btn btn-primary">
   Profile <span class="badge bg-secondary">9</span>
-  <span class="sr-only">unread messages</span>
+  <span class="visually-hidden">unread messages</span>
 </button>
 {{< /example >}}
 

diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md
index 935779238ca692e5f5a232b645fd04f46baca18a..b0de24cce358e90d79d4efcdb6f4e23ebc8460e8 100644 (file)
--- a/site/content/docs/5.0/components/carousel.md
+++ b/site/content/docs/5.0/components/carousel.md
@@ -63,11 +63,11 @@ Adding in the previous and next controls:
   </div>
   <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="sr-only">Previous</span>
+    <span class="visually-hidden">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="sr-only">Next</span>
+    <span class="visually-hidden">Next</span>
   </a>
 </div>
 {{< /example >}}
@@ -96,11 +96,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
   </div>
   <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="sr-only">Previous</span>
+    <span class="visually-hidden">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="sr-only">Next</span>
+    <span class="visually-hidden">Next</span>
   </a>
 </div>
 {{< /example >}}
@@ -141,11 +141,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
   </div>
   <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="sr-only">Previous</span>
+    <span class="visually-hidden">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="sr-only">Next</span>
+    <span class="visually-hidden">Next</span>
   </a>
 </div>
 {{< /example >}}
@@ -169,11 +169,11 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
   </div>
   <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="sr-only">Previous</span>
+    <span class="visually-hidden">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="sr-only">Next</span>
+    <span class="visually-hidden">Next</span>
   </a>
 </div>
 {{< /example >}}
@@ -197,11 +197,11 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
   </div>
   <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="sr-only">Previous</span>
+    <span class="visually-hidden">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="sr-only">Next</span>
+    <span class="visually-hidden">Next</span>
   </a>
 </div>
 {{< /example >}}

diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index 02f4eaeecbbf69cfd86b15a7748081f3a872cafa..deb86c1fbf403a9f046bbd34301f5c33445e07f2 100644 (file)
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -148,7 +148,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
   <div class="btn-group">
     <button type="button" class="btn btn-primary">Primary</button>
     <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -161,7 +161,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
   <div class="btn-group">
     <button type="button" class="btn btn-secondary">Secondary</button>
     <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -174,7 +174,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
   <div class="btn-group">
     <button type="button" class="btn btn-success">Success</button>
     <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -187,7 +187,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
   <div class="btn-group">
     <button type="button" class="btn btn-info">Info</button>
     <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -200,7 +200,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
   <div class="btn-group">
     <button type="button" class="btn btn-warning">Warning</button>
     <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -213,7 +213,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
   <div class="btn-group">
     <button type="button" class="btn btn-danger">Danger</button>
     <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -230,7 +230,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
 <div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
   <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-    <span class="sr-only">Toggle Dropdown</span>
+    <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action</a></li>
@@ -263,7 +263,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
     <div class="btn-group ml-2">
       <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
       <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-        <span class="sr-only">Toggle Dropdown</span>
+        <span class="visually-hidden">Toggle Dropdown</span>
       </button>
       <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
@@ -290,7 +290,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
     <div class="btn-group ml-2">
       <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
       <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-        <span class="sr-only">Toggle Dropdown</span>
+        <span class="visually-hidden">Toggle Dropdown</span>
       </button>
       <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
@@ -318,7 +318,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
     Large split button
   </button>
   <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-    <span class="sr-only">Toggle Dropdown</span>
+    <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
     ...
@@ -339,7 +339,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
     Small split button
   </button>
   <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-    <span class="sr-only">Toggle Dropdown</span>
+    <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
     ...
@@ -371,7 +371,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
       Split dropup
     </button>
     <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -400,7 +400,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
     Split dropup
   </button>
   <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-    <span class="sr-only">Toggle Dropdown</span>
+    <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
     <!-- Dropdown menu links -->
@@ -430,7 +430,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
       Split dropright
     </button>
     <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropright</span>
+      <span class="visually-hidden">Toggle Dropright</span>
     </button>
     <ul class="dropdown-menu">
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -459,7 +459,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
     Split dropright
   </button>
   <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-    <span class="sr-only">Toggle Dropright</span>
+    <span class="visually-hidden">Toggle Dropright</span>
   </button>
   <ul class="dropdown-menu">
     <!-- Dropdown menu links -->
@@ -487,7 +487,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
   <div class="btn-group">
     <div class="btn-group dropleft" role="group">
       <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-        <span class="sr-only">Toggle Dropleft</span>
+        <span class="visually-hidden">Toggle Dropleft</span>
       </button>
       <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Action</a></li>
@@ -518,7 +518,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
 <div class="btn-group">
   <div class="btn-group dropleft" role="group">
     <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-      <span class="sr-only">Toggle Dropleft</span>
+      <span class="visually-hidden">Toggle Dropleft</span>
     </button>
     <ul class="dropdown-menu">
       <!-- Dropdown menu links -->
@@ -754,7 +754,7 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
   <div class="btn-group">
     <button type="button" class="btn btn-secondary">Reference</button>
     <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
-      <span class="sr-only">Toggle Dropdown</span>
+      <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
       <li><a class="dropdown-item" href="#">Action</a></li>

diff --git a/site/content/docs/5.0/components/pagination.md b/site/content/docs/5.0/components/pagination.md
index 7fb960e55c09b777149b91158e9851384df51755..076c31410196006a64690a50476c0a3795308d5c 100644 (file)
--- a/site/content/docs/5.0/components/pagination.md
+++ b/site/content/docs/5.0/components/pagination.md
@@ -62,7 +62,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the
     </li>
     <li class="page-item"><a class="page-link" href="#">1</a></li>
     <li class="page-item active" aria-current="page">
-      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
+      <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a>
     </li>
     <li class="page-item"><a class="page-link" href="#">3</a></li>
     <li class="page-item">
@@ -84,7 +84,7 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
     <li class="page-item active" aria-current="page">
       <span class="page-link">
         2
-        <span class="sr-only">(current)</span>
+        <span class="visually-hidden">(current)</span>
       </span>
     </li>
     <li class="page-item"><a class="page-link" href="#">3</a></li>
@@ -105,7 +105,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
     <li class="page-item active" aria-current="page">
       <span class="page-link">
         1
-        <span class="sr-only">(current)</span>
+        <span class="visually-hidden">(current)</span>
       </span>
     </li>
     <li class="page-item"><a class="page-link" href="#">2</a></li>
@@ -120,7 +120,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
     <li class="page-item active" aria-current="page">
       <span class="page-link">
         1
-        <span class="sr-only">(current)</span>
+        <span class="visually-hidden">(current)</span>
       </span>
     </li>
     <li class="page-item"><a class="page-link" href="#">2</a></li>

diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md
index 84a26330a01b2f230f6443452f3bb70908c07c07..fc9cd4e57ab9d35482c1cb4a1498238e14884537 100644 (file)
--- a/site/content/docs/5.0/components/spinners.md
+++ b/site/content/docs/5.0/components/spinners.md
@@ -10,7 +10,7 @@ toc: true
 
 Bootstrap "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
 
-For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="sr-only">Loading...</span>`.
+For accessibility purposes, each loader here includes `role="status"` and a nested `<span class="visually-hidden">Loading...</span>`.
 
 ## Border spinner
 
@@ -18,7 +18,7 @@ Use the border spinners for a lightweight loading indicator.
 
 {{< example >}}
 <div class="spinner-border" role="status">
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
 
@@ -30,7 +30,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
 {{< spinner.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="spinner-border text-{{ .name }}" role="status">
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </div>
 {{- end -}}
 {{< /spinner.inline >}}
@@ -46,7 +46,7 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn'
 
 {{< example >}}
 <div class="spinner-grow" role="status">
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
 
@@ -56,7 +56,7 @@ Once again, this spinner is built with `currentColor`, so you can easily change
 {{< spinner.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="spinner-grow text-{{ .name }}" role="status">
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </div>
 {{- end -}}
 {{< /spinner.inline >}}
@@ -72,7 +72,7 @@ Use [margin utilities][margin] like `.m-5` for easy spacing.
 
 {{< example >}}
 <div class="spinner-border m-5" role="status">
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
 
@@ -85,7 +85,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
 {{< example >}}
 <div class="d-flex justify-content-center">
   <div class="spinner-border" role="status">
-    <span class="sr-only">Loading...</span>
+    <span class="visually-hidden">Loading...</span>
   </div>
 </div>
 {{< /example >}}
@@ -102,7 +102,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
 {{< example >}}
 <div class="clearfix">
   <div class="spinner-border float-right" role="status">
-    <span class="sr-only">Loading...</span>
+    <span class="visually-hidden">Loading...</span>
   </div>
 </div>
 {{< /example >}}
@@ -112,7 +112,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
 {{< example >}}
 <div class="text-center">
   <div class="spinner-border" role="status">
-    <span class="sr-only">Loading...</span>
+    <span class="visually-hidden">Loading...</span>
   </div>
 </div>
 {{< /example >}}
@@ -123,10 +123,10 @@ Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that c
 
 {{< example >}}
 <div class="spinner-border spinner-border-sm" role="status">
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </div>
 <div class="spinner-grow spinner-grow-sm" role="status">
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
 
@@ -134,10 +134,10 @@ Or, use custom CSS or inline styles to change the dimensions as needed.
 
 {{< example >}}
 <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </div>
 <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
 
@@ -148,7 +148,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
 {{< example >}}
 <button class="btn btn-primary" type="button" disabled>
   <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </button>
 <button class="btn btn-primary" type="button" disabled>
   <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
@@ -159,7 +159,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
 {{< example >}}
 <button class="btn btn-primary" type="button" disabled>
   <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
-  <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
 </button>
 <button class="btn btn-primary" type="button" disabled>
   <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>

diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html
index e5b9f46494253b3ef2d4c29fe561dcfbbc99f5e4..d95f35d28c59d03ec4aa29e98752b24c8f246791 100644 (file)
--- a/site/content/docs/5.0/examples/carousel/index.html
+++ b/site/content/docs/5.0/examples/carousel/index.html
@@ -75,11 +75,11 @@ extra_css:
     </div>
     <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-      <span class="sr-only">Previous</span>
+      <span class="visually-hidden">Previous</span>
     </a>
     <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
-      <span class="sr-only">Next</span>
+      <span class="visually-hidden">Next</span>
     </a>
   </div>
 

diff --git a/site/content/docs/5.0/examples/sign-in/index.html b/site/content/docs/5.0/examples/sign-in/index.html
index c49ad12b0a15836cc73a27251ed651d6eb36feeb..acd5b4835495eacca272e5af56eaae9365513d50 100644 (file)
--- a/site/content/docs/5.0/examples/sign-in/index.html
+++ b/site/content/docs/5.0/examples/sign-in/index.html
@@ -10,9 +10,9 @@ include_js: false
 <form class="form-signin">
   <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
   <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
-  <label for="inputEmail" class="sr-only">Email address</label>
+  <label for="inputEmail" class="visually-hidden">Email address</label>
   <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
-  <label for="inputPassword" class="sr-only">Password</label>
+  <label for="inputPassword" class="visually-hidden">Password</label>
   <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
   <div class="checkbox mb-3">
     <label>

diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md
index 87b5c4ace392f8608148a25b4b672608ea9e6d31..3f10138e99bbdf9040527c8663171278756526a7 100644 (file)
--- a/site/content/docs/5.0/forms/form-control.md
+++ b/site/content/docs/5.0/forms/form-control.md
@@ -59,11 +59,11 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 {{< example >}}
 <form class="row g-3">
   <div class="col-auto">
-    <label for="staticEmail2" class="sr-only">Email</label>
+    <label for="staticEmail2" class="visually-hidden">Email</label>
     <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
   </div>
   <div class="col-auto">
-    <label for="inputPassword2" class="sr-only">Password</label>
+    <label for="inputPassword2" class="visually-hidden">Password</label>
     <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
   </div>
   <div class="col-auto">

diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 5d0e13ac240c7be1dbaf91aff7426fe9a285fd5f..3ec1f6cb045b849bfa573946d3fa3452eb6b4af4 100644 (file)
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -203,7 +203,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
 <div class="input-group mb-3">
   <button type="button" class="btn btn-outline-secondary">Action</button>
   <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-    <span class="sr-only">Toggle Dropdown</span>
+    <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action</a></li>
@@ -219,7 +219,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
   <button type="button" class="btn btn-outline-secondary">Action</button>
   <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
-    <span class="sr-only">Toggle Dropdown</span>
+    <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu dropdown-menu-right">
     <li><a class="dropdown-item" href="#">Action</a></li>
@@ -331,4 +331,4 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
 
-The exact technique to be used (`<label>` elements hidden using the `.sr-only` class, or use of the `aria-label` and `aria-labelledby` attributes, possibly in combination with `aria-describedby`) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.
+The exact technique to be used (`<label>` elements hidden using the `.visually-hidden` class, or use of the `aria-label` and `aria-labelledby` attributes, possibly in combination with `aria-describedby`) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.

diff --git a/site/content/docs/5.0/forms/layout.md b/site/content/docs/5.0/forms/layout.md
index 30aad7717c94527c0735c98c2b83191fc2c52229..a97a7e9e5a60cc3961e5c39097cc8f72532657c7 100644 (file)
--- a/site/content/docs/5.0/forms/layout.md
+++ b/site/content/docs/5.0/forms/layout.md
@@ -222,18 +222,18 @@ The example below uses a flexbox utility to vertically center the contents and c
 {{< example >}}
 <form class="row gy-2 gx-3 align-items-center">
   <div class="col-auto">
-    <label class="sr-only" for="autoSizingInput">Name</label>
+    <label class="visually-hidden" for="autoSizingInput">Name</label>
     <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
   </div>
   <div class="col-auto">
-    <label class="sr-only" for="autoSizingInputGroup">Username</label>
+    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
     <div class="input-group">
       <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
     </div>
   </div>
   <div class="col-auto">
-    <label class="sr-only" for="autoSizingSelect">Preference</label>
+    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
     <select class="form-select" id="autoSizingSelect">
       <option selected>Choose...</option>
       <option value="1">One</option>
@@ -260,18 +260,18 @@ You can then remix that once again with size-specific column classes.
 {{< example >}}
 <form class="row gx-3 gy-2 align-items-center">
   <div class="col-sm-3">
-    <label class="sr-only" for="specificSizeInputName">Name</label>
+    <label class="visually-hidden" for="specificSizeInputName">Name</label>
     <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
   </div>
   <div class="col-sm-3">
-    <label class="sr-only" for="specificSizeInputGroupUsername">Username</label>
+    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
     <div class="input-group">
       <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
     </div>
   </div>
   <div class="col-sm-3">
-    <label class="sr-only" for="specificSizeSelect">Preference</label>
+    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
     <select class="form-select" id="specificSizeSelect">
       <option selected>Choose...</option>
       <option value="1">One</option>
@@ -297,17 +297,17 @@ You can then remix that once again with size-specific column classes.
 
 Use the `.col-auto` class to create horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly.
 
-Be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
+Be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.visually-hidden`.
 
 {{< example >}}
 <form class="row row-cols-md-auto g-3 align-items-center">
   <div class="col-12">
-    <label class="sr-only" for="inlineFormInputName">Name</label>
+    <label class="visually-hidden" for="inlineFormInputName">Name</label>
     <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
   </div>
 
   <div class="col-12">
-    <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
+    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
     <div class="input-group">
       <div class="input-group-text">@</div>
       <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
@@ -315,7 +315,7 @@ Be sure to always include a `<label>` with each form control, even if you need t
   </div>
 
   <div class="col-12">
-    <label class="sr-only" for="inlineFormSelectPref">Preference</label>
+    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
     <select class="form-select" id="inlineFormSelectPref">
       <option selected>Choose...</option>
       <option value="1">One</option>
@@ -342,5 +342,5 @@ Be sure to always include a `<label>` with each form control, even if you need t
 {{< callout warning >}}
 ### Alternatives to hidden labels
 
-Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labeling methods is not advised.
+Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.visually-hidden` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labeling methods is not advised.
 {{< /callout >}}

diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md
index 027ce8a214122923535ccde1d3a492643b73886d..022efcc2034760ca65acba8b2c27f730f2a25a6f 100644 (file)
--- a/site/content/docs/5.0/getting-started/accessibility.md
+++ b/site/content/docs/5.0/getting-started/accessibility.md
@@ -28,19 +28,19 @@ Some combinations of colors that currently make up Bootstrap's default palette
 
 ### Visually hidden content
 
-Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.sr-only` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
+Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
 
 {{< highlight html >}}
 <p class="text-danger">
-  <span class="sr-only">Danger: </span>
+  <span class="visually-hidden">Danger: </span>
   This action is not reversible
 </p>
 {{< /highlight >}}
 
-For visually hidden interactive controls, such as traditional "skip" links, use the `.sr-only-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, since Bootstrap 5 `.sr-only-focusable` is a standalone class, and must not be used in combination with the `.sr-only` class.**
+For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.**
 
 {{< highlight html >}}
-<a class="sr-only-focusable" href="#content">Skip to main content</a>
+<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
 {{< /highlight >}}
 
 ### Reduced motion

diff --git a/site/content/docs/5.0/helpers/screen-readers.md b/site/content/docs/5.0/helpers/screen-readers.md
index 501b9c311c4d1a5f0e5e4e94effb19a8b3325a12..fd9ca888794fa159ca03b465833209ff54bb61e2 100644 (file)
--- a/site/content/docs/5.0/helpers/screen-readers.md
+++ b/site/content/docs/5.0/helpers/screen-readers.md
@@ -5,21 +5,21 @@ description: Use screen reader utilities to hide elements on all devices except
 group: helpers
 ---
 
-Hide an element to all devices **except screen readers** with `.sr-only`. Use `.sr-only-focusable` to show the element only when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
+Hide an element to all devices **except screen readers** with `.visually-hidden`. Use `.visually-hidden-focusable` to show the element only when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.
 
 {{< example >}}
-<h2 class="sr-only">Title for screen readers</h2>
-<a class="sr-only-focusable" href="#content">Skip to main content</a>
+<h2 class="visually-hidden">Title for screen readers</h2>
+<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
 {{< /example >}}
 
 {{< highlight scss >}}
 // Usage as a mixin
 
-.sr-only-title {
-  @include sr-only;
+.visually-hidden-title {
+  @include visually-hidden;
 }
 
 .skip-navigation {
-  @include sr-only-focusable;
+  @include visually-hidden-focusable;
 }
 {{< /highlight >}}

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 6499846a158bb2da32fc1d8ab8a1fed2d4fddfa3..7525fc57f6fc4b32836f04a75aa4e6e55a44f646 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -9,6 +9,11 @@ toc: true
 
 ## v5.0.0-alpha2
 
+### Sass
+
+- Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`.
+- Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
+
 ### Components
 
 #### Popovers
@@ -196,7 +201,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 
 ### Accessibility
 
-- `.sr-only-focusable` does not require `.sr-only` anymore. [See #28720](https://github.com/twbs/bootstrap/pull/28720).
+- Unlike the old `.sr-only-focusable`, which only worked in combination with `.sr-only`, `.sr-only-focusable` can be used as a standalone class without `.sr-only`. [See #28720](https://github.com/twbs/bootstrap/pull/28720).
 
 ### Utilities
 

diff --git a/site/layouts/partials/callout-warning-color-assistive-technologies.md b/site/layouts/partials/callout-warning-color-assistive-technologies.md
index f0c2e9de5320152f496e707cdc653f83a1d152f5..35683281d6862d20b2a76c99eff82c186fbe78a6 100644 (file)
--- a/site/layouts/partials/callout-warning-color-assistive-technologies.md
+++ b/site/layouts/partials/callout-warning-color-assistive-technologies.md
@@ -1,3 +1,3 @@
 ##### Conveying meaning to assistive technologies
 
-Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.

diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html
index a060e714b016ad46e6eb3b997d34d651d082200f..8dce2bc4955a7e4996a7573947aecaa8c03725e0 100644 (file)
--- a/site/layouts/partials/skippy.html
+++ b/site/layouts/partials/skippy.html
@@ -1,5 +1,5 @@
-<a class="skippy sr-only-focusable" href="#content">Skip to main content</a>
+<a class="skippy visually-hidden-focusable" href="#content">Skip to main content</a>
 
 {{ if (eq .Page.Layout "docs") }}
-  <a class="skippy sr-only-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a>
+  <a class="skippy visually-hidden-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a>
 {{- end }}