From 98111214c270768606cb6ca9d8b4db675bb96ad1 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 11 Feb 2018 15:05:50 -0800
Subject: [PATCH] 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
---
docs/4.0/utilities/screenreaders.md | 4 ++--
scss/mixins/_screen-reader.scss | 2 --
2 files changed, 2 insertions(+), 4 deletions(-)
diff --git a/docs/4.0/utilities/screenreaders.md b/docs/4.0/utilities/screenreaders.md
index 7888143e44..7f1165d8e4 100644
--- 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 8f3eb1b19c..f9cd35cffe 100644
--- 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;
}
}
--
GitLab