Aksel v7 (#3139)

* Tooltip labeling (#3094)

* feat: Better labeling of Tooltip

* feat: Better keyshortcuts for screenreaders in Tooltip

* memo: Updated story

* bug: Better error logging for example-parsing

* refactor: describeChild -> describesChild

* fire: Removed extra story

* bug: removed extra tabIndex

* memo: Update Tooltip demo description

* Update aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

* refactor: Updated defaultValue for describesChild

* bug: removed Tooltip prop from ToggleGroup

---------

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

* Tailwind: Fixed 'screen' -> 'screens' bug to properly adopt breakpoints. (#3119)

* 💥 Screen -> Screens in tailwind-config

* refactor: Adopt updated screens-config in Aksel.nav.no project

* Icons: Removed old and renamed icons (#3120)

* 💥 Removed renamed icons

* ErrorSummary: Add fallback for heading + better focus handling (#3140)

Co-authored-by: Ken <ken.aleksander@gmail.com>
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

* feat: Added composeEventHandlers to onFocus in ErrorSummary

* memo: Removed inaccurate description for tooltip demo

* feat: Omitted tabIndex from ErrorSummary

---------

Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Co-authored-by: Ken <ken.aleksander@gmail.com>

.changeset/great-crews-hang.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": major
+---
+
+ErrorSummary: Added fallback text for `heading`.

.changeset/little-files-cough.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": major
+---
+
+Tooltip: :boom: Updated labeling of items inside Tooltip. [See migration guide for how to update](https://aksel.nav.no/grunnleggende/kode/migrering#3b5cf05fd100).

.changeset/small-apples-pretend.md

@@ -0,0 +1,5 @@
+---
+"@navikt/aksel-icons": major
+---
+
+Icons: Removed renamed icons. [See migration guide for changes](https://aksel.nav.no/grunnleggende/kode/migrering#194b60833d9e).

.changeset/stupid-pianos-end.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-tailwind": major
+---
+
+Tailwind: Extended 'screens'-config in theme to match Aksel breakpoints. Tailwind and Primitives can now be used side by side with matching dynamic breakpoints. [See migration guide for potential issues when adopting](https://aksel.nav.no/grunnleggende/kode/migrering#3a2340f6f69b).

.changeset/thick-roses-sneeze.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+ErrorSummary: Focus heading instead of container for improved experience with screen reader.

@navikt/core/css/form/error-summary.css

@@ -9,6 +9,14 @@
   padding: var(--a-spacing-3);
 }
 
+.navds-error-summary__heading {
+  scroll-margin-top: var(--a-spacing-6);
+}
+
+.navds-error-summary--small .navds-error-summary__heading {
+  scroll-margin-top: var(--a-spacing-4);
+}
+
 .navds-error-summary__heading:focus {
   outline: none;
 }

@navikt/core/react/src/form/error-summary/ErrorSummary.tsx

@@ -1,10 +1,12 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef, isValidElement } from "react";
+import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
-import { useId } from "../../util/hooks";
-import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useId, useMergeRefs } from "../../util/hooks";
+import ErrorSummaryItem from "./ErrorSummaryItem";
 
-export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
+export interface ErrorSummaryProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "tabIndex"> {
   /**
    * Collection of `ErrorSummary.Item`.
    */
@@ -16,6 +18,7 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   size?: "medium" | "small";
   /**
    * Heading above links.
+   * @default "Du må rette disse feilene før du kan fortsette:"
    */
   heading?: React.ReactNode;
   /**
@@ -41,7 +44,7 @@ interface ErrorSummaryComponent
    * </ErrorSummary.Item>
    * ```
    */
-  Item: ErrorSummaryItemType;
+  Item: typeof ErrorSummaryItem;
 }
 
 /**
@@ -69,16 +72,21 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       className,
       size = "medium",
       headingTag = "h2",
-      heading,
+      heading = "Du må rette disse feilene før du kan fortsette:",
       ...rest
     },
     ref,
   ) => {
     const headingId = useId();
 
+    const sectionRef = useRef<HTMLDivElement>(null);
+    const headingRef = useRef<HTMLHeadingElement>(null);
+
+    const mergedRef = useMergeRefs(ref, sectionRef);
+
     return (
       <section
-        ref={ref}
+        ref={mergedRef}
         {...rest}
         className={cl(
           className,
@@ -89,22 +97,24 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         aria-live="polite"
         aria-relevant="all"
         aria-labelledby={headingId}
+        onFocus={composeEventHandlers(rest.onFocus, (event) => {
+          if (event.target === sectionRef.current) {
+            headingRef?.current?.focus();
+          }
+        })}
       >
         <Heading
           className="navds-error-summary__heading"
           as={headingTag}
           size="small"
           id={headingId}
+          ref={headingRef}
+          tabIndex={-1}
         >
           {heading}
         </Heading>
         <BodyShort as="ul" size={size} className="navds-error-summary__list">
-          {React.Children.map(children, (child) => {
-            if (!isValidElement(child)) {
-              return null;
-            }
-            return <li key={child.toString()}>{child}</li>;
-          })}
+          {children}
         </BodyShort>
       </section>
     );

@navikt/core/react/src/form/error-summary/ErrorSummaryItem.tsx

@@ -14,21 +14,23 @@ export interface ErrorSummaryItemProps
   href?: string;
 }
 
-export type ErrorSummaryItemType = OverridableComponent<
+type ErrorSummaryItemType = OverridableComponent<
   ErrorSummaryItemProps,
   HTMLAnchorElement
 >;
 
 export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
-      <Component
-        {...rest}
-        ref={ref}
-        className={cl(className, "navds-error-summary__item", "navds-link")}
-      >
-        {children}
-      </Component>
+      <li>
+        <Component
+          {...rest}
+          ref={ref}
+          className={cl(className, "navds-error-summary__item", "navds-link")}
+        >
+          {children}
+        </Component>
+      </li>
     );
   },
 );

@navikt/core/react/src/form/error-summary/error-summary.stories.tsx

@@ -1,24 +1,12 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import { expect, userEvent, within } from "@storybook/test";
+import React, { useRef } from "react";
 import { VStack } from "../../layout/stack";
 import { ErrorSummary } from "./ErrorSummary";
 
 export default {
-  title: "ds-react/Errorsummary",
+  title: "ds-react/ErrorSummary",
   component: ErrorSummary,
-  argTypes: {
-    headingTag: {
-      control: {
-        type: "text",
-      },
-    },
-    size: {
-      control: {
-        type: "radio",
-      },
-      options: ["medium", "small"],
-    },
-  },
   parameters: {
     chromatic: { disable: true },
   },
@@ -27,18 +15,32 @@ export default {
 type Story = StoryObj<typeof ErrorSummary>;
 
 export const Default: Story = {
-  render: (props) => (
-    <ErrorSummary
-      heading="Feiloppsummering komponent"
-      headingTag={props.headingTag || "h2"}
-      size={props.size ?? undefined}
-    >
+  render: ({ headingTag, ...rest }) => (
+    <ErrorSummary headingTag={headingTag || undefined} {...rest}>
       <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
       <ErrorSummary.Item href="#2">
         Tekstfeltet må ha en godkjent e-mail
       </ErrorSummary.Item>
     </ErrorSummary>
   ),
+  argTypes: {
+    heading: {
+      control: {
+        type: "text",
+      },
+    },
+    headingTag: {
+      control: {
+        type: "text",
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["medium", "small"],
+    },
+  },
 };
 
 export const Small: Story = {
@@ -52,6 +54,59 @@ export const Small: Story = {
   ),
 };
 
+export const A11yDemo: Story = {
+  name: "A11y Demo",
+  render: () => {
+    const ref = useRef<HTMLHeadingElement>(null);
+    return (
+      <div>
+        <button
+          onClick={() => {
+            ref.current?.focus();
+          }}
+        >
+          Fokuser ErrorSummary
+        </button>
+        <ErrorSummary heading="Feiloppsummering tittel" ref={ref}>
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+    );
+  },
+};
+
+export const FocusDemo: Story = {
+  render: () => {
+    const ref = useRef<HTMLHeadingElement>(null);
+    return (
+      <div>
+        <button onClick={() => ref.current?.focus()}>Focus summary</button>
+        <ErrorSummary heading="Feiloppsummering tittel" ref={ref}>
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    const button = canvas.getByText("Focus summary");
+    const heading = canvas.getByText("Feiloppsummering tittel");
+
+    await step("click button", async () => {
+      await userEvent.click(button);
+    });
+
+    expect(heading).toHaveFocus();
+  },
+};
+
 export const Chromatic: Story = {
   render: () => (
     <VStack gap="4">