remove off-screen mixin

basher · Nov 8, 2024 · a29faf0 · a29faf0
1 parent 0a964f2
commit a29faf0
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 32 deletions.
diff --git a/ui/src/css/components/_skiplinks.scss b/ui/src/css/components/_skiplinks.scss
@@ -4,13 +4,11 @@ Dependencies.
 ----------------------------------------------------------------------------
 */
 @use '../base' as *;
-@use '../mixins' as *;
 
 .skiplinks {
     position: absolute;
 
     &__link {
-        @include off-screen;
         background-color: $color-brand;
         color: $color-neutral-100;
         display: inline-block;

diff --git a/ui/src/css/mixins/_index.scss b/ui/src/css/mixins/_index.scss
@@ -2,4 +2,3 @@
 @forward 'button-reset';
 @forward 'focus';
 @forward 'form-field-reset';
-@forward 'off-screen';
diff --git a/ui/src/css/mixins/_off-screen.scss b/ui/src/css/mixins/_off-screen.scss
diff --git a/ui/src/css/utilities/_display.scss b/ui/src/css/utilities/_display.scss
@@ -3,7 +3,6 @@
 Dependencies.
 ----------------------------------------------------------------------------
 */
-@use '../mixins' as *;
 @use '../base' as *;
 
 /*
@@ -12,7 +11,14 @@ Visually hide content but make it available to screen readers.
 ----------------------------------------------------------------------------
 */
 .visually-hidden {
-    @include off-screen;
+    &:not(:focus):not(:active) {
+        block-size: 1px;
+        clip-path: inset(50%);
+        inline-size: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+    }
 }
 
 /*

diff --git a/ui/stories/5. Components/Skiplinks/Skiplinks.js b/ui/stories/5. Components/Skiplinks/Skiplinks.js
@@ -1,6 +1,6 @@
 export const SkiplinksHtml = () => `
 <nav class="skiplinks" aria-label="skiplinks">
-    <a class="skiplinks__link" href="#main">Skip to main content</a>
+    <a class="skiplinks__link visually-hidden" href="#main">Skip to main content</a>
 </nav>
 
 <p>Some content preceding skiplink target - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, incidunt non numquam deserunt dolorem, perspiciatis error asperiores fuga.</p>

diff --git a/ui/stories/8. Pages/Homepage.js b/ui/stories/8. Pages/Homepage.js
@@ -17,8 +17,8 @@ ${style}
 <div class="page">
     <header class="header">
         <nav class="skiplinks" aria-label="skiplinks">
-            <a class="skiplinks__link" href="#main">Skip to main content</a>
-            <a class="skiplinks__link" href="#footer">Skip to footer</a>
+            <a class="skiplinks__link  visually-hidden" href="#main">Skip to main content</a>
+            <a class="skiplinks__link  visually-hidden" href="#footer">Skip to footer</a>
         </nav>
 
         <div class="wrapper wrapper--l">