modernized visually hidden styles

Shopify · Nov 12, 2021 · c9f44bf · c9f44bf
1 parent e8e1e62
commit c9f44bf
Showing 1 changed file with 6 additions and 12 deletions.
diff --git a/src/styles/shared/_accessibility.scss b/src/styles/shared/_accessibility.scss
@@ -2,16 +2,10 @@
 /// accessibility tools.
 
 @mixin visually-hidden {
-  // Need to make sure we override any existing styles.
-  // stylelint-disable declaration-no-important
-  position: absolute !important;
-  top: 0;
-  left: 0;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  overflow: hidden !important;
-  height: 1px !important;
-  width: 1px !important;
-  padding: 0 !important;
-  border: 0 !important;
-  // stylelint-enable declaration-no-important
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
 }