Skip to content

Commit dd31ff6

Browse files
committed
[docs] Devdocs Bootstrap .sr-only refactor
1 parent 85f64be commit dd31ff6

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

docs/guides/bs5migration/index.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -382,3 +382,52 @@ shift-color($primary, -20%);
382382
The `theme-color-level()` has been changed to `color-level()` and then subsequently removed and replaced by scale-color().
383383
In the stable 5.0 the final decision was to adopt `shift-color()` so we will use this function in the bridge file.
384384
:::
385+
386+
### Screen reader utilities
387+
388+
“Screen reader” classes are now “visually hidden” classes.
389+
390+
- Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable.
391+
- Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().
392+
393+
<InvalidExample title="Don't">
394+
395+
```html
396+
<span class="sr-only sr-only-focusable">
397+
Visually hidden text
398+
</span>
399+
```
400+
401+
</InvalidExample>
402+
403+
<ValidExample title="Do">
404+
405+
```html
406+
<span class="visually-hidden visually-hidden-focusable">
407+
Visually hidden text
408+
</span>
409+
```
410+
411+
</ValidExample>
412+
413+
<InvalidExample title="Don't">
414+
415+
```scss
416+
.my-hidden-text {
417+
@include sr-only();
418+
@include sr-only-focusable();
419+
}
420+
```
421+
422+
</InvalidExample>
423+
424+
<ValidExample title="Do">
425+
426+
```scss
427+
.my-hidden-text {
428+
@include visually-hidden();
429+
@include visually-hidden-focusable();
430+
}
431+
```
432+
433+
</ValidExample>

0 commit comments

Comments
 (0)