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 <[email protected]>

3 files changed, 9 insertions, 9 deletions

diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index d66f14053..90d9a0366 100644
--- 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 0b54a125a..a7ceb32e2 100644
--- 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 fa043af00..b72e8c4ef 100644
--- 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>