diff options
| author | Mark Otto <[email protected]> | 2018-02-11 15:05:50 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2018-02-11 15:05:50 -0800 |
| commit | 98111214c270768606cb6ca9d8b4db675bb96ad1 (patch) | |
| tree | a1675d4e44c372bd7b8011310a2edd1e61f840ab | |
| parent | e373fbea9220732283761f3720b4be6280d5135d (diff) | |
| download | bootstrap-98111214c270768606cb6ca9d8b4db675bb96ad1.tar.xz bootstrap-98111214c270768606cb6ca9d8b4db675bb96ad1.zip | |
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
| -rw-r--r-- | docs/4.0/utilities/screenreaders.md | 4 | ||||
| -rw-r--r-- | 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 7888143e4..7f1165d8e 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 8f3eb1b19..f9cd35cff 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; } } |