used gov uk design system styles for visually hidden since they have …

…already been tested

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

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;
 }