From 9570156c7025ef4ce042c6a3ad8a00ac31b3d95f Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 07:59:54 +0200
Subject: [PATCH 01/11] :art: Button focus-visible

---
 @navikt/core/css/button.css | 99 ++++++++++++++++++++++++++++++++-----
 1 file changed, 87 insertions(+), 12 deletions(-)

diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css
index 509cda098d..36c9d3694b 100644
--- a/@navikt/core/css/button.css
+++ b/@navikt/core/css/button.css
@@ -63,11 +63,18 @@
   padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
 }
 
-.navds-button:focus {
+.navds-button:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 .navds-button__icon {
   --ac-button-icon-margin: -4px;
 
@@ -114,10 +121,16 @@
   background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
 }
 
-.navds-button--primary:focus {
+.navds-button--primary:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--primary:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
 .navds-button--primary:active:where(:disabled, .navds-button--disabled) {
   background-color: var(--ac-button-primary-bg, var(--a-surface-action));
@@ -140,10 +153,16 @@
   background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
 }
 
-.navds-button--primary-neutral:focus {
+.navds-button--primary-neutral:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--primary-neutral:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
 .navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
   background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
@@ -164,20 +183,32 @@
   background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
-.navds-button--secondary:focus {
+.navds-button--secondary:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--secondary:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--secondary:active {
   color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
   background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
   box-shadow: none;
 }
 
-.navds-button--secondary:focus:active {
+.navds-button--secondary:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--secondary:focus:active {
+    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-text, var(--a-text-action));
@@ -199,22 +230,36 @@
   background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
 }
 
-.navds-button--secondary-neutral:focus {
+.navds-button--secondary-neutral:focus-visible {
   color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--secondary-neutral:focus {
+    color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+    box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--secondary-neutral:active {
   color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
   background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
   box-shadow: none;
 }
 
-.navds-button--secondary-neutral:focus:active {
+.navds-button--secondary-neutral:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
     var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--secondary-neutral:focus:active {
+    box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+      var(--a-shadow-focus);
+  }
+}
+
 .navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
 .navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
@@ -236,10 +281,16 @@
   background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
-.navds-button--tertiary:focus {
+.navds-button--tertiary:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--tertiary:active {
   color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
   background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
@@ -250,10 +301,16 @@
   background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
 }
 
-.navds-button--tertiary:active:focus {
+.navds-button--tertiary:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary:focus:active {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--tertiary:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
@@ -276,10 +333,16 @@
   background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
 }
 
-.navds-button--tertiary-neutral:focus {
+.navds-button--tertiary-neutral:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary-neutral:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--tertiary-neutral:active {
   color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
   background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
@@ -290,10 +353,16 @@
   background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
 }
 
-.navds-button--tertiary-neutral:active:focus {
+.navds-button--tertiary-neutral:focus-visible:active {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--tertiary-neutral:focus:active {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
@@ -320,10 +389,16 @@
   background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
 }
 
-.navds-button--danger:focus {
+.navds-button--danger:focus-visible {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-button--danger:focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 .navds-button--danger:active:where(:disabled, .navds-button--disabled),
 .navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
   background-color: var(--ac-button-danger-bg, var(--a-surface-danger));

From 3dc93c5dc0ece48bd6d5fd2ffc742696bdb774a5 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:02:58 +0200
Subject: [PATCH 02/11] :art: Chips

---
 @navikt/core/css/chat.css  |  5 -----
 @navikt/core/css/chips.css | 24 ++++++++++++++++++++++++
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/@navikt/core/css/chat.css b/@navikt/core/css/chat.css
index 183d1e3eb2..4a559d93bc 100644
--- a/@navikt/core/css/chat.css
+++ b/@navikt/core/css/chat.css
@@ -56,11 +56,6 @@
   gap: var(--a-spacing-2);
 }
 
-.navds-chat__bubble:focus {
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
-}
-
 .navds-chat--right .navds-chat__bubble {
   border-radius: var(--a-border-radius-xlarge);
   border-bottom-right-radius: 2px;
diff --git a/@navikt/core/css/chips.css b/@navikt/core/css/chips.css
index 4e4c3823e3..eae4a00e24 100644
--- a/@navikt/core/css/chips.css
+++ b/@navikt/core/css/chips.css
@@ -63,6 +63,18 @@
   box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
 }
 
+@supports not selector(:focus-visible) {
+  .navds-chips__toggle:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  }
+
+  .navds-chips__toggle[aria-pressed="true"]:focus,
+  .navds-chips__toggle:active:focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  }
+}
+
 .navds-chips__removable {
   gap: 0;
 }
@@ -117,6 +129,18 @@
   box-shadow: 0 0 0 2px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-chips__removable--action:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
+  }
+
+  .navds-chips__removable--neutral:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+}
+
 .navds-chips__removable--action:hover {
   background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
 }

From f0d7c6b495911fe21e163351057720e36478017c Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:05:51 +0200
Subject: [PATCH 03/11] :art: Date focus-visible

---
 @navikt/core/css/date.css | 50 ++++++++++++++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/@navikt/core/css/date.css b/@navikt/core/css/date.css
index f8170bf4b8..0b3e22d11b 100644
--- a/@navikt/core/css/date.css
+++ b/@navikt/core/css/date.css
@@ -73,16 +73,30 @@
   border-radius: var(--a-border-radius-xlarge);
 }
 
-.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
-.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
   box-shadow: var(--a-shadow-focus);
 }
 
-.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
-.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
+  .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
+.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
+  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 /* Monthpicker */
 .navds-date__month-button {
   all: unset;
@@ -94,12 +108,20 @@
   cursor: pointer;
 }
 
-.navds-date__month-button:focus,
-.navds-monthpicker__caption-button:focus {
+.navds-date__month-button:focus-visible,
+.navds-monthpicker__caption-button:focus-visible {
   box-shadow: var(--a-shadow-focus);
   z-index: 1;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-date__month-button:focus,
+  .navds-monthpicker__caption-button:focus {
+    box-shadow: var(--a-shadow-focus);
+    z-index: 1;
+  }
+}
+
 .navds-date__year-label {
   display: flex;
   align-items: center;
@@ -126,11 +148,17 @@
 }
 
 /* Focus layering */
-.navds-date__field-input:focus,
+.navds-date__field-input:focus-visible,
 .navds-date__field-button {
   z-index: 1;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-date__field-input:focus {
+    z-index: 1;
+  }
+}
+
 .navds-date .rdp-day_selected,
 .navds-monthpicker__month--selected {
   color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -183,10 +211,16 @@
   box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
 }
 
-.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
+    box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
+
 .navds-date__field-button {
   position: absolute;
   right: var(--a-spacing-2);

From c5e5520f6c11a037b411756ae220475381872869 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:07:04 +0200
Subject: [PATCH 04/11] :art: expansioncard focus-visible

---
 @navikt/core/css/expansioncard.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/@navikt/core/css/expansioncard.css b/@navikt/core/css/expansioncard.css
index 56d1900f1c..832c0bf2c6 100644
--- a/@navikt/core/css/expansioncard.css
+++ b/@navikt/core/css/expansioncard.css
@@ -123,14 +123,17 @@
   transform: translateY(1px);
 }
 
-.navds-expansioncard__header-button:focus {
-  outline: none;
-}
-
 .navds-expansioncard__header-button:focus-visible {
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-expansioncard__header-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 .navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
   transform: translateY(-1px) rotate(180deg);
 }

From fdd81cb73ddbe7f0764a6e0e9298a945825cd80e Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:09:14 +0200
Subject: [PATCH 05/11] :art: Helptext

---
 @navikt/core/css/expansioncard.css |  1 +
 @navikt/core/css/help-text.css     | 24 ++++++++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/@navikt/core/css/expansioncard.css b/@navikt/core/css/expansioncard.css
index 832c0bf2c6..ce4deb04a0 100644
--- a/@navikt/core/css/expansioncard.css
+++ b/@navikt/core/css/expansioncard.css
@@ -124,6 +124,7 @@
 }
 
 .navds-expansioncard__header-button:focus-visible {
+  outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
diff --git a/@navikt/core/css/help-text.css b/@navikt/core/css/help-text.css
index bff700ab21..cc2c55e963 100644
--- a/@navikt/core/css/help-text.css
+++ b/@navikt/core/css/help-text.css
@@ -12,11 +12,17 @@
   font-size: 1.5rem;
 }
 
-.navds-help-text__button:focus {
-  outline: none;
+.navds-help-text__button:focus-visible {
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  }
+}
+
 .navds-help-text__icon {
   border-radius: var(--a-border-radius-full);
 }
@@ -36,10 +42,20 @@
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon {
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
 }
+
+@supports not selector(:focus-visible) {
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon {
+    display: none;
+  }
+
+  .navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
+    display: inherit;
+  }
+}

From 9e4e0a6042367b0fe5dc0ec22826010979e5ee58 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:15:24 +0200
Subject: [PATCH 06/11] :art: general components focus-visible

---
 @navikt/core/css/link-panel.css   |  9 ++++++++-
 @navikt/core/css/link.css         | 12 +++++++++++-
 @navikt/core/css/modal.css        | 10 +++++++++-
 @navikt/core/css/pagination.css   |  8 +++++++-
 @navikt/core/css/popover.css      |  9 ++++++++-
 @navikt/core/css/read-more.css    |  9 ++++++++-
 @navikt/core/css/stepper.css      | 10 +++++++++-
 @navikt/core/css/table.css        | 17 +++++++++++++++--
 @navikt/core/css/tabs.css         | 17 ++++++++++++++++-
 @navikt/core/css/toggle-group.css | 24 ++++++++++++++++++++++--
 10 files changed, 113 insertions(+), 12 deletions(-)

diff --git a/@navikt/core/css/link-panel.css b/@navikt/core/css/link-panel.css
index 6be3eab3e2..de81690c97 100644
--- a/@navikt/core/css/link-panel.css
+++ b/@navikt/core/css/link-panel.css
@@ -17,11 +17,18 @@
   border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
 }
 
-.navds-link-panel:focus {
+.navds-link-panel:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-link-panel:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
 .navds-link-panel__chevron {
   flex-shrink: 0;
   font-size: 1.5rem;
diff --git a/@navikt/core/css/link.css b/@navikt/core/css/link.css
index d95d61beda..7f21099037 100644
--- a/@navikt/core/css/link.css
+++ b/@navikt/core/css/link.css
@@ -15,7 +15,7 @@
   text-decoration: none;
 }
 
-.navds-link:focus {
+.navds-link:focus-visible {
   outline: none;
   color: var(--ac-link-focus-text, var(--a-text-on-action));
   text-decoration: none;
@@ -23,6 +23,16 @@
   box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
 }
 
+@supports not selector(:focus-visible) {
+  .navds-link:focus {
+    outline: none;
+    color: var(--ac-link-focus-text, var(--a-text-on-action));
+    text-decoration: none;
+    background-color: var(--ac-link-focus-bg, var(--a-border-focus));
+    box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+  }
+}
+
 .navds-link:active {
   outline: none;
   color: var(--ac-link-active-text, var(--a-text-on-action));
diff --git a/@navikt/core/css/modal.css b/@navikt/core/css/modal.css
index 90a888fbb1..10dc8087cb 100644
--- a/@navikt/core/css/modal.css
+++ b/@navikt/core/css/modal.css
@@ -15,12 +15,20 @@
   padding: var(--a-spacing-4);
 }
 
-.navds-modal:focus,
+.navds-modal:focus-visible,
 .navds-modal--focus {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-modal:focus,
+  .navds-modal--focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
 .navds-modal__overlay {
   position: fixed;
   z-index: var(--a-z-index-modal);
diff --git a/@navikt/core/css/pagination.css b/@navikt/core/css/pagination.css
index 020643ca58..e540f2c48a 100644
--- a/@navikt/core/css/pagination.css
+++ b/@navikt/core/css/pagination.css
@@ -35,10 +35,16 @@
   color: var(--ac-pagination-selected-text, var(--a-text-on-action));
 }
 
-.navds-pagination__item[aria-current="true"]:focus {
+.navds-pagination__item[aria-current="true"]:focus-visible {
   box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-pagination__item[aria-current="true"]:focus {
+    box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 .navds-pagination__prev-next {
   display: flex;
   align-items: center;
diff --git a/@navikt/core/css/popover.css b/@navikt/core/css/popover.css
index 2bc4a5fb1d..b0b653a9cf 100644
--- a/@navikt/core/css/popover.css
+++ b/@navikt/core/css/popover.css
@@ -15,11 +15,18 @@
   display: none;
 }
 
-.navds-popover:focus {
+.navds-popover:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-popover:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 .navds-popover__arrow {
   position: absolute;
   z-index: -1;
diff --git a/@navikt/core/css/read-more.css b/@navikt/core/css/read-more.css
index 9050a257e5..e63daa629d 100644
--- a/@navikt/core/css/read-more.css
+++ b/@navikt/core/css/read-more.css
@@ -24,11 +24,18 @@
   background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
 }
 
-.navds-read-more__button:focus {
+.navds-read-more__button:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-read-more__button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 .navds-read-more__content {
   margin-top: var(--a-spacing-1);
   border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
diff --git a/@navikt/core/css/stepper.css b/@navikt/core/css/stepper.css
index 1bc05a09b1..7f9a85605f 100644
--- a/@navikt/core/css/stepper.css
+++ b/@navikt/core/css/stepper.css
@@ -80,12 +80,20 @@ button.navds-stepper__step {
   cursor: default;
 }
 
-:where(.navds-stepper__step):focus {
+:where(.navds-stepper__step):focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
   isolation: isolate;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-stepper__step:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+    isolation: isolate;
+  }
+}
+
 .navds-stepper__circle {
   grid-column: circle;
   display: inline-grid;
diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css
index 4f36b553a6..8e0a735845 100644
--- a/@navikt/core/css/table.css
+++ b/@navikt/core/css/table.css
@@ -119,11 +119,18 @@
   background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
 }
 
-.navds-table__sort-button:focus {
+.navds-table__sort-button:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-table__sort-button:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
   background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
@@ -181,10 +188,16 @@
   padding: var(--a-spacing-2);
 }
 
-.navds-table__toggle-expand-button:focus {
+.navds-table__toggle-expand-button:focus-visible {
   box-shadow: inset var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-table__toggle-expand-button:focus {
+    box-shadow: inset var(--a-shadow-focus);
+  }
+}
+
 .navds-table__expandable-icon {
   font-size: 1.5rem;
 }
diff --git a/@navikt/core/css/tabs.css b/@navikt/core/css/tabs.css
index bc2cbb6b62..2d52335ac3 100644
--- a/@navikt/core/css/tabs.css
+++ b/@navikt/core/css/tabs.css
@@ -62,12 +62,20 @@
   color: var(--ac-tabs-selected-text, var(--a-text-default));
 }
 
-.navds-tabs__tab:focus {
+.navds-tabs__tab:focus-visible {
   outline: none;
   box-shadow: inset var(--a-shadow-focus);
   color: var(--ac-tabs-focus-text, var(--a-text-default));
 }
 
+@supports not selector(:focus-visible) {
+  .navds-tabs__tab:focus {
+    outline: none;
+    box-shadow: inset var(--a-shadow-focus);
+    color: var(--ac-tabs-focus-text, var(--a-text-default));
+  }
+}
+
 .navds-tabs__tab-inner {
   display: flex;
   align-items: center;
@@ -112,3 +120,10 @@
   outline: none;
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
+
+@supports not selector(:focus-visible) {
+  .navds-tabs__tabpanel:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
diff --git a/@navikt/core/css/toggle-group.css b/@navikt/core/css/toggle-group.css
index c14a8d1f71..759f6cadbf 100644
--- a/@navikt/core/css/toggle-group.css
+++ b/@navikt/core/css/toggle-group.css
@@ -49,20 +49,40 @@
   color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
 }
 
-.navds-toggle-group__button:focus {
+.navds-toggle-group__button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
 }
 
-.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+@supports not selector(:focus-visible) {
+  .navds-toggle-group__button:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
+  }
+}
+
+.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
   box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+    box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
+  }
+}
+
 .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
   box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
     0 0 0 4px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
+    box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+      0 0 0 4px var(--a-border-focus);
+  }
+}
+
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;

From 72034a6de53d2f5e2e1d97eb1d71e603c7a746f7 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:18:47 +0200
Subject: [PATCH 07/11] :art: Checkbox focus-visible

---
 @navikt/core/css/form/error-summary.css  |  9 ++-
 @navikt/core/css/form/radio-checkbox.css | 89 ++++++++++++++++++++----
 2 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/@navikt/core/css/form/error-summary.css b/@navikt/core/css/form/error-summary.css
index 319ff36858..0c32e9c635 100644
--- a/@navikt/core/css/form/error-summary.css
+++ b/@navikt/core/css/form/error-summary.css
@@ -8,11 +8,18 @@
   padding: var(--a-spacing-3);
 }
 
-.navds-error-summary:focus {
+.navds-error-summary:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-error-summary:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
 .navds-error-summary__list {
   margin: var(--a-spacing-3) 0;
   display: flex;
diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index bb66915512..e41e16cf08 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -65,16 +65,30 @@
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
+.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
+.navds-radio__input:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
 }
 
-.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
-.navds-radio__input:hover:focus + .navds-radio__label::before {
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:focus + .navds-checkbox__label::before,
+  .navds-radio__input:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
+  }
+}
+
+.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
+.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
+  .navds-radio__input:hover:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
+  }
+}
+
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
   box-shadow: none;
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
@@ -109,22 +123,36 @@
   background-position: 4px center;
 }
 
-.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
-.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
+.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
   box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
+  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
+    box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
+
 .navds-radio__input:checked + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
     inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
   background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
-.navds-radio__input:checked:focus + .navds-radio__label::before {
+.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
     inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-radio__input:checked:focus + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+      inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
+  }
+}
+
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
   color: var(--ac-radio-checkbox-action, var(--a-surface-action));
@@ -135,6 +163,14 @@
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
+@supports not selector(:focus-visible) {
+  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
+    + .navds-checkbox__label::before,
+  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
+  }
+}
+
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
@@ -148,28 +184,55 @@
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-checkbox--error
+    > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
+
 .navds-checkbox--error
-  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
-  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  > .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate)
   + .navds-checkbox__label::before,
-.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
   background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-checkbox--error
+    > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+  }
+
+  .navds-checkbox--error
+    > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+    + .navds-checkbox__label::before,
+  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
+    background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+    box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+}
+
 .navds-checkbox--disabled,
 .navds-radio--disabled {
   opacity: 0.3;

From 2dda64d023b10d58047713e23b05652e207618dc Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:22:34 +0200
Subject: [PATCH 08/11] :art: All form components with focus-visible

---
 @navikt/core/css/form/search.css     | 46 +++++++++++++++++++++++-----
 @navikt/core/css/form/select.css     |  9 +++++-
 @navikt/core/css/form/switch.css     |  8 ++++-
 @navikt/core/css/form/text-field.css | 17 ++++++++--
 @navikt/core/css/form/textarea.css   | 18 +++++++++--
 5 files changed, 85 insertions(+), 13 deletions(-)

diff --git a/@navikt/core/css/form/search.css b/@navikt/core/css/form/search.css
index 0cc6e6d203..7c6ab2de59 100644
--- a/@navikt/core/css/form/search.css
+++ b/@navikt/core/css/form/search.css
@@ -86,11 +86,18 @@
   color: var(--ac-search-clear-icon-hover, var(--a-text-action));
 }
 
-.navds-search__button-clear:focus {
+.navds-search__button-clear:focus-visible {
   box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
+@supports not selector(:focus-visible) {
+  .navds-search__button-clear:focus {
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
 .navds-search__button-search {
   flex-shrink: 0;
   min-width: 64px;
@@ -126,31 +133,56 @@
   z-index: auto;
 }
 
-.navds-search__button-search.navds-button--secondary:focus {
+.navds-search__button-search.navds-button--secondary:focus-visible {
   box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
 }
 
-.navds-search__button-search.navds-button--secondary:focus:hover {
+.navds-search__button-search.navds-button--secondary:focus-visible:hover {
   box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
 }
 
-.navds-search__button-search.navds-button--secondary:focus:active {
+.navds-search__button-search.navds-button--secondary:focus-visible:active {
   box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-search__button-search.navds-button--secondary:focus {
+    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:hover {
+    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:active {
+    box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
+  }
+}
+
 /* Error-handling */
 .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
   border-color: var(--ac-search-error-border, var(--a-border-danger));
   box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
 }
 
-.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 /* Focus layering */
-.navds-search__input:focus,
+.navds-search__input:focus-visible,
 .navds-search__button-clear,
-.navds-search__button-search:focus {
+.navds-search__button-search:focus-visible {
   z-index: 1;
 }
+
+@supports not selector(:focus-visible) {
+  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  }
+
+  .navds-search__input:focus,
+  .navds-search__button-search:focus {
+    z-index: 1;
+  }
+}
diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css
index 5b43171fc9..d56f5665ee 100644
--- a/@navikt/core/css/form/select.css
+++ b/@navikt/core/css/form/select.css
@@ -17,11 +17,18 @@
   border-color: var(--ac-select-hover-bg, var(--a-border-action));
 }
 
-.navds-select__input:focus {
+.navds-select__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-select__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 .navds-select__container {
   position: relative;
   display: flex;
diff --git a/@navikt/core/css/form/switch.css b/@navikt/core/css/form/switch.css
index bc6b43559c..147028a46d 100644
--- a/@navikt/core/css/form/switch.css
+++ b/@navikt/core/css/form/switch.css
@@ -110,10 +110,16 @@
   background-color: var(--ac-switch-checked-bg, var(--a-border-success));
 }
 
-.navds-switch__input:focus ~ .navds-switch__track {
+.navds-switch__input:focus-visible ~ .navds-switch__track {
   box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-switch__input:focus ~ .navds-switch__track {
+    box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+  }
+}
+
 /* Thumb */
 .navds-switch__thumb {
   background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
diff --git a/@navikt/core/css/form/text-field.css b/@navikt/core/css/form/text-field.css
index 2abcfc7213..1822f9aef2 100644
--- a/@navikt/core/css/form/text-field.css
+++ b/@navikt/core/css/form/text-field.css
@@ -35,11 +35,18 @@
   border-color: var(--ac-textfield-hover-border, var(--a-border-action));
 }
 
-.navds-text-field__input:focus {
+.navds-text-field__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-text-field__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 /**
   Error handling
 */
@@ -48,10 +55,16 @@
   box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
 }
 
-.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
   box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
+    box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
+  }
+}
+
 /* Disabled handling */
 .navds-text-field__input:disabled {
   background-color: var(--ac-textfield-bg, var(--a-surface-default));
diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css
index b906bd10a9..60d3a28e8c 100644
--- a/@navikt/core/css/form/textarea.css
+++ b/@navikt/core/css/form/textarea.css
@@ -38,11 +38,18 @@
   border-color: var(--ac-textarea-hover-border, var(--a-border-action));
 }
 
-.navds-textarea__input:focus {
+.navds-textarea__input:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navds-textarea__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
 .navds-form-field--small .navds-textarea__input {
   padding: 6px;
 }
@@ -73,11 +80,18 @@
 /**
   Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
   border-color: var(--ac-textarea-error-border, var(--a-border-danger));
 }
 
+@supports not selector(:focus-visible) {
+  .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
+    border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+  }
+}
+
 .navds-textarea__input:disabled {
   background-color: var(--ac-textarea-bg, var(--a-surface-default));
   border-color: var(--ac-textarea-border, var(--a-border-default));

From 42aaa76385256ce32cf74399f7e2bd87f6ae5af9 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:34:12 +0200
Subject: [PATCH 09/11] :bug: Fikset checkbox hover/focus

---
 @navikt/core/css/form/radio-checkbox.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index e41e16cf08..2d081307f7 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -158,15 +158,15 @@
   color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
-.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
-.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
+.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
+  + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
   box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 @supports not selector(:focus-visible) {
-  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
-    + .navds-checkbox__label::before,
-  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
+  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
+  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
     box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
   }
 }

From 6c10bf4b7b91630bd0702ced86290c783452c248 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:38:32 +0200
Subject: [PATCH 10/11] :art: Internal focus-visible

---
 @navikt/internal/css/dropdown.css |  7 +++++
 @navikt/internal/css/header.css   | 12 ++++++--
 @navikt/internal/css/timeline.css | 51 +++++++++++++++++++++++++++----
 3 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/@navikt/internal/css/dropdown.css b/@navikt/internal/css/dropdown.css
index 0d90e30690..796d78e762 100644
--- a/@navikt/internal/css/dropdown.css
+++ b/@navikt/internal/css/dropdown.css
@@ -63,6 +63,13 @@
   box-shadow: inset 0 0 0 2px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navdsi-dropdown__item:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
 .navdsi-dropdown__item:disabled {
   color: var(--ac-dropdown-item-text, var(--a-text-action));
   opacity: 0.3;
diff --git a/@navikt/internal/css/header.css b/@navikt/internal/css/header.css
index 132caffc56..a4e392c0fe 100644
--- a/@navikt/internal/css/header.css
+++ b/@navikt/internal/css/header.css
@@ -59,12 +59,20 @@ button.navdsi-header__title:hover,
   background-color: var(--ac-header-hover-bg, var(--a-surface-inverted-hover));
 }
 
-.navdsi-header__title:focus,
-.navdsi-header__button:focus {
+.navdsi-header__title:focus-visible,
+.navdsi-header__button:focus-visible {
   box-shadow: var(--navdsi-header-focus);
   outline: none;
 }
 
+@supports not selector(:focus-visible) {
+  .navdsi-header__title:focus,
+  .navdsi-header__button:focus {
+    box-shadow: var(--navdsi-header-focus);
+    outline: none;
+  }
+}
+
 a.navdsi-header__title:active,
 button.navdsi-header__title:active,
 .navdsi-header__button:active {
diff --git a/@navikt/internal/css/timeline.css b/@navikt/internal/css/timeline.css
index ed844af0ff..0fa4f019a3 100644
--- a/@navikt/internal/css/timeline.css
+++ b/@navikt/internal/css/timeline.css
@@ -190,7 +190,7 @@
   top: calc(-12.5px + 3.5px);
 }
 
-.navdsi-timeline__pin-button:focus {
+.navdsi-timeline__pin-button:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
     0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
@@ -202,12 +202,27 @@
     0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
 }
 
-.navdsi-timeline__pin-button:hover:focus {
+.navdsi-timeline__pin-button:hover:focus-visible {
   box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
     0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
     0 0 0 6px var(--a-border-focus);
 }
 
+@supports not selector(:focus-visible) {
+  .navdsi-timeline__pin-button:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+    outline: none;
+  }
+
+  .navdsi-timeline__pin-button:hover:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+  }
+}
+
 .navdsi-timeline__pin-wrapper::before {
   content: "";
   top: var(--navdsc-timeline-pin-size);
@@ -255,13 +270,13 @@
   color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
 }
 
-.navdsi-timeline__period:focus {
+.navdsi-timeline__period:focus-visible {
   outline: none;
   z-index: 4;
   box-shadow: 0 0 0 2px var(--a-border-focus);
 }
 
-.navdsi-timeline__period--selected:focus {
+.navdsi-timeline__period--selected:focus-visible {
   box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
     0 0 0 2px var(--a-border-focus);
   z-index: 3;
@@ -271,12 +286,36 @@
   z-index: var(--a-z-index-focus);
 }
 
-.navdsi-timeline__zoom-button:focus {
+.navdsi-timeline__zoom-button:focus-visible {
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
   border-width: 1px;
 }
 
-.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus {
+.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus-visible {
   margin-right: 2px;
   padding-right: 6px;
 }
+
+@supports not selector(:focus-visible) {
+  .navdsi-timeline__period:focus {
+    outline: none;
+    z-index: 4;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+
+  .navdsi-timeline__period--selected:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+      0 0 0 2px var(--a-border-focus);
+    z-index: 3;
+  }
+
+  .navdsi-timeline__zoom-button:focus {
+    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+    border-width: 1px;
+  }
+
+  .navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus {
+    margin-right: 2px;
+    padding-right: 6px;
+  }
+}

From 3b9bc8d68ae7648fd8a83bab00e43e84af5c18dc Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 10 May 2023 08:39:33 +0200
Subject: [PATCH 11/11] :memo: Changeset

---
 .changeset/silent-fishes-glow.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/silent-fishes-glow.md

diff --git a/.changeset/silent-fishes-glow.md b/.changeset/silent-fishes-glow.md
new file mode 100644
index 0000000000..b97420f753
--- /dev/null
+++ b/.changeset/silent-fishes-glow.md
@@ -0,0 +1,7 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-css-internal": minor
+---
+
+:lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
+(Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)