@navikt/ds-react 8.9.0 → 8.10.0

package/src/form/fieldset/Fieldset.tsx

@@ -26,10 +26,6 @@ export interface FieldsetProps
    * @default true
    */
   errorPropagation?: boolean;
-  /**
-   * @private
-   */
-  _fieldsSupportNativeReadOnly?: boolean;
 }
 
 /**
@@ -60,6 +56,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       size,
       readOnly,
       inputDescriptionId,
+      readOnlyIconNeedsTitle,
     } = useFieldset(props, legendId);
 
     const fieldset = useContext(FieldsetContext);
@@ -71,7 +68,6 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       legend,
       description,
       hideLegend,
-      _fieldsSupportNativeReadOnly = true,
       ...rest
     } = props;
 
@@ -108,23 +104,21 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             id={legendId}
             size={size}
             as="legend"
-            className={cl("aksel-fieldset__legend", {
-              "aksel-sr-only": !!hideLegend,
-            })}
+            className="aksel-fieldset__legend"
+            visuallyHidden={!!hideLegend}
           >
             {readOnly &&
-              (_fieldsSupportNativeReadOnly ? (
-                <ReadOnlyIcon />
-              ) : (
+              (readOnlyIconNeedsTitle ? (
                 <ReadOnlyIconWithTitle />
+              ) : (
+                <ReadOnlyIcon />
               ))}
             {legend}
           </Label>
           {!!description && (
             <BodyShort
-              className={cl("aksel-fieldset__description", {
-                "aksel-sr-only": !!hideLegend,
-              })}
+              className="aksel-fieldset__description"
+              visuallyHidden={!!hideLegend}
               id={inputDescriptionId}
               size={size ?? "medium"}
               as="div"

package/src/form/fieldset/useFieldset.ts

@@ -1,19 +1,26 @@
+import { useContext } from "react";
 import { cl } from "../../utils/helpers";
-import {
-  type FormFieldProps,
-  containsReadMore,
-  useFormField,
-} from "../useFormField";
+import { CheckboxGroupContext } from "../checkbox/CheckboxGroup.context";
+import { RadioGroupContext } from "../radio/RadioGroup.context";
+import { containsReadMore, useFormField } from "../useFormField";
+import type { FieldsetProps } from "./Fieldset";
 
 /**
  * Handles props for Fieldset in context with parent Fieldset.
  */
-export const useFieldset = (props: FormFieldProps, legendId: string) => {
+export const useFieldset = (props: FieldsetProps, legendId: string) => {
   const formField = useFormField(props, "fieldset");
+  const checkboxGroupContext = useContext(CheckboxGroupContext);
+  const radioGroupContext = useContext(RadioGroupContext);
 
   return {
     ...formField,
+    readOnlyIconNeedsTitle: checkboxGroupContext || radioGroupContext,
     inputProps: {
+      ...(checkboxGroupContext || radioGroupContext
+        ? { "aria-invalid": formField.inputProps["aria-invalid"] }
+        : {}),
+
       // Having both legend and description in labelledby seems to work best, ref. https://mortentollefsen.no/demo/radio-description.html
       "aria-labelledby":
         props["aria-labelledby"] ||

package/src/form/radio/Radio.tsx

@@ -2,52 +2,57 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit, useId } from "../../utils-external";
 import { cl } from "../../utils/helpers";
+import { RadioInput } from "./radio-input/RadioInput";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { inputProps, size, hasError, readOnly } = useRadio(props);
-  const descriptionId = useId();
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  (props: RadioProps, forwardedRef) => {
+    const { inputProps, size, hasError, readOnly } = useRadio(props);
+    const descriptionId = useId();
 
-  return (
-    <div
-      className={cl(props.className, "aksel-radio", `aksel-radio--${size}`, {
-        "aksel-radio--error": hasError,
-        "aksel-radio--disabled": inputProps.disabled,
-        "aksel-radio--readonly": readOnly,
-      })}
-      data-color={hasError ? "danger" : props["data-color"]}
-    >
-      <input
-        {...omit(props, ["children", "size", "description", "readOnly"])}
-        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-        aria-describedby={
-          cl(inputProps["aria-describedby"], {
-            [descriptionId]: props.description,
-          }) || undefined
-        }
-        className="aksel-radio__input"
-        ref={ref}
-      />
-      <BodyShort
-        as="label"
-        htmlFor={inputProps.id}
-        className="aksel-radio__label"
-        size={size}
+    const { className, description, children } = props;
+
+    return (
+      <div
+        className={cl(className, "aksel-radio", `aksel-radio--${size}`, {
+          "aksel-radio--error": hasError,
+          "aksel-radio--disabled": inputProps.disabled,
+          "aksel-radio--readonly": readOnly,
+        })}
+        data-color={hasError ? "danger" : props["data-color"]}
       >
-        {props.children}
-      </BodyShort>
-      {props.description && (
+        <RadioInput
+          ref={forwardedRef}
+          {...omit(props, ["children", "size", "description", "readOnly"])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          aria-describedby={
+            cl(inputProps["aria-describedby"], {
+              [descriptionId]: description,
+            }) || undefined
+          }
+          standalone={false}
+        />
         <BodyShort
-          id={descriptionId}
+          as="label"
+          htmlFor={inputProps.id}
+          className="aksel-radio__label"
           size={size}
-          className="aksel-form-field__subdescription aksel-radio__description"
         >
-          {props.description}
+          {children}
         </BodyShort>
-      )}
-    </div>
-  );
-});
+        {description && (
+          <BodyShort
+            id={descriptionId}
+            size={size}
+            className="aksel-form-field__subdescription aksel-radio__description"
+          >
+            {description}
+          </BodyShort>
+        )}
+      </div>
+    );
+  },
+);
 
 export default Radio;

package/src/form/radio/RadioGroup.context.ts

@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+export interface RadioGroupContextProps {
+  name: string;
+  defaultValue?: any;
+  value?: any;
+  onChange: (value: any) => void;
+  required?: boolean;
+}
+
+export const RadioGroupContext = createContext<RadioGroupContextProps | null>(
+  null,
+);

package/src/form/radio/RadioGroup.tsx

@@ -3,18 +3,9 @@ import { useId } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
+import { RadioGroupContext } from "./RadioGroup.context";
 
-export interface RadioGroupContextProps {
-  name: string;
-  defaultValue?: any;
-  value?: any;
-  onChange: (value: any) => void;
-  required?: boolean;
-}
-
-export const RadioGroupContext =
-  React.createContext<RadioGroupContextProps | null>(null);
-
+// TODO: Omit "role" in next major
 export interface RadioGroupProps extends Omit<
   FieldsetProps,
   "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
@@ -75,29 +66,29 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
     const nameId = useId();
 
     return (
-      <Fieldset
-        {...rest}
-        readOnly={readOnly}
-        ref={ref}
-        className={cl(
-          className,
-          "aksel-radio-group",
-          `aksel-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
-        )}
-        _fieldsSupportNativeReadOnly={false}
+      <RadioGroupContext.Provider
+        value={{
+          name: name ?? `radioGroupName-${nameId}`,
+          defaultValue,
+          value,
+          onChange,
+          required,
+        }}
       >
-        <RadioGroupContext.Provider
-          value={{
-            name: name ?? `radioGroupName-${nameId}`,
-            defaultValue,
-            value,
-            onChange,
-            required,
-          }}
+        <Fieldset
+          role="radiogroup"
+          {...rest}
+          readOnly={readOnly}
+          ref={ref}
+          className={cl(
+            className,
+            "aksel-radio-group",
+            `aksel-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
+          )}
         >
           <div className="aksel-radio-buttons">{children}</div>
-        </RadioGroupContext.Provider>
-      </Fieldset>
+        </Fieldset>
+      </RadioGroupContext.Provider>
     );
   },
 );

package/src/form/radio/radio-input/RadioInput.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type RadioInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  children?: never;
+  standalone?: boolean;
+  /**
+   * Reduces pseudo-element target-size.
+   */
+  compact?: boolean;
+};
+
+const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
+  (
+    { className, standalone = true, compact, ...rest }: RadioInputProps,
+    forwardedRef,
+  ) => {
+    return (
+      <input
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-radio__input", className)}
+        data-standalone={standalone}
+        data-compact={compact}
+        type="radio"
+      />
+    );
+  },
+);
+
+export { RadioInput };
+export type { RadioInputProps };

package/src/form/radio/useRadio.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { omit } from "../../utils-external";
 import { useFormField } from "../useFormField";
-import { RadioGroupContext } from "./RadioGroup";
+import { RadioGroupContext } from "./RadioGroup.context";
 import { RadioProps } from "./types";
 
 /**

package/src/inline-message/root/InlineMessage.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { useThemeInternal } from "../../theme/Theme";
 import { BodyLong } from "../../typography";
-import { type OverridableComponent, useId } from "../../utils-external";
+import { type OverridableComponent } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { InlineMessageIcon } from "../icon/InlineMessageIcon";
@@ -58,10 +58,7 @@ export const InlineMessage: OverridableComponent<
     forwardedRef,
   ) => {
     const themeContext = useThemeInternal();
-
     const translate = useI18n("global");
-    const statusId = useId();
-    const contentId = useId();
 
     return (
       <BodyLong
@@ -75,18 +72,11 @@ export const InlineMessage: OverridableComponent<
       >
         <InlineMessageIcon status={status} />
         {status && (
-          <BodyLong id={statusId} aria-hidden visuallyHidden>
+          <BodyLong as="span" visuallyHidden>
             {`${translate(status)}: `}
           </BodyLong>
         )}
-        {/** biome-ignore lint/a11y/useAriaPropsSupportedByRole: Testing shows that this works. */}
-        <span
-          data-color={themeContext?.color}
-          id={contentId}
-          aria-labelledby={cl(statusId, contentId)}
-        >
-          {children}
-        </span>
+        <span data-color={themeContext?.color}>{children}</span>
       </BodyLong>
     );
   },

package/src/modal/ModalUtils.ts

@@ -35,7 +35,7 @@ function useIsModalOpen(modalRef: HTMLDialogElement | null) {
       return;
     }
 
-    setIsOpen(modalRef.open);
+    setIsOpen(modalRef.open); // eslint-disable-line react-hooks/set-state-in-effect
 
     const observer = new MutationObserver(() => {
       setIsOpen(modalRef.open);

package/src/primitives/box/Box.tsx

@@ -77,7 +77,7 @@ interface BoxComponentType extends OverridableComponent<
   /**
    * @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
    *
-   * **Run `npx @navikt/aksel@latest codemod v8-box-new`> to migrate.**
+   * **Run `npx @navikt/aksel@latest codemod v8-box-new` to migrate.**
    */
   New: typeof BoxNew;
 }

package/src/tabs/useTabs.ts

@@ -17,18 +17,14 @@ export function useTabs({
     onChange,
   });
 
-  /**
-   * Sync focused `value` with controlled `selectedValue`
-   */
+  /* Sync focused `value` with controlled `selectedValue` */
   useEffect(() => {
     if (value != null) {
-      setFocusedValue(value);
+      setFocusedValue(value); // eslint-disable-line react-hooks/set-state-in-effect
     }
   }, [value]);
 
-  /**
-   * Scope ids for better tracking
-   */
+  /* Scope ids for better tracking */
   const uuid = useId();
 
   return {

package/src/timeline/Timeline.tsx

@@ -1,7 +1,8 @@
 import { endOfDay, isSameDay, startOfDay } from "date-fns";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useMemo, useState } from "react";
 import { AxisLabels } from "./AxisLabels";
 import TimelineRow, { TimelineRowType } from "./TimelineRow";
+import { TimelineKeyboardNavProvider } from "./hooks/TimelineKeyboardNavProvider";
 import { RowContext } from "./hooks/useRowContext";
 import { TimelineContext } from "./hooks/useTimelineContext";
 import {
@@ -92,43 +93,48 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       axisLabelTemplates,
       ...rest
     },
-    ref,
+    forwardedRef,
   ) => {
-    const isMultipleRows = Array.isArray(children);
+    const childArray = useMemo(
+      () =>
+        React.Children.toArray(Array.isArray(children) ? children : [children]),
+      [children],
+    );
 
-    const firstFocusabled = useRef<
-      { ref: HTMLButtonElement | null; id: number }[]
-    >([]);
+    const rowChildren = useMemo(() => {
+      return childArray.filter((c: any) => c?.type?.componentType === "row");
+    }, [childArray]);
 
-    if (!isMultipleRows) {
-      children = [children];
-    }
-    const rowChildren = React.Children.toArray(children).filter(
-      (c: any) => c?.type?.componentType === "row",
+    const pins = useMemo(
+      () =>
+        childArray
+          .filter((c: any) => c?.type?.componentType === "pin")
+          .map((x) => () => x),
+      [childArray],
     );
 
-    const pins = React.Children.toArray(children)
-      .filter((c: any) => c?.type?.componentType === "pin")
-      .map((x) => () => x);
-
-    const zoomComponent = React.Children.toArray(children).find(
-      (c: any) => c?.type?.componentType === "zoom",
+    const zoomComponent = useMemo(
+      () => childArray.find((c: any) => c?.type?.componentType === "zoom"),
+      [childArray],
     );
 
     const rowsRaw = useMemo(() => {
       return parseRows(rowChildren);
     }, [rowChildren]);
 
-    const rows = rowsRaw.map((r) => {
-      if (r?.periods) {
-        return r.periods;
-      }
-      return [];
-    });
+    const rows = useMemo(
+      () =>
+        rowsRaw.map((r) => {
+          if (r?.periods) {
+            return r.periods;
+          }
+          return [];
+        }),
+      [rowsRaw],
+    );
 
     const initialStartDate = startOfDay(useEarliestDate({ startDate, rows }));
     const [start, setStart] = useState(initialStartDate);
-    const [activeRow, setActiveRow] = useState<number | null>(null);
     const [endInclusive, setEndInclusive] = useState(
       endOfDay(useLatestDate({ endDate, rows })),
     );
@@ -165,38 +171,6 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       }
     };
 
-    const handleActiveRowChange = (key: string) => {
-      if (activeRow !== null && key === "ArrowDown") {
-        for (let i = activeRow + 1; i < processedRows.length; i++) {
-          const row = processedRows[i];
-          if (row.periods.find((p) => !!p.children || !!p.onSelectPeriod)) {
-            setActiveRow(i);
-            firstFocusabled.current.find((x) => x.id === i)?.ref?.focus();
-            break;
-          }
-        }
-        return;
-      }
-      if (activeRow !== null && key === "ArrowUp") {
-        for (let i = activeRow - 1; i >= 0; i--) {
-          const row = processedRows[i];
-          if (row.periods.find((p) => !!p.children || !!p.onSelectPeriod)) {
-            setActiveRow(i);
-            firstFocusabled.current.find((x) => x.id === i)?.ref?.focus();
-            break;
-          }
-        }
-        return;
-      }
-    };
-
-    const addFocusable = (btnRef: HTMLButtonElement | null, id: number) => {
-      let items = firstFocusabled.current;
-      items = items.filter((x) => x.id !== id);
-      items.push({ ref: btnRef, id });
-      firstFocusabled.current = items;
-    };
-
     return (
       <TimelineContext.Provider
         value={{
@@ -205,44 +179,41 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
           direction,
           setStart: (d) => handleZoomChange(d),
           setEndInclusive: (d) => setEndInclusive(d),
-          activeRow,
-          setActiveRow: (key) => handleActiveRowChange(key),
-          initiate: (i) => setActiveRow(i),
-          addFocusable,
         }}
       >
-        <div {...rest} ref={ref}>
-          <div className="aksel-timeline">
-            <AxisLabels templates={axisLabelTemplates} />
-
-            {pins.map((PinChild, i) => (
-              <PinChild key={`pin-${i}`} />
-            ))}
-
-            {processedRows.map((row, i) => {
-              return (
-                <RowContext.Provider
-                  key={`row-${row.id}`}
-                  value={{
-                    periods: row.periods,
-                    id: row.id,
-                    active: activeRow === i,
-                    index: i,
-                  }}
-                >
-                  <TimelineRow
-                    {...row?.restProps}
-                    ref={row?.ref}
-                    label={row.label}
-                    icon={row.icon}
-                    headingTag={row.headingTag}
-                  />
-                </RowContext.Provider>
-              );
-            })}
+        <TimelineKeyboardNavProvider>
+          <div {...rest} ref={forwardedRef}>
+            <div className="aksel-timeline">
+              <AxisLabels templates={axisLabelTemplates} />
+
+              {pins.map((PinChild, i) => (
+                <PinChild key={`pin-${i}`} />
+              ))}
+
+              {processedRows.map((row, i) => {
+                return (
+                  <RowContext.Provider
+                    key={`row-${row.id}`}
+                    value={{
+                      periods: row.periods,
+                      id: row.id,
+                      index: i,
+                    }}
+                  >
+                    <TimelineRow
+                      {...row?.restProps}
+                      ref={row?.ref}
+                      label={row.label}
+                      icon={row.icon}
+                      headingTag={row.headingTag}
+                    />
+                  </RowContext.Provider>
+                );
+              })}
+            </div>
+            {zoomComponent}
           </div>
-          {zoomComponent}
-        </div>
+        </TimelineKeyboardNavProvider>
       </TimelineContext.Provider>
     );
   },