@navikt/ds-css 7.30.0 → 7.30.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 7.30.1
+
+### Patch Changes
+
+- Darkside: Improved screen reader experience in Radio and Checkbox by moving description out of label ([#4066](https://github.com/navikt/aksel/pull/4066))
+
 ## 7.30.0
 
 ### Minor Changes

package/darkside/form/radio-checkbox.darkside.css

@@ -1,294 +1,291 @@
 .aksel-checkbox,
 .aksel-radio {
+  --__axc-radio-checkbox-marker-size: 1.5rem;
+  --__axc-radio-checkbox-marker-target: 2.75rem; /* We want the click area to be a bit larger than the visible radio/checkbox */
+
   position: relative;
   width: fit-content;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--ax-space-2) 0;
+  padding: var(--ax-space-12) 0; /* We need spacing even bellow the last element to allocate space for the clickable area */
+
+  /* Focus outline */
+  &:focus-within::after {
+    content: "";
+    position: absolute;
+    inset: var(--ax-space-12) 0;
+    pointer-events: none;
+    border-radius: var(--ax-radius-4);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
 }
 
-.aksel-checkbox__input,
-.aksel-radio__input {
-  position: absolute;
-  width: 3rem;
-  height: 3rem;
-  top: 0;
-  left: -0.75rem;
-  z-index: 1;
-  opacity: 0;
-  cursor: pointer;
+/* Small */
+.aksel-checkbox--small,
+.aksel-radio--small {
+  --__axc-radio-checkbox-marker-size: 1.25rem;
+  --__axc-radio-checkbox-marker-target: 2rem;
+
+  padding: var(--ax-space-6) 0;
+
+  /* Focus outline */
+  &:focus-within::after {
+    inset: var(--ax-space-6) 0;
+  }
 }
 
+/* Label */
 .aksel-checkbox__label,
 .aksel-radio__label {
-  padding: var(--ax-space-12) 0;
   cursor: pointer;
-  display: flex;
-  gap: var(--ax-space-8);
-
-  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
-  --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
 }
 
-.aksel-checkbox__label::before,
-.aksel-radio__label::before {
-  content: "";
-  border-radius: var(--ax-radius-4);
-  background-color: var(--ax-bg-input);
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: 2px solid var(--ax-border-neutral);
-}
-
-.aksel-radio__label::before {
-  border-radius: var(--ax-radius-full);
+/* Description */
+.aksel-checkbox__description,
+.aksel-radio__description {
+  grid-column-start: 2;
 }
 
-.aksel-checkbox__content,
-.aksel-radio__content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
+/* Spacing between marker and text */
+.aksel-checkbox__label,
+.aksel-radio__label,
+.aksel-checkbox__description,
+.aksel-radio__description {
+  padding-left: var(--ax-space-8);
 }
 
-.aksel-checkbox--small > .aksel-checkbox__input,
-.aksel-radio--small > .aksel-radio__input {
-  width: 2rem;
-  height: 2rem;
-  top: 0;
-  left: -0.375rem;
+/* Checkbox has a wrapper around input and checkmark svg (consider creating the checkmark with css in the future) */
+.aksel-checkbox__input-wrapper {
+  position: relative;
+  height: var(--__axc-radio-checkbox-marker-size);
 }
 
-.aksel-checkbox--small > .aksel-checkbox__label,
-.aksel-radio--small > .aksel-radio__label {
-  padding: var(--ax-space-6) 0;
-}
+/* The input acts as a container for the marker (since the click area should be larger than the visible marker) */
+.aksel-checkbox__input,
+.aksel-radio__input {
+  --__axc-radio-checkbox-marker-border: 2px;
 
-.aksel-checkbox--small > .aksel-checkbox__label::before,
-.aksel-radio--small > .aksel-radio__label::before {
-  width: 1.25rem;
-  height: 1.25rem;
+  -webkit-appearance: none; /* Safari <= 15.3 */
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+  width: var(--__axc-radio-checkbox-marker-size);
+  height: var(--__axc-radio-checkbox-marker-size);
+  background-color: var(--ax-bg-input);
+  border: var(--__axc-radio-checkbox-marker-border) solid var(--ax-border-neutral);
+  border-radius: var(--ax-radius-4);
+  position: relative;
 }
 
-.aksel-checkbox__input:focus + .aksel-checkbox__label::after,
-.aksel-radio__input:focus + .aksel-radio__label::after {
+/* Visible marker */
+.aksel-checkbox__input::before,
+.aksel-radio__input::before {
   content: "";
   position: absolute;
-  width: 100%;
-  height: calc(100% - var(--ax-space-24));
-  border-radius: var(--ax-radius-4);
-  outline: 3px solid var(--ax-border-focus);
-  outline-offset: 3px;
-  pointer-events: none;
+  inset: calc(
+    -1 * (var(--__axc-radio-checkbox-marker-border) +
+          (var(--__axc-radio-checkbox-marker-target) - var(--__axc-radio-checkbox-marker-size)) / 2)
+  );
 }
 
-.aksel-checkbox--small > .aksel-checkbox__input:focus + .aksel-checkbox__label::after,
-.aksel-radio--small > .aksel-radio__input:focus + .aksel-radio__label::after {
-  height: calc(100% - var(--ax-space-12));
+/* Radio marker should be round */
+.aksel-radio__input {
+  border-radius: var(--ax-radius-full);
 }
 
-.aksel-checkbox__icon-indeterminate {
-  display: none;
+/* Checkbox indeterminate: Center the icon */
+.aksel-checkbox__input:indeterminate {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-  display: block;
+/* Checkbox indeterminate icon */
+.aksel-checkbox__input:indeterminate::after {
+  content: "";
   width: 0.75rem;
   height: 0.25rem;
   background-color: var(--ax-bg-default);
   border-radius: 1px;
   position: absolute;
-  transform: translate(var(--ax-space-6), -50%);
-  top: var(--ax-space-24);
-  pointer-events: none;
-}
-
-.aksel-checkbox--small .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-  transform: translate(var(--ax-space-4), -50%);
-  top: var(--ax-space-16);
-  height: 0.1875rem;
 }
 
-.aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label::before {
+/* Checkbox marker colors in checked/indeterminate state */
+.aksel-checkbox__input:where(:checked, :indeterminate) {
   background-color: var(--ax-bg-strong-pressed);
   border-color: var(--ax-bg-strong-pressed);
 }
 
-.aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .aksel-checkbox__label::before {
+/* Checkbox marker colors in checked/indeterminate + hover state (unless disabled) */
+.aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover {
   border-color: var(--ax-bg-strong-hover);
   background-color: var(--ax-bg-strong-hover);
 }
 
-.aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__label > .aksel-checkbox__icon {
+/* Checkbox checkmark: Hide when unchecked */
+.aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__icon {
   display: none;
 }
 
-.aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
+/* Checkbox checkmark */
+.aksel-checkbox__icon {
   color: var(--ax-bg-default);
-  position: absolute;
-  height: 1.5rem;
-  transform: translate(var(--ax-space-6));
   pointer-events: none;
-
-  /* Fixed edcase where when using in shadow-dom, svg will not center */
-  display: flex;
-  align-items: center;
-}
-
-.aksel-checkbox--small .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
-  transform: translate(0.25rem, -10%);
+  width: 0.8125rem; /* Safari does not support inline rem-values in SVG */
+  height: var(--__axc-radio-checkbox-marker-size);
+  position: absolute;
+  top: 0;
+  left: var(--ax-space-6);
 }
 
-.aksel-checkbox__icon > svg {
-  display: block;
-
-  /* Safari does not support inline rem-values in SVG */
-  width: 0.8125rem;
-  height: 0.625rem;
+/* Small Checkbox checkmark position */
+.aksel-checkbox--small .aksel-checkbox__input:checked + .aksel-checkbox__icon {
+  left: var(--ax-space-4);
 }
 
-.aksel-checkbox--small > .aksel-checkbox__input:checked + .aksel-checkbox__label::before {
-  background-position: 0.25rem center;
-}
+/* Radio marker colors in checked state */
+.aksel-radio__input:checked {
+  --__axc-radio-checkbox-marker-border: 8px;
 
-.aksel-radio__input:checked + .aksel-radio__label::before {
+  border-color: var(--ax-bg-strong-pressed);
   background-color: var(--ax-bg-input);
-  border: 8px solid var(--ax-bg-strong-pressed);
 }
 
-.aksel-radio--small > .aksel-radio__input:checked + .aksel-radio__label::before {
-  border-width: 6px;
+/* Small Radio dot size in checked state */
+.aksel-radio--small > .aksel-radio__input:checked {
+  --__axc-radio-checkbox-marker-border: 7px;
 }
 
-.aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
-.aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label::before {
+/* Marker colors in unchecked hover state (unless disabled) */
+.aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate),
+.aksel-radio__input:hover:not(:disabled, :checked) {
   border-color: var(--ax-border-strong);
   background-color: var(--ax-bg-moderate-hoverA);
 }
 
-.aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label::before,
-.aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label::before {
+/* Marker colors in unchecked error state (unless disabled) */
+.aksel-checkbox--error .aksel-checkbox__input:not(:disabled, :checked, :indeterminate),
+.aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) {
   border-color: var(--ax-border-danger-strong);
 }
 
-.aksel-radio--error > .aksel-radio__input:checked + .aksel-radio__label::before {
-  border-color: var(--ax-bg-danger-strong-pressed);
-}
-
+/* Opacity in disabled state */
 .aksel-checkbox--disabled,
 .aksel-radio--disabled {
   opacity: var(--ax-opacity-disabled);
 }
 
-.aksel-checkbox--disabled > .aksel-checkbox__input,
-.aksel-checkbox--disabled > .aksel-checkbox__label,
-.aksel-radio--disabled > .aksel-radio__input,
-.aksel-radio--disabled > .aksel-radio__label {
+/* Cursor in disabled state on otherwise clickable elements */
+.aksel-checkbox--disabled :where(.aksel-checkbox__input, .aksel-checkbox__label),
+.aksel-radio--disabled > :where(.aksel-radio__input, .aksel-radio__label) {
   cursor: not-allowed;
 }
 
-/* Readonly */
-.aksel-checkbox--readonly > :where(.aksel-checkbox__input, .aksel-checkbox__label),
+/* Cursor in readonly state on otherwise clickable elements */
+.aksel-checkbox--readonly :where(.aksel-checkbox__input, .aksel-checkbox__label),
 .aksel-radio--readonly > :where(.aksel-radio__input, .aksel-radio__label) {
   cursor: default;
 }
 
-.aksel-checkbox--readonly .aksel-checkbox__label-text {
-  display: inline-flex;
+/* Marker colors in readonly state (`:not(:disabled)` is just to get same specificity as (hence override) hover colors) */
+.aksel-checkbox--readonly .aksel-checkbox__input:not(:disabled),
+.aksel-radio--readonly > .aksel-radio__input:not(:disabled) {
+  background-color: var(--ax-bg-neutral-moderate);
+  border-color: var(--ax-border-neutral-subtle);
 }
 
-.aksel-checkbox--readonly > .aksel-checkbox__input:not(:disabled) + .aksel-checkbox__label::before,
-.aksel-checkbox--readonly > .aksel-checkbox__input:hover .aksel-checkbox__label::before,
-.aksel-radio--readonly > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label::before,
-.aksel-radio--readonly > .aksel-radio__input:hover:not(:checked, :focus) + .aksel-radio__label::before {
-  background-color: var(--__axc-radio-checkbox-readonly-bg);
-  border-color: var(--__axc-radio-checkbox-readonly-border);
-}
+.aksel-checkbox--readonly {
+  /* Needed to center the lock icon on standalone checkbox */
+  .aksel-checkbox__label {
+    display: inline-flex;
+  }
 
-.aksel-checkbox--readonly > .aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label::before {
-  border-color: var(--__axc-radio-checkbox-readonly-border);
-  background-color: var(--__axc-radio-checkbox-readonly-bg);
-}
+  /* Checkbox checkmark color in readonly + checked state */
+  .aksel-checkbox__input:checked + .aksel-checkbox__icon {
+    color: var(--ax-text-neutral-subtle);
+  }
 
-.aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
-  color: var(--ax-text-neutral-subtle);
+  /* Checkbox indeterminate icon color in readonly + indeterminate state */
+  .aksel-checkbox__input:indeterminate::after {
+    background-color: var(--ax-text-neutral-subtle);
+  }
 }
 
-.aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label::before {
+/* Radio marker colors in readonly + checked state */
+.aksel-radio--readonly > .aksel-radio__input:checked {
+  --__axc-radio-checkbox-marker-border: 0px; /* Needs unit for calc() to work */
+
   background-color: var(--ax-bg-neutral-strong);
-  border-width: 0;
   box-shadow:
     inset 0 0 0 2px var(--ax-border-neutral-subtle),
     inset 0 0 0 8px var(--ax-bg-neutral-moderate);
 }
 
-.aksel-radio--small.aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label::before {
+/* Small Radio dot size in readonly + checked state */
+.aksel-radio--small.aksel-radio--readonly > .aksel-radio__input:checked {
   box-shadow:
     inset 0 0 0 2px var(--ax-border-neutral-subtle),
     inset 0 0 0 7px var(--ax-bg-neutral-moderate);
 }
 
-.aksel-checkbox--readonly > .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-  background-color: var(--ax-text-neutral-subtle);
-}
-
+/* High contrast mode */
 @media (forced-colors: active) {
-  .aksel-checkbox,
-  .aksel-radio {
-    --__axc-radio-checkbox-high-contrast-bg: field;
-    --__axc-radio-checkbox-high-contrast-text: fieldtext;
-    --__axc-radio-checkbox-high-contrast-highlight: highlight;
-
-    /* TODO: Consider adding this to global scope */
-    --ax-border-focus: Highlight;
-  }
-
-  .aksel-checkbox__label::before,
-  .aksel-radio__label::before {
-    border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
-    background-color: var(--__axc-radio-checkbox-high-contrast-bg);
+  /* Checkbox indeterminate icon color */
+  :is(.aksel-checkbox, .aksel-checkbox--readonly) .aksel-checkbox__input:indeterminate::after {
+    background-color: fieldtext;
   }
 
-  .aksel-checkbox__input:checked + .aksel-checkbox__label > .aksel-checkbox__icon {
-    color: var(--__axc-radio-checkbox-high-contrast-text);
+  /* Label color on hover (unless readonly/disabled) */
+  .aksel-checkbox:not(.aksel-checkbox--readonly):has(.aksel-checkbox__input:hover:not(:disabled)) > .aksel-checkbox__label,
+  .aksel-radio:not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) + .aksel-radio__label {
+    color: highlight;
   }
 
-  .aksel-checkbox__input:indeterminate + .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-    background-color: var(--__axc-radio-checkbox-high-contrast-text);
+  /* Marker border color on hover (unless readonly/disabled) */
+  .aksel-checkbox:not(.aksel-checkbox--readonly) .aksel-checkbox__input:hover:not(:disabled),
+  .aksel-radio:not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) {
+    border-color: highlight;
   }
 
-  .aksel-radio__input:checked + .aksel-radio__label::before {
-    border: 6px solid var(--__axc-radio-checkbox-high-contrast-text);
+  /* Checkbox checkmark color in readonly + checked state */
+  .aksel-checkbox--readonly .aksel-checkbox__input:checked + .aksel-checkbox__icon {
+    color: var(--ax-bg-default);
   }
 
-  :not(.aksel-checkbox--readonly) > .aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label,
-  :not(.aksel-radio--readonly) > .aksel-radio__input:hover:not(:disabled) + .aksel-radio__label {
-    color: highlight;
+  /* Radio dot size in readonly + checked state */
+  .aksel-radio--readonly > .aksel-radio__input:checked {
+    --__axc-radio-checkbox-marker-border: 8px;
   }
 
-  .aksel-checkbox--readonly > .aksel-checkbox__input:checked + .aksel-checkbox__label::before {
-    border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
-    background-color: var(--__axc-radio-checkbox-high-contrast-bg);
-  }
-
-  .aksel-checkbox--readonly
-    > .aksel-checkbox__input:indeterminate
-    + .aksel-checkbox__label
-    > .aksel-checkbox__icon-indeterminate {
-    background-color: var(--__axc-radio-checkbox-high-contrast-text);
-  }
-
-  .aksel-radio--readonly > .aksel-radio__input:checked + .aksel-radio__label::before {
-    border-width: 6px;
+  /* Small Radio dot size in readonly + checked state */
+  .aksel-radio--small.aksel-radio--readonly > .aksel-radio__input:checked {
+    --__axc-radio-checkbox-marker-border: 7px;
   }
 
+  /* Turn off disabled state transparency */
   .aksel-checkbox--disabled,
   .aksel-radio--disabled {
     opacity: 1;
+  }
+
+  /* Marker colors in disabled state */
+  .aksel-checkbox--disabled .aksel-checkbox__input,
+  .aksel-radio--disabled .aksel-radio__input {
+    border-color: graytext;
+    background-color: field;
+  }
 
-    --__axc-radio-checkbox-high-contrast-bg: field;
-    --__axc-radio-checkbox-high-contrast-text: graytext;
+  /* Checkbox indeterminate icon color in disabled state */
+  .aksel-checkbox--disabled .aksel-checkbox__input:indeterminate::after {
+    background-color: graytext;
   }
 
-  :is(.aksel-checkbox--disabled, .aksel-radio--disabled) :is(.aksel-checkbox__label, .aksel-radio__label) {
+  /* Text/icon color in disabled state */
+  .aksel-checkbox--disabled
+    :is(.aksel-checkbox__label, .aksel-checkbox__description, .aksel-checkbox__input:checked + .aksel-checkbox__icon),
+  .aksel-radio--disabled :is(.aksel-radio__label, .aksel-radio__description) {
     color: graytext;
   }
 }

package/darkside/table.darkside.css

@@ -131,32 +131,12 @@
 }
 
 /* TODO: Look to handle "inline"-checkbox better than custom CSS-overrides in the future. */
-.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input {
-  top: -0.75rem;
-}
-
-.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox--small .aksel-checkbox__input {
-  top: -0.375rem;
-}
-
-.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__label {
+.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox {
   padding: 0;
 }
 
-.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__label > .aksel-checkbox__icon-indeterminate {
-  top: var(--ax-space-12);
-}
-
-.aksel-table
-  tr:not(.aksel-table__expanded-row)
-  .aksel-checkbox--small
-  .aksel-checkbox__label
-  > .aksel-checkbox__icon-indeterminate {
-  top: 0.6rem;
-}
-
-.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox__input:focus + .aksel-checkbox__label::after {
-  height: 100%;
+.aksel-table tr:not(.aksel-table__expanded-row) .aksel-checkbox:focus-within::after {
+  inset: 0;
 }
 
 .aksel-table__header-cell[aria-sort] {