Skip to content

Commit

Permalink
[docs] Devdocs Bootstrap .sr-only refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
roland04 committed Dec 11, 2024
1 parent ab7ce76 commit 739d53d
Showing 1 changed file with 49 additions and 0 deletions.
49 changes: 49 additions & 0 deletions docs/guides/bs5migration/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -402,3 +402,52 @@ The `.rounded-sm` and `.rounded-lg` classes have been replaced with `.rounded-1`
```

</ValidExample>

### Screen reader utilities

"Screen reader" classes are now "visually hidden" classes.

- Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`.
- Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.

<InvalidExample title="Don't">

```html
<span class="sr-only sr-only-focusable">
Visually hidden text
</span>
```

</InvalidExample>

<ValidExample title="Do">

```html
<span class="visually-hidden visually-hidden-focusable">
Visually hidden text
</span>
```

</ValidExample>

<InvalidExample title="Don't">

```scss
.my-hidden-text {
@include sr-only();
@include sr-only-focusable();
}
```

</InvalidExample>

<ValidExample title="Do">

```scss
.my-hidden-text {
@include visually-hidden();
@include visually-hidden-focusable();
}
```

</ValidExample>

0 comments on commit 739d53d

Please sign in to comment.