Version Packages (#2592 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Radio component a11y fixes (#2562 )
2026-10-16 10:42:03 +00:00 · 2024-01-05 12:34:59 +01:00 · 2024-01-05 12:31:54 +01:00 · 2024-01-05 11:56:55 +01:00 · 2024-01-05 11:56:38 +01:00 · 2024-01-04 20:17:12 +01:00
33 changed files with 275 additions and 156 deletions
@@ -99,14 +99,6 @@ jobs:
          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}

-      - name: Wait for e2e-tests to succeed
-        uses: lewagon/wait-on-check-action@v1.2.0
-        with:
-          ref: ${{ github.ref }}
-          check-name: "Smoketest Aksel"
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          wait-interval: 10
-
      - name: Deploy to prod-gcp
        uses: nais/deploy/actions/deploy@master
        env:
@@ -1,48 +0,0 @@
-name: Smoketest aksel.nav.no
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - "aksel.nav.no/**"
-
-env:
-  IMAGE: ghcr.io/navikt/aksel
-
-jobs:
-  smoketest:
-    name: Smoketest Aksel
-    runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.35.1-jammy
-    steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "20"
-      - uses: actions/checkout@v3
-      - name: add tokens to .env
-        run: |
-          echo "SANITY_WRITE_KEY=${{ secrets.SANITY_FEEDBACK_WRITE_KEY }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
-          echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
-
-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-prod-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-prod-
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: build packages
-        run: |
-          yarn boot
-
-      - name: Build application
-        run: yarn workspace aksel.nav.no build:next
-
-      - name: E2E smoketest
-        run: yarn workspace website e2e:ci
@@ -1,5 +1,11 @@
 # @navikt/aksel-icons

+## 5.12.4
+
+## 5.12.3
+
+## 5.12.2
+
 ## 5.12.1

 ## 5.12.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.12.1",
+  "version": "5.12.4",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,15 @@
 # @navikt/aksel-stylelint

+## 5.12.4
+
+### Patch Changes
+
+- Stylelint: Støtter nå stylelint v16 ([#2591](https://github.com/navikt/aksel/pull/2591))
+
+## 5.12.3
+
+## 5.12.2
+
 ## 5.12.1

 ## 5.12.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.12.1",
+  "version": "5.12.4",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^5.12.1",
-    "@navikt/ds-tokens": "^5.12.1",
+    "@navikt/ds-css": "^5.12.4",
+    "@navikt/ds-tokens": "^5.12.4",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -5,4 +5,4 @@ const rulesPlugins = Object.keys(rules).map((ruleName) => {
  return createPlugin(`${ruleName}`, rules[ruleName]);
 });

-export default rulesPlugins;
+module.exports = rulesPlugins;
@@ -1,5 +1,26 @@
 # @navikt/aksel

+## 5.12.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.12.4
+
+## 5.12.3
+
+### Patch Changes
+
+- Updated dependencies [[`1b71fe01c`](https://github.com/navikt/aksel/commit/1b71fe01cb152e3327972e96018e94a44d4128d6)]:
+  - @navikt/ds-css@5.12.3
+
+## 5.12.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@5.12.2
+
 ## 5.12.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.12.1",
+  "version": "5.12.4",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "5.12.1",
+    "@navikt/ds-css": "5.12.4",
    "axios": "1.6.0",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,15 @@
 # @navikt/ds-css

+## 5.12.4
+
+## 5.12.3
+
+### Patch Changes
+
+- ExpansionCard: Divider mellom header og innhold ([#2566](https://github.com/navikt/aksel/pull/2566))
+
+## 5.12.2
+
 ## 5.12.1

 ## 5.12.0
@@ -2,6 +2,8 @@
  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
  --__ac-expansioncard-border-width: 1px;
+  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-6);

  border-radius: var(--__ac-expansioncard-border-radius);
  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
@@ -30,7 +32,7 @@
  width: 100%;
  display: flex;
  gap: var(--a-spacing-4);
-  padding: var(--a-spacing-4) var(--a-spacing-6);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
  border-radius: var(--__ac-expansioncard-border-radius);
  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
  position: relative;
@@ -38,8 +40,9 @@
  justify-content: space-between;
 }

-.navds-expansioncard--small > :where(.navds-expansioncard__header) {
-  padding: var(--a-spacing-3) var(--a-spacing-4);
+.navds-expansioncard--small {
+  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
 }

 .navds-expansioncard__header:hover {
@@ -61,6 +64,22 @@
    0 -1px 0 0 var(--__ac-expansioncard-border-color);
 }

+.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
+  content: "";
+  background-color: var(--a-border-divider);
+  bottom: 0;
+  left: var(--__ac-expansioncard-padding-inline);
+  height: 1px;
+  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
+  position: absolute;
+  opacity: 1;
+  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
+  opacity: 0;
+}
+
 /*************************
 * Header/Typography *
 *************************/
@@ -156,17 +175,16 @@
 * Content *
 *************************/
 .navds-expansioncard__content {
+  --__ac-expansioncard-padding-block: var(--a-spacing-3);
+
  border-end-end-radius: var(--__ac-expansioncard-border-radius);
  border-end-start-radius: var(--__ac-expansioncard-border-radius);
-  padding: var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6);
+  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
+    var(--__ac-expansioncard-padding-inline);
  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
  border-top: none;
 }

-.navds-expansioncard--small > :where(.navds-expansioncard__content) {
-  padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
-}
-
 .navds-expansioncard__content--closed {
  display: none;
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.12.1",
+  "version": "5.12.4",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.12.1",
+    "@navikt/ds-tokens": "^5.12.4",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,33 @@
 # @navikt/ds-react

+## 5.12.4
+
+### Patch Changes
+
+- Accessibility improvements to Radio and Checkbox component, so each label is only announced once with screen readers ([#2562](https://github.com/navikt/aksel/pull/2562))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.12.4
+  - @navikt/aksel-icons@5.12.4
+
+## 5.12.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.12.3
+  - @navikt/aksel-icons@5.12.3
+
+## 5.12.2
+
+### Patch Changes
+
+- :memo: Modal: Oppdatert JSDoc ([#2567](https://github.com/navikt/aksel/pull/2567))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@5.12.2
+  - @navikt/aksel-icons@5.12.2
+
 ## 5.12.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.12.1",
+  "version": "5.12.4",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,8 +38,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.12.1",
-    "@navikt/ds-tokens": "^5.12.1",
+    "@navikt/aksel-icons": "^5.12.4",
+    "@navikt/ds-tokens": "^5.12.4",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -70,7 +70,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
      >
        <fieldset
          {...omit(rest, ["errorId", "error", "size", "readOnly"])}
-          {...inputProps}
+          {...omit(inputProps, ["aria-describedby", "aria-invalid"])}
          ref={ref}
          className={cl(
            className,
@@ -1,6 +1,6 @@
-import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import faker from "faker";
+import React from "react";
 import { Checkbox, CheckboxGroup } from ".";

 const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
-import { omit } from "../../util";
+import { omit, useId } from "../../util";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
@@ -10,6 +10,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
  (props, ref) => {
    const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);

+    const labelId = useId();
+    const descriptionId = useId();
+
    return (
      <div
        className={cl(
@@ -34,7 +37,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
            "errorId",
            "readOnly",
          ])}
-          {...inputProps}
+          {...omit(inputProps, ["aria-invalid"])}
          type="checkbox"
          className="navds-checkbox__input"
          aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
@@ -49,6 +52,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
              ref.current = el;
            }
          }}
+          aria-labelledby={cl(
+            labelId,
+            !!props["aria-labelledby"] && props["aria-labelledby"],
+            {
+              [descriptionId]: props.description,
+            }
+          )}
        />
        <label htmlFor={inputProps.id} className="navds-checkbox__label">
          <span className="navds-checkbox__icon">
@@ -75,8 +85,10 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
          >
            <BodyShort
              as="span"
+              id={labelId}
              size={size}
              className="navds-checkbox__label-text"
+              aria-hidden
            >
              {!nested && (
                <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
@@ -86,8 +98,10 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
            {props.description && (
              <BodyShort
                as="span"
+                id={descriptionId}
                size={size}
                className="navds-form-field__subdescription navds-checkbox__description"
+                aria-hidden
              >
                {props.description}
              </BodyShort>
@@ -134,27 +134,31 @@ export const SingleSmall = () => (
  </div>
 );

-export const SingleDescription = () => (
-  <div className="colspan">
-    <Checkbox value="tekst" description="checkboxdescription">
-      Checkboxtekst
-    </Checkbox>
-    <Checkbox value="tekst" defaultChecked description="checkboxdescription">
-      Checkboxtekst
-    </Checkbox>
-  </div>
-);
-
-export const SingleError = () => (
-  <div className="colspan">
-    <Checkbox value="tekst" error>
-      Checkboxtekst
-    </Checkbox>
-    <Checkbox value="tekst" defaultChecked error>
-      Checkboxtekst
-    </Checkbox>
-  </div>
-);
+export const SingleDescription = () => {
+  const [isValueSelected, setValueSelected] = useState(false);
+  return (
+    <CheckboxGroup
+      legend="Hvor vil du sitte?"
+      className="colspan"
+      error={!isValueSelected ? "Du må velge en sitteplass" : undefined}
+    >
+      <Checkbox
+        onChange={() => setValueSelected(true)}
+        value="foran"
+        description="Tilgjengelig med rullestol"
+      >
+        Foran
+      </Checkbox>
+      <Checkbox
+        onChange={() => setValueSelected(true)}
+        value="tekst"
+        description="Adgang via trapp med to trinn"
+      >
+        Bak
+      </Checkbox>
+    </CheckboxGroup>
+  );
+};

 export const Indeterminate = () => {
  const [checked, setChecked] = useState([true, false]);
@@ -1,13 +1,16 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
-import { omit } from "../../util";
+import { omit, useId } from "../../util";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";

 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
  const { inputProps, size, hasError, readOnly } = useRadio(props);

+  const labelId = useId();
+  const descriptionId = useId();
+
  return (
    <div
      className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
@@ -18,20 +21,29 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
    >
      <input
        {...omit(props, ["children", "size", "description", "readOnly"])}
-        {...inputProps}
+        {...omit(inputProps, ["aria-invalid"])}
+        aria-labelledby={cl(
+          labelId,
+          !!props["aria-labelledby"] && props["aria-labelledby"],
+          {
+            [descriptionId]: props.description,
+          }
+        )}
        className="navds-radio__input"
        ref={ref}
      />
      <label htmlFor={inputProps.id} className="navds-radio__label">
        <span className="navds-radio__content">
-          <BodyShort as="span" size={size}>
+          <BodyShort as="span" id={labelId} size={size} aria-hidden>
            {props.children}
          </BodyShort>
          {props.description && (
            <BodyShort
              as="span"
+              id={descriptionId}
              size={size}
              className="navds-form-field__subdescription navds-radio__description"
+              aria-hidden
            >
              {props.description}
            </BodyShort>
@@ -60,16 +60,33 @@ export const Group = () => (
  </RadioGroup>
 );

-export const GroupError = () => (
-  <RadioGroup
-    legend="Group legend"
-    defaultValue="tekst2"
-    error="Group errormelding"
-  >
-    <Radio value="tekst">Radiotekst</Radio>
-    <Radio value="tekst2">Radiotekst</Radio>
-  </RadioGroup>
-);
+export const GroupError = () => {
+  const [isValueSelected, setValueSelected] = useState(false);
+  return (
+    <>
+      <button>Stop her</button>
+      <RadioGroup
+        legend="Velg din aldersgruppe"
+        description="Informasjonen blir brukt for å gi deg bedre søketreff."
+        error={!isValueSelected ? "Du må velge en aldersgruppe" : undefined}
+      >
+        <Radio onChange={() => setValueSelected(true)} value="0-20">
+          0-20 år
+        </Radio>
+        <Radio
+          onChange={() => setValueSelected(true)}
+          value="21-45"
+          description="Gjelder fra året man blir 21"
+        >
+          21-45 år
+        </Radio>
+        <Radio onChange={() => setValueSelected(true)} value="46-100">
+          46-100 år
+        </Radio>
+      </RadioGroup>
+    </>
+  );
+};

 export const GroupSmall = () => (
  <RadioGroup legend="Group legend" defaultValue="tekst2" size="small">
@@ -34,18 +34,21 @@ export interface ModalProps
   */
  onClose?: React.ReactEventHandler<HTMLDialogElement>;
  /**
-   * Called when the user wants to close the modal (clicked the close button or pressed Esc).
+   * Called when the user tries to close the modal by one of the built-in methods.
+   * Used if you want to ask the user for confirmation before closing.
+   * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
   * @returns Whether to close the modal
   */
  onBeforeClose?: () => boolean | void;
  /**
-   * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
+   * *Sometimes** called when the user presses the Esc key, unless you return `false` in `onBeforeClose()`.
+   * @warning *Some browsers does not always trigger this event. Chrome only triggers it if you have
+   *  interacted with the modal, and will not trigger it a second time if you press Esc twice in a row.
   */
  onCancel?: React.ReactEventHandler<HTMLDialogElement>;
  /**
   * Whether to close when clicking on the backdrop.
-   *
-   * **WARNING:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
+   * @warning Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
   * @default false
   */
  closeOnBackdropClick?: boolean;
@@ -27,7 +27,7 @@ const maybeReactUseId: undefined | (() => string) = (React as any)[
 * @param idOverride
 * @returns {string}
 */
-export function useId(idOverride?: string): string | undefined {
+export function useId(idOverride?: string): string {
  if (maybeReactUseId !== undefined) {
    const reactId = maybeReactUseId();
    return idOverride ?? reactId.replace(/(:)/g, "");
@@ -1,5 +1,11 @@
 # @navikt/ds-tailwind

+## 5.12.4
+
+## 5.12.3
+
+## 5.12.2
+
 ## 5.12.1

 ## 5.12.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.12.1",
+  "version": "5.12.4",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -24,7 +24,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.12.1",
+    "@navikt/ds-tokens": "^5.12.4",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,11 @@
 # @navikt/ds-tokens

+## 5.12.4
+
+## 5.12.3
+
+## 5.12.2
+
 ## 5.12.1

 ## 5.12.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.12.1",
+  "version": "5.12.4",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -8,10 +8,22 @@

 ### @navikt/ds-react

+- Accessibility improvements to Radio and Checkbox component, so each label is only announced once with screen readers ([#2562](https://github.com/navikt/aksel/pull/2562))
+
+* :memo: Modal: Oppdatert JSDoc ([#2567](https://github.com/navikt/aksel/pull/2567))
+
 - Checkbox: Checkmark tilpasses bedre fontsize ([#2563](https://github.com/navikt/aksel/pull/2563))

 - Datepicker: Lukk-knapp i modal har nå type button for å unngå form-submition ([#2568](https://github.com/navikt/aksel/pull/2568))

+### @navikt/ds-css
+
+- ExpansionCard: Divider mellom header og innhold ([#2566](https://github.com/navikt/aksel/pull/2566))
+
+### @navikt/aksel-stylelint
+
+- Stylelint: Støtter nå stylelint v16 ([#2591](https://github.com/navikt/aksel/pull/2591))
+
 ## 5.11

 ### @navikt/aksel-icons
@@ -16,11 +16,11 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.12.1",
-    "@navikt/ds-css": "^5.12.1",
-    "@navikt/ds-react": "^5.12.1",
-    "@navikt/ds-tailwind": "^5.12.1",
-    "@navikt/ds-tokens": "^5.12.1"
+    "@navikt/aksel-icons": "^5.12.4",
+    "@navikt/ds-css": "^5.12.4",
+    "@navikt/ds-react": "^5.12.4",
+    "@navikt/ds-tailwind": "^5.12.4",
+    "@navikt/ds-tokens": "^5.12.4"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -19,7 +19,7 @@ module.exports = {
  useScope: path.resolve("./src/useScope.tsx"),
  openBrowser: false,
  paramType: "search", // default is 'hash'
-  iframeSandbox: "allow-scripts allow-same-origin",
+  iframeSandbox: "allow-scripts allow-same-origin allow-modals",
  exampleCode: `
  <Heading>This is a sandbox!</Heading>
  <HStack gap="10">
@@ -1,35 +1,43 @@
 .header-animated-bg {
-  animation: animated-bg 60s ease infinite;
  z-index: 0;
+  animation: animated-bg 60s ease infinite;
+
+  --bg-animated-1: #dccaf3;
+  --bg-animated-2: #b2f0e4;
+}
+
+/* Allows dark-reader to show frontpage: https://nav-it.slack.com/archives/C7NE7A8UF/p1704272426011129 */
+[data-darkreader-scheme] .header-animated-bg {
+  animation: none;
 }

@keyframes animated-bg {
  0% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
  }

  10% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
  }

  33% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
  }

  45% {
-    background-color: #b2f0e4;
+    background-color: var(--bg-animated-2);
  }

  60% {
-    background-color: #b2f0e4;
+    background-color: var(--bg-animated-2);
  }

  90% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
  }

  100% {
-    background-color: #dccaf3;
+    background-color: var(--bg-animated-1);
  }
 }

@@ -16,7 +16,6 @@
    "update:searchindex": "ts-node --project tsconfig.json ./scripts/create-index",
    "e2e": "yarn build && yarn start-server-and-test start http://localhost:3000 playwright",
    "e2e:full": "yarn build && ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
-    "e2e:ci": " yarn start-server-and-test start http://localhost:3000 playwright",
    "e2e:ci-full": "ts-node ./e2e/genUrls.ts && FULL_TEST=true yarn start-server-and-test start http://localhost:3000 playwright",
    "update:rss": "ts-node --project tsconfig.tsnode.json ./scripts/generate-rss-feed",
    "update:props": "ts-node --project tsconfig.tsnode.json ./scripts/update-props",
@@ -3,11 +3,11 @@ import { Button, ErrorSummary } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";

 const Example = () => {
-  const errorRef = useRef(null);
+  const errorRef = useRef<HTMLDivElement>(null);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
-    errorRef?.current && errorRef.current.focus();
+    errorRef.current && errorRef.current.focus();
  }, [hasError]);

  return (
@@ -40,4 +40,5 @@ export const Demo = {

 export const args = {
  index: 3,
+  desc: "Sett fokus på ErrorSummary ved submit. Hvis du gjør en ny sidelasting kan du også sette en ID på ErrorSummary og referere til den i URLens hash.",
 };
@@ -3431,7 +3431,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@^5.11.4, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.12.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3458,8 +3458,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
  dependencies:
-    "@navikt/ds-css": ^5.11.4
-    "@navikt/ds-tokens": ^5.11.4
+    "@navikt/ds-css": ^5.12.0
+    "@navikt/ds-tokens": ^5.12.0
    "@types/jest": ^29.0.0
    concurrently: 7.2.1
    copyfiles: 2.4.1
@@ -3477,7 +3477,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": 5.11.4
+    "@navikt/ds-css": 5.12.0
    "@types/inquirer": ^9.0.3
    "@types/jest": ^29.0.0
    axios: 1.6.0
@@ -3501,11 +3501,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@*, @navikt/ds-css@5.11.4, @navikt/ds-css@^5.11.4, @navikt/ds-css@^5.9.2, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.12.0, @navikt/ds-css@^5.12.0, @navikt/ds-css@^5.9.2, @navikt/ds-css@workspace:@navikt/core/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css@workspace:@navikt/core/css"
  dependencies:
-    "@navikt/ds-tokens": ^5.11.4
+    "@navikt/ds-tokens": ^5.12.0
    cssnano: 6.0.0
    fast-glob: 3.2.11
    lodash: 4.17.21
@@ -3518,13 +3518,13 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@*, @navikt/ds-react@^5.11.4, @navikt/ds-react@^5.9.2, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@^5.12.0, @navikt/ds-react@^5.9.2, @navikt/ds-react@workspace:@navikt/core/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react@workspace:@navikt/core/react"
  dependencies:
    "@floating-ui/react": 0.25.4
-    "@navikt/aksel-icons": ^5.11.4
-    "@navikt/ds-tokens": ^5.11.4
+    "@navikt/aksel-icons": ^5.12.0
+    "@navikt/ds-tokens": ^5.12.0
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -3558,11 +3558,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^5.11.4, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.12.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
  dependencies:
-    "@navikt/ds-tokens": ^5.11.4
+    "@navikt/ds-tokens": ^5.12.0
    "@types/jest": ^29.0.0
    color: 4.2.3
    jest: ^29.0.0
@@ -3574,7 +3574,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^5.11.4, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.12.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -8570,11 +8570,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": ^5.11.4
-    "@navikt/ds-css": ^5.11.4
-    "@navikt/ds-react": ^5.11.4
-    "@navikt/ds-tailwind": ^5.11.4
-    "@navikt/ds-tokens": ^5.11.4
+    "@navikt/aksel-icons": ^5.12.0
+    "@navikt/ds-css": ^5.12.0
+    "@navikt/ds-react": ^5.12.0
+    "@navikt/ds-tailwind": ^5.12.0
+    "@navikt/ds-tokens": ^5.12.0
    prettier-plugin-tailwindcss: ^0.2.3
  languageName: unknown
  linkType: soft
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	6c89a942d2	Version Packages (#2592 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-01-05 12:34:59 +01:00
Vegard HaugstvedtandKen	7a743b582f	Radio component a11y fixes (#2562 ) * Remove aria-invalid from individual Radio components because it is placed on the FieldSet * Radio label and description should only be announced once with a screen reader * Legg til mer realistiske tekster i eksempelet * Checkbox label and description should only be announced once with a screen reader When using multiple elements (span, etc) inside of a label, each one will be added as a screen reader "stop" and announced both as part of the label and as a separate text element. Using this technique overrides this, to create the same experience as if the was only text inside of the label (native-like). * Legg til mer realistiske tekster i eksempelet * Remove aria-invalid from Checkbox and Radio, as it is redundant when we include an error message. * Remove error message from example when we select an option * Add error message to single description example to make it easier to test both * Remove aria-describedby from Fieldset, because the error is connected to the input field * 🐛 Fikset duplikat label-text funnet i tester * Use local useId hook because of supporting React 17 and less * Add changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com>	2024-01-05 12:31:54 +01:00
Ken	42b31a0fe9	Stylelint v16 bug (#2591 ) * 🐛 esm default export -> cjs module.export * 📝 Changeset	2024-01-05 11:56:55 +01:00
Ken	a4401b8535	🏷️ Bedre typet lokal useId (#2589 )	2024-01-05 11:56:38 +01:00
github-actions[bot]andgithub-actions[bot]	c67d3e3d1e	Version Packages (#2590 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-01-04 20:17:12 +01:00
Ken	1b71fe01cb	ExpansionCard divider (#2566 ) * ♻️ Bruker tokens internt for padding, lagt til divider * 🎨 transition on opacity * 📝 Changeset	2024-01-04 20:10:35 +01:00
Ken	80c48cff0b	Darkreader-støtte (#2588 ) * 🐛 Darkreader støtte * 🔥 Fjernet hardkodet bg	2024-01-04 15:15:23 +01:00
Ken	9c642c4e4d	🔥 Fjernet unødvendig workflow (#2578 ) * 🔥 Fjernet unødvendig workflow * 🔥 Fjernet ubrukt e2e-script	2024-01-04 10:11:55 +01:00
Halvor Haugan	6f53780c76	Justering av fokus-eksempel på ErrorSummary (#2577 )	2023-12-21 12:48:27 +01:00
github-actions[bot]andgithub-actions[bot]	a4eca33cfb	Version Packages (#2571 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-12-20 13:45:33 +01:00
Halvor Haugan	65f6074fa8	📝 Modal: Oppdatert JSDoc (#2567 )	2023-12-20 09:11:36 +01:00
Halvor Haugan	9b9ddd3d70	Sandbox: allow-modals (#2569 )	2023-12-18 15:35:02 +01:00