style: improvements to link focus styling

.changeset/famous-seahorses-smell.md

@@ -0,0 +1,15 @@
+---
+"@utrecht/link-css": minor
+---
+
+Move the Link `text-underline` effect from `focus` to `focus-visible`. The goal is to not change the `text-underline` appearance during the flow of moving the mouse over the link (`:hover`) and then clicking the link (`:focus` + `:active`).
+
+Add new `focus-visible` tokens for Link:
+
+- `utrecht.link.focus-visible.text-decoration`
+- `utrecht.link.focus-visible.text-decoration-thickness`
+
+The following tokens are now deprecated:
+
+- `utrecht.link.focus.text-decoration`
+- `utrecht.link.focus.text-decoration-thickness`

.changeset/forty-months-dress.md

@@ -0,0 +1,8 @@
+---
+"@utrecht/focus-ring-css": major
+---
+
+Remove the SCSS variable `$utrecht-focus-visible-fallback` and remove the following mixins:
+
+- `utrecht-focus-ring-reset`
+- `utrecht-focus-pseudo-classes-backwards-compatible`

.changeset/olive-numbers-smile.md

@@ -0,0 +1,15 @@
+---
+"@utrecht/skip-link-css": minor
+---
+
+Add new tokens for Skip Link, to replace deprecated tokens:
+
+- `utrecht.skip-link.focus-visible.color`
+- `utrecht.skip-link.focus-visible.background-color`
+- `utrecht.skip-link.focus-visible.text-decoration`
+
+The following Skip Link tokens are now deprecated:
+
+- `utrecht.skip-link.focus.color`
+- `utrecht.skip-link.focus.background-color`
+- `utrecht.skip-link.focus.text-decoration`

.changeset/three-emus-juggle.md

@@ -0,0 +1,13 @@
+---
+"@utrecht/map-control-button-css": patch
+"@utrecht/top-task-link-css": patch
+"@utrecht/pagination-css": patch
+"@utrecht/textarea-css": patch
+"@utrecht/textbox-css": patch
+"@utrecht/button-css": patch
+"@utrecht/select-css": patch
+"@utrecht/link-css": patch
+"@utrecht/components": patch
+---
+
+Start using `:focus-visible`, Safari support has caught up.

components/button/src/index.scss

@@ -43,34 +43,12 @@
   @include utrecht-button--focus;
 }
 
-// The workaround for missing `:focus-visible` support makes the code quite complex,
-// keep the ideal version around to restore it easily when browser support improves.
-
-@if $utrecht-focus-visible-fallback {
-  .utrecht-button:focus {
-    /* Show focus ring even for disabled :focus-visible buttons. *
-    /* For example: <button disabled tabindex="0"> */
-    @include utrecht-focus-ring;
-  }
-
-  .utrecht-button:focus:not(:disabled, [aria-disabled="true"], .utrecht-button--disabled) {
-    @include utrecht-button--focus;
-    @include utrecht-button--focus-visible;
-  }
-
-  /* override the `:focus` selector above */
-  /* stylelint-disable-next-line no-descending-specificity */
-  .utrecht-button:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset;
-  }
-} @else {
-  .utrecht-button:focus-visible {
-    @include utrecht-button--focus-visible;
-  }
-
-  .utrecht-button:focus:not(:disabled, [aria-disabled="true"], .utrecht-button--disabled) {
-    @include utrecht-button--focus;
-  }
+.utrecht-button:focus-visible {
+  @include utrecht-button--focus-visible;
+}
+
+.utrecht-button:focus:not(:disabled, [aria-disabled="true"], .utrecht-button--disabled) {
+  @include utrecht-button--focus;
 }
 
 .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),

components/checkbox/src/_mixin.scss

@@ -56,5 +56,5 @@ $utrecht-support-prince-xml: false !default;
     @include utrecht-checkbox--disabled;
   }
 
-  @include utrecht-focus-pseudo-classes-backwards-compatible;
+  @include utrecht-focus-pseudo-classes;
 }

components/checkbox/src/index.scss

@@ -35,5 +35,5 @@
     @include utrecht-checkbox--disabled;
   }
 
-  @include utrecht-focus-pseudo-classes-backwards-compatible;
+  @include utrecht-focus-pseudo-classes;
 }

components/focus-ring/src/_mixin.scss

@@ -4,8 +4,6 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
-$utrecht-focus-visible-fallback: true !default;
-
 @mixin utrecht-focus-ring {
   /* - The browser default focus ring should apply when these CSS custom properties are not set.
    * - Make the `box-shadow` value available, so components that have their own `box-shadow`
@@ -21,12 +19,6 @@ $utrecht-focus-visible-fallback: true !default;
   outline-width: var(--utrecht-focus-outline-width, revert);
 }
 
-@mixin utrecht-focus-ring-reset {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
-}
-
 /* stylelint-disable-next-line block-no-empty */
 @mixin utrecht-focus {
 }
@@ -43,14 +35,3 @@ $utrecht-focus-visible-fallback: true !default;
     @include utrecht-focus-visible;
   }
 }
-
-// When support is needed for Safari versions that do not support :focus-visible,
-// use this mixin instead of the `utrecht-focus-pseudo-classes` mixin.
-@mixin utrecht-focus-pseudo-classes-backwards-compatible {
-  &:focus {
-    @include utrecht-focus-ring;
-  }
-  &:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset;
-  }
-}

components/link/src/_mixin.scss

@@ -90,16 +90,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
-@mixin utrecht-link--icon-left {
-  background-image: var(--utrecht-link-icon-left-background-image, none);
-  background-position: 0 0.25em;
-  background-repeat: no-repeat;
-  color: var(--utrecht-link-color, LinkText);
-  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-  padding-inline-start: var(--utrecht-space-block-md);
-  text-decoration-line: none;
-}
-
 @mixin utrecht-link--visited {
   --_utrecht-link-forced-colors-color: visitedtext;
   --_utrecht-link-state-color: var(--utrecht-link-visited-color);
@@ -122,8 +112,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 @mixin utrecht-link--focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
 
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
@@ -152,6 +140,21 @@ however browsers don't seem to have implemented great looking supixel tweening y
    */
   @include utrecht-focus-visible;
 
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
+
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
@@ -220,25 +223,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
     @include utrecht-link--active;
   }
 
-  // The workaround for missing `:focus-visible` support makes the code quite complex,
-  // keep the ideal version around to restore it easily when browser support improves.
-
-  @if $utrecht-focus-visible-fallback {
-    &:any-link:focus {
-      @include utrecht-link--focus;
-      @include utrecht-link--focus-visible;
-    }
-
-    &:any-link:focus:not(:focus-visible) {
-      @include utrecht-focus-ring-reset;
-    }
-  } @else {
-    &:any-link:focus {
-      @include utrecht-link--focus;
-    }
-
-    &:any-link:focus-visible {
-      @include utrecht-link--focus-visible;
-    }
+  &:any-link:focus {
+    @include utrecht-link--focus;
+  }
+
+  &:any-link:focus-visible {
+    @include utrecht-link--focus-visible;
   }
 }

components/link/src/html/_mixin.scss

@@ -22,26 +22,12 @@
     @include utrecht-link--active;
   }
 
-  // The workaround for missing `:focus-visible` support makes the code quite complex,
-  // keep the ideal version around to restore it easily when browser support improves.
-
-  @if $utrecht-focus-visible-fallback {
-    a:focus {
-      @include utrecht-link--focus;
-      @include utrecht-link--focus-visible;
-    }
-
-    a:focus:not(:focus-visible) {
-      @include utrecht-focus-ring-reset;
-    }
-  } @else {
-    a:focus {
-      @include utrecht-link--focus;
-    }
+  a:focus {
+    @include utrecht-link--focus;
+  }
 
-    a:focus-visible {
-      @include utrecht-link--focus-visible;
-    }
+  a:focus-visible {
+    @include utrecht-link--focus-visible;
   }
 
   a[rel~="external" i] {

components/link/src/index.scss

@@ -18,10 +18,6 @@
   @include utrecht-link--any-link;
 }
 
-.utrecht-link--icon-left {
-  @include utrecht-link--icon-left;
-}
-
 .utrecht-link--visited {
   @include utrecht-link--visited;
 }
@@ -40,33 +36,16 @@
   @include utrecht-link--focus-visible;
 }
 
-// The workaround for missing `:focus-visible` support makes the code quite complex,
-// keep the ideal version around to restore it easily when browser support improves.
-
-@if $utrecht-focus-visible-fallback {
-  /* `:focus` should only apply to links with `href`, not on disabled links */
-  .utrecht-link--html-span:focus,
-  .utrecht-link--html-a:any-link:focus {
-    @include utrecht-link--focus;
-    @include utrecht-link--focus-visible;
-  }
-
-  .utrecht-link--html-span:focus:not(:focus-visible),
-  .utrecht-link--html-a:any-link:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset;
-  }
-} @else {
-  /* The `:focus-visible` styling for the focus should apply disabled links too, in case of `tabindex="0"` */
-  .utrecht-link--html-span:focus-visible,
-  .utrecht-link--html-a:focus-visible {
-    @include utrecht-link--focus-visible;
-  }
-
-  /* `:focus` should only apply to links with `href`, not on disabled links */
-  .utrecht-link--html-span:focus,
-  .utrecht-link--html-a:any-link:focus {
-    @include utrecht-link--focus;
-  }
+/* The `:focus-visible` styling for the focus should apply disabled links too, in case of `tabindex="0"` */
+.utrecht-link--html-span:focus-visible,
+.utrecht-link--html-a:focus-visible {
+  @include utrecht-link--focus-visible;
+}
+
+/* `:focus` should only apply to links with `href`, not on disabled links */
+.utrecht-link--html-span:focus,
+.utrecht-link--html-a:any-link:focus {
+  @include utrecht-link--focus;
 }
 
 .utrecht-link--html-span:active,

components/link/src/story-template.jsx

@@ -87,7 +87,6 @@ export const defaultArgs = {
   telephone: false,
   textContent: '',
   visited: false,
-  iconleft: false,
 };
 
 export const exampleArgs = {
@@ -112,7 +111,6 @@ export const Link = ({
   telephone = defaultArgs.telephone,
   textContent = defaultArgs.textContent,
   visited = defaultArgs.visited,
-  iconleft = defaultArgs.iconleft,
   ...restProps
 }) => (
   <a
@@ -129,7 +127,6 @@ export const Link = ({
       'utrecht-link--placeholder': placeholder,
       'utrecht-link--telephone': telephone,
       'utrecht-link--visited': visited,
-      'utrecht-link--icon-left': iconleft,
     })}
     rel={external ? 'external noopener noreferrer' : null}
     aria-label={ariaLabel || null}

components/link/src/tokens.json

@@ -76,6 +76,34 @@
           },
           "type": "color"
         },
+        "text-decoration": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": ["inherit", "none", "underline"],
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": ["utrecht.link.text-decoration"],
+            "nl.nldesignsystem.figma.supports-token": true,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.link.focus-visible.text-decoration"
+          },
+          "type": "textDecoration"
+        },
+        "text-decoration-thickness": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.fallback": ["utrecht.link.text-decoration-thickness"],
+            "nl.nldesignsystem.figma.supports-token": false,
+            "nl.nldesignsystem.deprecated": true,
+            "nl.nldesignsystem.redirect": "utrecht.link.focus-visible.text-decoration-thickness"
+          },
+          "type": "other"
+        }
+      },
+      "focus-visible": {
         "text-decoration": {
           "$extensions": {
             "nl.nldesignsystem.css.property": {