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>

3 files changed, 16 insertions, 16 deletions

diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md
index 87b5c4ace3..3f10138e99 100644
--- 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 5d0e13ac24..3ec1f6cb04 100644
--- 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 30aad7717c..a97a7e9e5a 100644
--- 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 >}}