fix(VisuallyHidden): force properties to overcome unwanted CSS specif…

…icity (#2366)
dnbexperience · May 31, 2023 · ed088de · ed088de
1 parent 541e889
commit ed088de
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/...napshots__/visuallyhidden-have-to-match-visuallyhidden-element-element.snap.png b/...napshots__/visuallyhidden-have-to-match-visuallyhidden-element-element.snap.png
diff --git a/...femia/src/components/visually-hidden/__tests__/__snapshots__/VisuallyHidden.test.tsx.snap b/...femia/src/components/visually-hidden/__tests__/__snapshots__/VisuallyHidden.test.tsx.snap
@@ -16,17 +16,17 @@ exports[`VisuallyHidden VisuallyHidden scss have to match snapshot 1`] = `
  * Utilities
  */
 .dnb-visually-hidden--focusable:not(:focus, :focus-within) {
-  user-select: none;
-  -webkit-touch-callout: none;
-  pointer-events: none;
-  position: absolute;
-  clip-path: inset(50%);
-  max-width: 1px;
-  max-height: 1px;
-  overflow: hidden;
-  white-space: nowrap;
-  padding: 0;
-  margin: 0;
-  border: 0;
+  user-select: none !important;
+  -webkit-touch-callout: none !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  clip-path: inset(50%) !important;
+  max-width: 1px !important;
+  max-height: 1px !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
 }"
 `;
diff --git a/packages/dnb-eufemia/src/style/core/utilities.scss b/packages/dnb-eufemia/src/style/core/utilities.scss
@@ -291,23 +291,23 @@ $breakpoints: (
 
 // Screen reader only helper
 @mixin srOnly() {
-  user-select: none;
-  -webkit-touch-callout: none; // iOS
-  pointer-events: none;
+  user-select: none !important;
+  -webkit-touch-callout: none !important; // iOS
+  pointer-events: none !important;
 
-  position: absolute;
+  position: absolute !important;
 
-  clip-path: inset(50%);
-  max-width: 1px; // if less than 1px, Safari moves the focus-ring to another place
-  max-height: 1px; // if less than 1px, Safari moves the focus-ring to another place
+  clip-path: inset(50%) !important;
+  max-width: 1px !important; // if less than 1px, Safari moves the focus-ring to another place
+  max-height: 1px !important; // if less than 1px, Safari moves the focus-ring to another place
 
-  overflow: hidden;
-  white-space: nowrap; // NB: so NVDA not splits up text in multi line
+  overflow: hidden !important;
+  white-space: nowrap !important; // NB: so NVDA not splits up text in multi line
 
-  padding: 0;
-  margin: 0;
+  padding: 0 !important;
+  margin: 0 !important;
 
-  border: 0;
+  border: 0 !important;
 }
 
 @function str-replace($string, $search, $replace: '') {