`.sr-only` & `.sr-only-focusable` tweaks (#28720)

* Prevent .sr-only-focusable overriding properties when being focused

* Typo

4 files changed, 15 insertions, 6 deletions

diff --git a/site/content/docs/4.3/getting-started/accessibility.md b/site/content/docs/4.3/getting-started/accessibility.md
index 83dd3a9f3..5b642dcfe 100644
--- a/site/content/docs/4.3/getting-started/accessibility.md
+++ b/site/content/docs/4.3/getting-started/accessibility.md
@@ -37,10 +37,10 @@ Content which should be visually hidden, but remain accessible to assistive tech
 </p>
 {{< /highlight >}}
 
-For visually hidden interactive controls, such as traditional "skip" links, `.sr-only` can be combined with the `.sr-only-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users).
+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 the `.sr-only-focusable` class may not be used in combination with the `.sr-only` class.**
 
 {{< highlight html >}}
-<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
+<a class="sr-only-focusable" href="#content">Skip to main content</a>
 {{< /highlight >}}
 
 ### Reduced motion
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index 8a9a0f241..e2ced63b3 100644
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -85,6 +85,10 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 
 - Renamed `.arrow` to `.tooltip-arrow`
 
+## Accessibility
+
+- `.sr-only-focusable` does not require `.sr-only` anymore. [See #28720](https://github.com/twbs/bootstrap/pull/28720).
+
 ## Utilities
 
 - **Todo:** Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore
diff --git a/site/content/docs/4.3/utilities/screen-readers.md b/site/content/docs/4.3/utilities/screen-readers.md
index 7f6faaedb..7781b11fb 100644
--- a/site/content/docs/4.3/utilities/screen-readers.md
+++ b/site/content/docs/4.3/utilities/screen-readers.md
@@ -5,16 +5,21 @@ description: Use screen reader utilities to hide elements on all devices except
 group: utilities
 ---
 
-Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again 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 `.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.
 
 {{< example >}}
-<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
+<h2 class="sr-only">Title for screen readers</h2>
+<a class="sr-only-focusable" href="#content">Skip to main content</a>
 {{< /example >}}
 
 {{< highlight scss >}}
 // Usage as a mixin
-.skip-navigation {
+
+.sr-only-title {
   @include sr-only;
+}
+
+.skip-navigation {
   @include sr-only-focusable;
 }
 {{< /highlight >}}
diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html
index ec7507d53..25c33fdc3 100644
--- a/site/layouts/partials/skippy.html
+++ b/site/layouts/partials/skippy.html
@@ -1,3 +1,3 @@
-<a class="skippy sr-only sr-only-focusable" href="#content">
+<a class="skippy sr-only-focusable" href="#content">
   <span class="skippy-text">Skip to main content</span>
 </a>