Add !important to sr-only mixin to make sure nothing gets overridden.

Co-authored-by: Jake Wilson <[email protected]>

Author: 2 people

scss/mixins/_screen-reader.scss

@@ -1,18 +1,20 @@
+// 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;
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
   margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
 }
 
 // Use to only display content when it's focused.