Update `.sr-only` mixin and utility (#25197)

* Remove clip-path from .sr-only utility as it causes perf regressions in Chrome

* change snippet to example

diff --git a/docs/4.0/utilities/screenreaders.md b/docs/4.0/utilities/screenreaders.md
index 7888143e44975fca1760cde07db77a843ecda2ee..7f1165d8e45fce03327a5e55d0bffbd6f463d613 100644 (file)
--- a/docs/4.0/utilities/screenreaders.md
+++ b/docs/4.0/utilities/screenreaders.md
@@ -12,9 +12,9 @@ Hide an element to all devices **except screen readers** with `.sr-only`. Combin
 Necessary for following [accessibility best practices]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#accessibility).
 {%- endcomment -%}
 
-{% highlight html %}
+{% example html %}
 <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
-{% endhighlight %}
+{% endexample %}
 
 {% highlight scss %}
 // Usage as a mixin

diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss
index 8f3eb1b19cc8c52ec1d4e81dff58755514b870b4..f9cd35cffe8775f4f01f7b6d934599773ead895e 100644 (file)
--- a/scss/mixins/_screen-reader.scss
+++ b/scss/mixins/_screen-reader.scss
@@ -11,7 +11,6 @@
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  clip-path: inset(50%);
   border: 0;
 }
 
@@ -30,6 +29,5 @@
     overflow: visible;
     clip: auto;
     white-space: normal;
-    clip-path: none;
   }
 }