diff --git a/UNRELEASED.md b/UNRELEASED.md index f23cbeb7ea7..c5f71c713c9 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -9,11 +9,10 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Enhancements - Update `EmptySearchResult` illustration ([#3185](https://github.com/Shopify/polaris-react/pull/3185)). +- Update `VisuallyHidden` styles to not use `top` or `clip` ([#4641](https://github.com/Shopify/polaris-react/pull/4641)). ### Bug fixes -- Fixed `VisuallyHidden` to be positioned in the top left corner of its parent to avoid horizontal scroll issues ([#4641](https://github.com/Shopify/polaris-react/pull/4641)). - ### Documentation ### Development workflow diff --git a/src/styles/shared/_accessibility.scss b/src/styles/shared/_accessibility.scss index 3ca95d40f73..3867409464e 100644 --- a/src/styles/shared/_accessibility.scss +++ b/src/styles/shared/_accessibility.scss @@ -1,14 +1,16 @@ /// Used to hide an element visually, but keeping it accessible for /// accessibility tools. +/// styles referenced from GOV.UK design system +/// https://github.com/h5bp/main.css/issues/12#issuecomment-451965809 @mixin visually-hidden { - clip-path: inset(50%); - height: 1px; - width: 1px; - overflow: hidden; position: absolute; - white-space: nowrap; + width: 1px; + height: 1px; margin: 0; padding: 0; + overflow: hidden; + clip-path: inset(50%); border: 0; + white-space: nowrap; }