fix: skjul dekorativt CSS-innhold fra skjermlesere

ISSUES CLOSED: #2774
fremtind · Mar 3, 2022 · f111f9b · f111f9b
1 parent b7f994c
commit f111f9b
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 27 deletions.
diff --git a/packages/core/links.scss b/packages/core/links.scss
@@ -1,7 +1,5 @@
 @use "./jkl";
-
-@import "./mixins/all";
-@import "./functions";
+@use "./mixins/all" as mixins;
 
 @mixin underline-gradient($color) {
     background-image: linear-gradient(to bottom, $color 0%, $color 100%);
@@ -18,15 +16,15 @@ $right-arrow: "\2192"; // unicode right arrow
 $left-arrow: "\2190"; // unicode left arrow
 $north-east-arrow: "\2197"; // unicode north east arrow (up/right)
 
-$link-underline-thickness: rem(1px);
-$link-underline-thickness--hover: rem(2px);
+$link-underline-thickness: jkl.rem(1px);
+$link-underline-thickness--hover: jkl.rem(2px);
 
-@include light-mode-variables {
+@include mixins.light-mode-variables {
     --link-color: #{jkl.$color-granitt};
     --link-hover-color: #{jkl.$color-stein};
     --link-active-color: #{jkl.$color-granitt};
 }
-@include dark-mode-variables {
+@include mixins.dark-mode-variables {
     --link-color: #{jkl.$color-snohvit};
     --link-hover-color: #{jkl.$color-svaberg};
     --link-active-color: #{jkl.$color-snohvit};
@@ -39,7 +37,7 @@ $link-underline-thickness--hover: rem(2px);
     background-position: 0 calc(100% - (#{$link-underline-thickness--hover} - #{$link-underline-thickness}));
     background-size: $link-underline-thickness $link-underline-thickness;
     background-repeat: repeat-x;
-    @include motion("standard", "energetic");
+    @include mixins.motion("standard", "energetic");
     transition-property: background-size, background-position, color;
     outline: none;
     text-decoration: none;
@@ -57,7 +55,7 @@ $link-underline-thickness--hover: rem(2px);
     }
 
     html:not([data-mousenavigation]) &:focus {
-        @include no-grow-bold;
+        @include mixins.no-grow-bold;
         @include border-gradient(var(--link-active-color));
     }
 
@@ -71,15 +69,15 @@ $link-underline-thickness--hover: rem(2px);
     &[target="_blank"],
     &--external {
         &::after {
-            content: $north-east-arrow;
+            @include mixins.decorative($content: $north-east-arrow);
         }
     }
 }
 
 .jkl-nav-link {
     color: var(--link-color);
 
-    @include reset-outline;
+    @include mixins.reset-outline;
     box-sizing: border-box;
     font-weight: jkl.$typography-weight-normal;
     text-decoration: none;
@@ -90,13 +88,13 @@ $link-underline-thickness--hover: rem(2px);
     &::before {
         display: inline-block;
         transform: translateX(0);
-        @include motion("standard");
+        @include mixins.motion("standard");
         transition-property: transform;
     }
 
     &::after {
-        content: $right-arrow;
-        padding-left: rem(2px);
+        @include mixins.decorative($content: $right-arrow);
+        padding-left: jkl.rem(2px);
     }
 
     &:hover:not(:focus) {
@@ -109,15 +107,15 @@ $link-underline-thickness--hover: rem(2px);
 
     html:not([data-mousenavigation]) &:focus {
         @include border-gradient(var(--link-color));
-        @include no-grow-bold;
+        @include mixins.no-grow-bold;
 
         &::after {
             transform: translateX(33%);
         }
     }
 
     &--active {
-        @include no-grow-bold;
+        @include mixins.no-grow-bold;
     }
 }
 
@@ -133,8 +131,8 @@ $link-underline-thickness--hover: rem(2px);
     }
 
     &::before {
-        content: $left-arrow;
-        padding-right: rem(4px);
+        @include mixins.decorative($content: $left-arrow);
+        padding-right: jkl.rem(4px);
     }
 
     &:hover,

diff --git a/packages/core/mixins/_index.scss b/packages/core/mixins/_index.scss
@@ -1,2 +1,3 @@
 @forward "helpers" as helper-*;
 @forward "text-style";
+@forward "ornaments";
diff --git a/packages/core/mixins/_ornaments.scss b/packages/core/mixins/_ornaments.scss
@@ -10,3 +10,10 @@
     border-bottom: $weight solid $color;
     transition: transform 400ms ease; // TODO: use motion library when implemented
 }
+
+@mixin decorative($content) {
+    // Detaljer finnes her: https://github.com/fremtind/jokul/issues/2774#issuecomment-1056575107
+    content: $content; // Fallback for nettlesere som ikke støtter ny syntaks (Firefox, Safari)
+    content: $content / ""; // Tom alternativ tekst
+    alt: ""; // WebKit-alternativ, fases ut når varianten fra speccen er støttet
+}
diff --git a/packages/list/list.scss b/packages/list/list.scss
@@ -1,7 +1,5 @@
 @use "~@fremtind/jkl-core/jkl";
 
-@import "~@fremtind/jkl-core/_functions";
-
 @function solid-diamond($color) {
     $c: jkl.helper-urlencodecolor($color);
 
@@ -124,13 +122,13 @@ $list-check-color--inverted: jkl.$color-suksess--darkbg;
         }
 
         &--check::before {
-            content: "\2713";
+            @include jkl.decorative($content: "\2713");
             background-image: check($list-check-color, $list-text-color--inverted);
             background-image: var(--jkl-list-marker--check);
         }
 
         &--cross::before {
-            content: "\274C";
+            @include jkl.decorative($content: "\274C");
             background-image: cross($list-cross-color);
             background-image: var(--jkl-list-marker--cross);
         }

diff --git a/packages/select/select.scss b/packages/select/select.scss
@@ -215,7 +215,7 @@ $select-search-input-selection-color--inverted: color.scale(
             color: var(--select-focus-color);
 
             &::before {
-                content: "→ ";
+                @include jkl.decorative($content: "→ ");
                 padding-right: jkl.$spacing-xs;
             }
         }

diff --git a/packages/stylelint-config-jkl/examples/styles.scss b/packages/stylelint-config-jkl/examples/styles.scss
@@ -72,6 +72,6 @@
     /* Flush nested single line comment */
     .selector::after {
         background-image: url("x.svg");
-        content: "→";
+        content: "→" / "";
     }
 }
diff --git a/portal/src/components/Delaytext/delay-text.scss b/portal/src/components/Delaytext/delay-text.scss
@@ -1,6 +1,5 @@
 @use "~@fremtind/jkl-core/jkl";
 
-@import "~@fremtind/jkl-core/_functions";
 @import "~@fremtind/jkl-core/mixins/_motion";
 
 .jkl-portal-delay-text {
@@ -19,8 +18,8 @@
         width: 100%;
 
         &::after {
+            @include jkl.decorative($content: "_");
             opacity: 1;
-            content: "_";
         }
 
         &--done {

diff --git a/portal/src/components/Layout/components/GitHubLinks.scss b/portal/src/components/Layout/components/GitHubLinks.scss
@@ -6,7 +6,7 @@
 
     &__link {
         &::after {
-            content: "\2197";
+            @include jkl.decorative($content: "\2197");
         }
 
         &:not(:last-child) {