From a4a04cd9ec741050390746f8056cc79a9c04c8df Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 20 May 2019 10:03:51 +0200
Subject: `.sr-only` & `.sr-only-focusable` tweaks (#28720)

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

* Typo
---
 site/content/docs/4.3/getting-started/accessibility.md |  4 ++--
 site/content/docs/4.3/migration.md                     |  4 ++++
 site/content/docs/4.3/utilities/screen-readers.md      | 11 ++++++++---
 3 files changed, 14 insertions(+), 5 deletions(-)

(limited to 'site/content/docs')

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 >}}
-- 
cgit v1.2.3