Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

.sr-only & .sr-only-focusable tweaks #28720

Merged
merged 2 commits into from
May 20, 2019
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 14 additions & 20 deletions scss/mixins/_screen-reader.scss
Original file line number Diff line number Diff line change
@@ -1,34 +1,28 @@
// stylelint-disable declaration-no-important

// Only display content to screen readers
//
// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/

@mixin sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

// Use in conjunction with .sr-only to only display content when it's focused.
// Use to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate

@mixin sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
&:not(:focus) {
@include sr-only();
}
}
7 changes: 2 additions & 5 deletions scss/utilities/_screenreaders.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
// Screenreaders
//

.sr-only {
.sr-only,
.sr-only-focusable:not(:focus) {
@include sr-only();
}

.sr-only-focusable {
@include sr-only-focusable();
}
4 changes: 2 additions & 2 deletions site/content/docs/4.3/getting-started/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -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, 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.**
MartijnCuppens marked this conversation as resolved.
Show resolved Hide resolved

{{< 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
Expand Down
4 changes: 4 additions & 0 deletions site/content/docs/4.3/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
11 changes: 8 additions & 3 deletions site/content/docs/4.3/utilities/screen-readers.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 >}}
2 changes: 1 addition & 1 deletion site/layouts/partials/skippy.html
Original file line number Diff line number Diff line change
@@ -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>