style: start using :focus-visible, Safari support has caught up

nl-design-system · Oct 6, 2024 · e177ced · e177ced
1 parent 5d0203d
commit e177ced
Show file tree

Hide file tree

Showing 17 changed files with 99 additions and 300 deletions.
diff --git a/.changeset/three-emus-juggle.md b/.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.
diff --git a/components/button/src/index.scss b/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),

diff --git a/components/checkbox/src/_mixin.scss b/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;
 }
diff --git a/components/checkbox/src/index.scss b/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;
 }
diff --git a/components/link/src/_mixin.scss b/components/link/src/_mixin.scss
@@ -210,25 +210,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;
   }
 }
diff --git a/components/link/src/html/_mixin.scss b/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] {

diff --git a/components/link/src/index.scss b/components/link/src/index.scss
@@ -36,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,

diff --git a/components/mapcontrolbutton/src/index.scss b/components/mapcontrolbutton/src/index.scss
@@ -46,30 +46,14 @@
   --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
 }
 
-// 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-mapcontrolbutton:focus:not(:disabled, [aria-disabled="true"], .utrecht-mapcontrolbutton--disabled) {
-    @extend .utrecht-mapcontrolbutton--focus;
-    @extend .utrecht-mapcontrolbutton--focus-visible;
-  }
-
-  /* override the `:focus` selector above */
-  /* stylelint-disable-next-line no-descending-specificity */
-  .utrecht-mapcontrolbutton:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset;
-  }
-} @else {
-  .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled="true"], .utrecht-mapcontrolbutton--disabled) {
-    @extend .utrecht-mapcontrolbutton--focus;
-  }
+.utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled="true"], .utrecht-mapcontrolbutton--disabled) {
+  @extend .utrecht-mapcontrolbutton--focus;
+}
 
-  /* override the `:focus` selector above */
-  /* stylelint-disable-next-line no-descending-specificity */
-  .utrecht-mapcontrolbutton:focus-visible {
-    @extend .utrecht-mapcontrolbutton--focus-visible;
-  }
+/* override the `:focus` selector above */
+/* stylelint-disable-next-line no-descending-specificity */
+.utrecht-mapcontrolbutton:focus-visible {
+  @extend .utrecht-mapcontrolbutton--focus-visible;
 }
 
 .utrecht-mapcontrolbutton--hover:not(:disabled),

diff --git a/components/menulijst/src/index.scss b/components/menulijst/src/index.scss
@@ -43,24 +43,10 @@
   @include utrecht-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 {
-  .utrecht-menulijst__link:focus {
-    @extend .utrecht-menulijst__link--focus;
-    @extend .utrecht-menulijst__link--focus-visible;
-  }
-
-  .utrecht-menulijst__link:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset;
-  }
-} @else {
-  .utrecht-menulijst__link:focus {
-    @extend .utrecht-menulijst__link--focus;
-  }
+.utrecht-menulijst__link:focus {
+  @extend .utrecht-menulijst__link--focus;
+}
 
-  .utrecht-menulijst__link:focus-visible {
-    @extend .utrecht-menulijst__link--focus-visible;
-  }
+.utrecht-menulijst__link:focus-visible {
+  @extend .utrecht-menulijst__link--focus-visible;
 }
diff --git a/components/navigatie sidenav/src/index.scss b/components/navigatie sidenav/src/index.scss
@@ -210,24 +210,10 @@
   }
 }
 
-// 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-sidenav__link:focus {
-    @extend .utrecht-sidenav__link--focus;
-    @extend .utrecht-sidenav__link--focus-visible;
-  }
-
-  .utrecht-sidenav__link:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset;
-  }
-} @else {
-  .utrecht-sidenav__link:focus {
-    @extend .utrecht-sidenav__link--focus;
-  }
+.utrecht-sidenav__link:focus {
+  @extend .utrecht-sidenav__link--focus;
+}
 
-  .utrecht-sidenav__link:focus-visible {
-    @extend .utrecht-sidenav__link--focus-visible;
-  }
+.utrecht-sidenav__link:focus-visible {
+  @extend .utrecht-sidenav__link--focus-visible;
 }
diff --git a/components/navigatie topnav/src/index.scss b/components/navigatie topnav/src/index.scss
@@ -68,24 +68,10 @@
   @include utrecht-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 {
-  .utrecht-topnav__link:focus {
-    @extend .utrecht-topnav__link--focus;
-    @extend .utrecht-topnav__link--focus-visible;
-  }
-
-  .utrecht-topnav__link:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset;
-  }
-} @else {
-  .utrecht-topnav__link:focus {
-    @extend .utrecht-topnav__link--focus;
-  }
+.utrecht-topnav__link:focus {
+  @extend .utrecht-topnav__link--focus;
+}
 
-  .utrecht-topnav__link:focus-visible {
-    @extend .utrecht-topnav__link--focus-visible;
-  }
+.utrecht-topnav__link:focus-visible {
+  @extend .utrecht-topnav__link--focus-visible;
 }
diff --git a/components/pagination/src/_mixin.scss b/components/pagination/src/_mixin.scss
@@ -97,28 +97,12 @@
   color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color));
 }
 
-// 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-pagination__page-link:focus,
-  .utrecht-pagination__relative-link:focus {
-    @include utrecht-focus;
-    @include utrecht-focus-ring;
-  }
-
-  .utrecht-pagination__page-link:focus:not(:focus-visible),
-  .utrecht-pagination__relative-link:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset;
-  }
-} @else {
-  .utrecht-pagination__page-link:focus,
-  .utrecht-pagination__relative-link:focus {
-    @include utrecht-focus;
-  }
+.utrecht-pagination__page-link:focus,
+.utrecht-pagination__relative-link:focus {
+  @include utrecht-focus;
+}
 
-  .utrecht-pagination__page-link:focus-visible,
-  .utrecht-pagination__relative-link:focus-visible {
-    @include utrecht-focus-visible;
-  }
+.utrecht-pagination__page-link:focus-visible,
+.utrecht-pagination__relative-link:focus-visible {
+  @include utrecht-focus-visible;
 }
diff --git a/components/pagination/src/index.scss b/components/pagination/src/index.scss
@@ -52,28 +52,12 @@
   @include utrecht-pagination__page-link--hover;
 }
 
-// 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-pagination__page-link:focus,
-  .utrecht-pagination__relative-link:focus {
-    @include utrecht-focus;
-    @include utrecht-focus-ring;
-  }
-
-  .utrecht-pagination__page-link:focus:not(:focus-visible),
-  .utrecht-pagination__relative-link:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset;
-  }
-} @else {
-  .utrecht-pagination__page-link:focus,
-  .utrecht-pagination__relative-link:focus {
-    @include utrecht-focus;
-  }
+.utrecht-pagination__page-link:focus,
+.utrecht-pagination__relative-link:focus {
+  @include utrecht-focus;
+}
 
-  .utrecht-pagination__page-link:focus-visible,
-  .utrecht-pagination__relative-link:focus-visible {
-    @include utrecht-focus-visible;
-  }
+.utrecht-pagination__page-link:focus-visible,
+.utrecht-pagination__relative-link:focus-visible {
+  @include utrecht-focus-visible;
 }