[Select] 🐛 Focus-border no longer cancels out error-border. (#3465)

* 🐛 Focus-border no longer cancels out error-border. * ♻️ Optimize CSS selectors, fix textarea * 📝 Changeset
navikt · Dec 19, 2024 · 0017789 · 0017789
1 parent 38f5e63
commit 0017789
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/.changeset/late-turkeys-drive.md b/.changeset/late-turkeys-drive.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Select: :bug: Focus-border no longer cancels out error-border.
diff --git a/.changeset/young-goats-smash.md b/.changeset/young-goats-smash.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Textarea: :bug: Focus-border no longer cancels out error-border.
diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css
@@ -73,11 +73,15 @@
 /**
   Error handling
 */
-.navds-select--error > * select:not(:hover, :focus, :disabled) {
+.navds-select--error > * .navds-select__input:not(:hover, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
   border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
 
+.navds-select--error .navds-select__input:focus {
+  box-shadow: var(--a-shadow-focus);
+}
+
 /**
   Disabled
 */

diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css
@@ -111,16 +111,13 @@
 /**
   Error handling
 */
-.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
+.navds-textarea--error .navds-textarea__input:not(:hover, :disabled) {
   box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
-@supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
-    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  }
+.navds-textarea--error .navds-textarea__input:focus-visible {
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-textarea__input:disabled {