mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-29 16:19:53 +02:00
.sr-only
& .sr-only-focusable
tweaks (#28720)
* Prevent .sr-only-focusable overriding properties when being focused * Typo
This commit is contained in:
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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 >}}
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user