1
0
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:
Martijn Cuppens
2019-05-20 10:03:51 +02:00
committed by GitHub
parent 1a41b0ffa6
commit a4a04cd9ec
6 changed files with 31 additions and 31 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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 >}}

View File

@@ -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>