diff --git a/theme/boost/scss/moodle/bs4-compat.scss b/theme/boost/scss/moodle/bs4-compat.scss index 515787cfbb0e3..5898aa5bc2a28 100644 --- a/theme/boost/scss/moodle/bs4-compat.scss +++ b/theme/boost/scss/moodle/bs4-compat.scss @@ -387,3 +387,36 @@ a.close.disabled { .rounded-lg { border-radius: $border-radius-lg !important; } + +// Screen reader only. +@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; +} + +@mixin sr-only-focusable() { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; + white-space: normal; + } +} + +.sr-only { + @include sr-only(); +} + +.sr-only-focusable { + @include sr-only-focusable(); +} diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 7bfe532d51d44..23b32584c7352 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -25535,6 +25535,27 @@ a.close.disabled, a.disabled.btn-close { border-radius: 0.6rem !important; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.sr-only-focusable:active, .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; + white-space: normal; +} + /** * Moodle variables * diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 2f0d18262cb62..4afac3cadc596 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -25535,6 +25535,27 @@ a.close.disabled, a.disabled.btn-close { border-radius: 0.3rem !important; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.sr-only-focusable:active, .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; + white-space: normal; +} + /** * Moodle variables *