[VisuallyHidden] Updating Visually Hidden CSS (#4641)

* modernized visually hidden styles

* used gov uk design system styles for visually hidden since they have already been tested

UNRELEASED.md

@@ -6,6 +6,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 
 ### Enhancements
 
+- Update `VisuallyHidden` styles to not use `top` or `clip` ([#4641](https://github.com/Shopify/polaris-react/pull/4641)).
 - Added `PlainAction` type to `ComplexAction`. ([#4489](https://github.com/Shopify/polaris-react/pull/4489)
 
 ### Bug fixes

src/styles/shared/_accessibility.scss

@@ -1,16 +1,19 @@
 /// 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 {
   // Need to make sure we override any existing styles.
   // stylelint-disable declaration-no-important
   position: absolute !important;
-  top: 0;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  overflow: hidden !important;
-  height: 1px !important;
   width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
   padding: 0 !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
   border: 0 !important;
+  white-space: nowrap !important;
   // stylelint-enable declaration-no-important
 }