MDL-80519 theme: Add backward compatibility for sr-only

roland04 · Nov 11, 2024 · b0ba011 · b0ba011
1 parent 5e1d38e
commit b0ba011
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
  *