feat: default focus ring for Root component contents

Robbert · Robbert · commit 4d4079c30508 · 2026-03-30T11:29:37.000+02:00
diff --git a/.changeset/eleven-steaks-pretend.md b/.changeset/eleven-steaks-pretend.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/focus-ring-css": minor
+---
+
+Add mixins for default focus indicator for all focusable elements:
diff --git a/.changeset/shy-wasps-tan.md b/.changeset/shy-wasps-tan.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/html-content-css": minor
+---
+
+Add default focus indicator to all focusable elements inside the HTML Content component.
diff --git a/.changeset/silver-days-build.md b/.changeset/silver-days-build.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/root-css": minor
+---
+
+Add default focus indicator to all focusable elements inside the Root component.
diff --git a/components/focus-ring/src/_mixin.scss b/components/focus-ring/src/_mixin.scss
@@ -36,3 +36,21 @@
     @include utrecht-focus-visible;
   }
 }
+
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+@mixin utrecht-focus-ring-default {
+  :where(:focus-visible) {
+    @include utrecht-focus-ring;
+  }
+}
+
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+@mixin utrecht-focus-ring-default-container {
+  :where(&) :where(:focus-visible) {
+    @include utrecht-focus-ring;
+  }
+}
diff --git a/components/html-content/src/_mixin.scss b/components/html-content/src/_mixin.scss
@@ -15,6 +15,7 @@
 @use "~@utrecht/document-css/src/html/mixin" as *;
 @use "~@utrecht/emphasis-css/src/html/mixin" as *;
 @use "~@utrecht/figure-css/src/html/mixin" as *;
+@use "~@utrecht/focus-ring-css/src/mixin" as *;
 @use "~@utrecht/form-css/src/html/mixin" as *;
 @use "~@utrecht/form-fieldset-css/src/html/mixin" as *;
 @use "~@utrecht/form-label-css/src/html/mixin" as *;
@@ -74,5 +75,7 @@
 }
 
 @mixin utrecht-html-content-container {
+  @include utrecht-focus-ring-default-container;
+
   --utrecht-space-around: 1;
 }
diff --git a/components/root/package.json b/components/root/package.json
@@ -16,7 +16,8 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@utrecht/build-utils-css": "workspace:*"
+    "@utrecht/build-utils-css": "workspace:*",
+    "@utrecht/focus-ring-css": "workspace:*"
   },
   "keywords": [
     "nl-design-system"
diff --git a/components/root/src/_mixin.scss b/components/root/src/_mixin.scss
@@ -4,6 +4,8 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
+@use "~@utrecht/focus-ring-css/src/mixin" as *;
+
 @mixin reset-font-smoothing {
   /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
   -webkit-font-smoothing: auto !important;
@@ -13,7 +15,7 @@
 @mixin utrecht-root {
   /*
    * Goals:
-   * 
+   *
    * - take up 100% of the space, both horizontally and vertically.
    * - create a scrollable viewport experience both on `<html>` in the root,
    *   as well as on a `<div>` somewhere in a document.
@@ -43,3 +45,7 @@
   text-size-adjust: none;
   word-break: break-word;
 }
+
+@mixin utrecht-root__focus-indicator {
+  @include utrecht-focus-ring;
+}
diff --git a/components/root/src/html/_mixin.scss b/components/root/src/html/_mixin.scss
@@ -5,11 +5,14 @@
  */
 
 @use "../mixin" as *;
+@use "~@utrecht/focus-ring-css/src/mixin" as *;
 
 @mixin utrecht-html-html {
   html {
     @include utrecht-root;
   }
+
+  @include utrecht-focus-ring-default;
 }
 
 /**
@@ -20,4 +23,6 @@
   :root {
     @include utrecht-root;
   }
+
+  @include utrecht-focus-ring-default;
 }
diff --git a/components/root/src/index.scss b/components/root/src/index.scss
@@ -5,7 +5,9 @@
  */
 
 @use "./mixin" as *;
+@use "~@utrecht/focus-ring-css/src/mixin" as *;
 
 .utrecht-root {
   @include utrecht-root;
+  @include utrecht-focus-ring-default-container;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@utrecht/focus-ring-css": minor
 +---
++
 +Add mixins for default focus indicator for all focusable elements:
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`	`@use "~@utrecht/document-css/src/html/mixin" as *;`
`16`	`16`	`@use "~@utrecht/emphasis-css/src/html/mixin" as *;`
`17`	`17`	`@use "~@utrecht/figure-css/src/html/mixin" as *;`
	`18`	`+@use "~@utrecht/focus-ring-css/src/mixin" as *;`
`18`	`19`	`@use "~@utrecht/form-css/src/html/mixin" as *;`
`19`	`20`	`@use "~@utrecht/form-fieldset-css/src/html/mixin" as *;`
`20`	`21`	`@use "~@utrecht/form-label-css/src/html/mixin" as *;`
`@@ -74,5 +75,7 @@`
`74`	`75`	`}`
`75`	`76`
`76`	`77`	`@mixin utrecht-html-content-container {`
	`78`	`+ @include utrecht-focus-ring-default-container;`
	`79`	`+`
`77`	`80`	`--utrecht-space-around: 1;`
`78`	`81`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,14 @@`
`5`	`5`	`*/`
`6`	`6`
`7`	`7`	`@use "../mixin" as *;`
	`8`	`+@use "~@utrecht/focus-ring-css/src/mixin" as *;`
`8`	`9`
`9`	`10`	`@mixin utrecht-html-html {`
`10`	`11`	`html {`
`11`	`12`	`@include utrecht-root;`
`12`	`13`	`}`
	`14`	`+`
	`15`	`+ @include utrecht-focus-ring-default;`
`13`	`16`	`}`
`14`	`17`
`15`	`18`	`/**`
`@@ -20,4 +23,6 @@`
`20`	`23`	`:root {`
`21`	`24`	`@include utrecht-root;`
`22`	`25`	`}`
	`26`	`+`
	`27`	`+ @include utrecht-focus-ring-default;`
`23`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,9 @@`
`5`	`5`	`*/`
`6`	`6`
`7`	`7`	`@use "./mixin" as *;`
	`8`	`+@use "~@utrecht/focus-ring-css/src/mixin" as *;`
`8`	`9`
`9`	`10`	`.utrecht-root {`
`10`	`11`	`@include utrecht-root;`
	`12`	`+ @include utrecht-focus-ring-default-container;`
`11`	`13`	`}`