@navikt/ds-react 8.6.0 → 8.8.0

package/src/date/Date.Dialog.tsx

@@ -5,6 +5,7 @@ import { Modal } from "../modal";
 import { useModalContext } from "../modal/Modal.context";
 import { Popover } from "../popover";
 import { cl } from "../utils/helpers";
+import { focusElement } from "../utils/helpers/focus";
 import { useMedia } from "../utils/hooks";
 import { useI18n } from "../utils/i18n/i18n.hooks";
 import type { TFunction } from "../utils/i18n/i18n.types";
@@ -30,6 +31,10 @@ type DateWrapperProps = {
     id?: string;
     strategy?: "absolute" | "fixed";
   };
+  /**
+   * Id for the label of the popup, used for aria-labelledby
+   */
+  popupLabelId?: string;
 };
 
 const DateDialog = ({
@@ -41,6 +46,7 @@ const DateDialog = ({
   translate,
   variant,
   popoverProps,
+  popupLabelId,
 }: DateWrapperProps) => {
   const translateGlobal = useI18n("global", getGlobalTranslations(locale));
 
@@ -68,6 +74,10 @@ const DateDialog = ({
           "aksel-date": variant === "month",
         })}
         {...popoverProps}
+        ref={focusPopoverOnOpen}
+        tabIndex={-1}
+        role="dialog"
+        aria-labelledby={popupLabelId}
       >
         {children}
       </Popover>
@@ -104,4 +114,9 @@ const DateDialog = ({
     </Modal>
   );
 };
+
+function focusPopoverOnOpen(element: HTMLDivElement | null) {
+  focusElement(element, { preventScroll: true, sync: false });
+}
+
 export { DateDialog };

package/src/date/Date.Input.tsx

@@ -154,7 +154,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
         />
         <button
           disabled={inputProps.disabled || readOnly}
-          tabIndex={readOnly ? -1 : context?.open ? -1 : 0}
+          tabIndex={readOnly ? -1 : undefined}
           onClick={() => {
             context?.onOpen();
             setAnchorRef?.(buttonRef.current);

package/src/date/datepicker/DatePicker.tsx

@@ -95,6 +95,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
 
     const ariaId = useId(id);
+    const popupLabelId = useId();
 
     const [open, setOpen] = useControllableState({
       defaultValue: false,
@@ -161,6 +162,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                 id: ariaId,
                 strategy,
               }}
+              popupLabelId={popupLabelId}
             >
               <ReactDayPicker
                 {...rest}
@@ -168,6 +170,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                 handleSelect={setValue}
                 selected={value as any}
                 mode={mode as any}
+                popupLabelId={popupLabelId}
               />
             </DateDialog>
           </div>

package/src/date/datepicker/hooks/useDatepicker.tsx

@@ -1,6 +1,7 @@
 import { differenceInCalendarDays, isWeekend } from "date-fns";
 import React, { useCallback, useState } from "react";
 import { DayEventHandler, dateMatchModifiers } from "react-day-picker";
+import { focusElement } from "../../../utils/helpers/focus";
 import { useDateLocale } from "../../../utils/i18n/i18n.hooks";
 import { DateInputProps } from "../../Date.Input";
 import { getLocaleFromString } from "../../Date.locale";
@@ -89,12 +90,23 @@ interface UseDatepickerValue {
 }
 
 export type DateValidationT = {
+  /**
+   * Whether there are any validation errors.
+   * - When `true`, all the other properties will be `false`.
+   * - When `false`, at least one of the other properties will be `true`.
+   */
+  isValidDate: boolean;
+  /** Whether the date is a disabled date */
   isDisabled: boolean;
+  /** Whether the date falls on a weekend and `disableWeekends` is true */
   isWeekend: boolean;
+  /** Whether the input field is empty */
   isEmpty: boolean;
+  /** Whether the entered value cannot be parsed as a date (i.e. wrong format or non-existing date) */
   isInvalid: boolean;
-  isValidDate: boolean;
+  /** Whether the date is before `fromDate` */
   isBefore: boolean;
+  /** Whether the date is after `toDate` */
   isAfter: boolean;
 };
 
@@ -160,8 +172,9 @@ export const useDatepicker = (
   const handleOpen = useCallback(
     (newOpen: boolean) => {
       setOpen(newOpen);
-      newOpen &&
+      if (newOpen) {
         setMonth(selectedDay ?? defaultSelected ?? defaultMonth ?? today);
+      }
     },
     [defaultMonth, defaultSelected, selectedDay, today],
   );
@@ -313,7 +326,10 @@ export const useDatepicker = (
     open,
     onClose: () => {
       handleOpen(false);
-      anchorRef?.focus();
+      /* Delay focus to allow "open"-button to update title before focus */
+      queueMicrotask(() =>
+        focusElement(anchorRef, { sync: false, preventScroll: true }),
+      );
     },
     onOpenToggle: () => handleOpen(!open),
     disabled,

package/src/date/datepicker/hooks/useRangeDatepicker.tsx

@@ -1,6 +1,7 @@
 import { differenceInCalendarDays, isSameDay, isWeekend } from "date-fns";
 import React, { useState } from "react";
 import { dateMatchModifiers } from "react-day-picker";
+import { focusElement } from "../../../utils/helpers/focus";
 import { useDateLocale } from "../../../utils/i18n/i18n.hooks";
 import { DateInputProps } from "../../Date.Input";
 import { getLocaleFromString } from "../../Date.locale";
@@ -539,7 +540,10 @@ export const useRangeDatepicker = (
     onOpenToggle: () => setOpen((x) => !x),
     onClose: () => {
       setOpen(false);
-      anchorRef?.focus();
+      /* Delay focus to allow "open"-button to update title before focus */
+      queueMicrotask(() =>
+        focusElement(anchorRef, { sync: false, preventScroll: true }),
+      );
     },
     disabled,
     disableWeekends,

package/src/date/datepicker/parts/DatePicker.Months.tsx

@@ -28,12 +28,14 @@ const DatePickerMonths = ({
   calendarMonth,
   locale,
   onWeekNumberClick,
+  popupLabelId,
   ...rest
 }: {
   calendarMonth: CalendarMonth;
   displayIndex: number;
   locale: Locale;
   onWeekNumberClick: MultipleMode["onWeekNumberClick"];
+  popupLabelId?: string;
 } & React.HTMLAttributes<HTMLDivElement>) => {
   const { dayPickerProps, goToMonth, previousMonth, nextMonth } =
     useDayPicker();
@@ -80,7 +82,12 @@ const DatePickerMonths = ({
     <div {...omit(rest, ["displayIndex"])}>
       <div className="aksel-date__caption">
         {captionLayout?.startsWith("dropdown") && (
-          <span aria-live="polite" aria-atomic="true" className="aksel-sr-only">
+          <span
+            aria-live="polite"
+            aria-atomic="true"
+            className="aksel-sr-only"
+            id={popupLabelId}
+          >
             {format(calendarMonth.date, "LLLL y", { locale })}
           </span>
         )}
@@ -129,6 +136,7 @@ const DatePickerMonths = ({
             aria-live="polite"
             role="status"
             className="aksel-date__caption-label"
+            id={popupLabelId}
           >
             {format(calendarMonth.date, "LLLL y", { locale })}
           </BodyShort>

package/src/date/datepicker/parts/DatePicker.RDP.tsx

@@ -44,6 +44,10 @@ type ReactDayPickerProps = DatePickerDefaultProps &
      * Update selected date
      */
     handleSelect: (newSelected: any) => void;
+    /**
+     * Id for the label of the popup, used for aria-labelledby
+     */
+    popupLabelId?: string;
   };
 
 const ReactDayPicker = ({
@@ -61,6 +65,7 @@ const ReactDayPicker = ({
   mode: _mode,
   handleSelect,
   locale: _locale,
+  popupLabelId,
   ...rest
 }: ReactDayPickerProps) => {
   const langProviderLocale = useDateLocale();
@@ -130,9 +135,10 @@ const ReactDayPicker = ({
               onWeekNumberClick={
                 mode === "multiple" ? onWeekNumberClick : undefined
               }
+              popupLabelId={popupLabelId}
             />
           ),
-          [locale, mode, onWeekNumberClick],
+          [locale, mode, onWeekNumberClick, popupLabelId],
         ),
         Day: useCallback(
           (props) => (

package/src/date/monthpicker/MonthPicker.tsx

@@ -97,6 +97,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     );
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
+    const popupLabelId = useId();
 
     const [open, setOpen] = useControllableState({
       defaultValue: false,
@@ -163,9 +164,10 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
                   id: ariaId,
                   strategy,
                 }}
+                popupLabelId={popupLabelId}
               >
                 <div className={cl("rdp-month", className)}>
-                  <MonthPickerCaption />
+                  <MonthPickerCaption popupLabelId={popupLabelId} />
                   <MonthPickerTable />
                 </div>
               </DateDialog>

package/src/date/monthpicker/hooks/useMonthPicker.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { dateMatchModifiers } from "react-day-picker";
+import { focusElement } from "../../../utils/helpers/focus";
 import { useDateLocale } from "../../../utils/i18n/i18n.hooks";
 import { DateInputProps } from "../../Date.Input";
 import { getLocaleFromString } from "../../Date.locale";
@@ -73,11 +74,21 @@ interface UseMonthPickerValue {
 }
 
 export type MonthValidationT = {
+  /**
+   * Whether there are any validation errors.
+   * - When `true`, all the other properties will be `false`.
+   * - When `false`, at least one of the other properties will be `true`.
+   */
+  isValidMonth: boolean;
+  /** Whether the month is a disabled month */
   isDisabled: boolean;
+  /** Whether the input field is empty */
   isEmpty: boolean;
+  /** Whether the entered value cannot be parsed as a month (i.e. wrong format) */
   isInvalid: boolean;
-  isValidMonth: boolean;
+  /** Whether the month is before `fromDate` */
   isBefore: boolean;
+  /** Whether the month is after `toDate` */
   isAfter: boolean;
 };
 
@@ -310,7 +321,10 @@ export const useMonthpicker = (
     onOpenToggle: () => handleOpen(!open),
     onClose: () => {
       handleOpen(false);
-      anchorRef?.focus();
+      /* Delay focus to allow "open"-button to update title before focus */
+      queueMicrotask(() =>
+        focusElement(anchorRef, { sync: false, preventScroll: true }),
+      );
     },
     disabled,
   };

package/src/date/monthpicker/parts/MonthPicker.Caption.tsx

@@ -13,7 +13,11 @@ import { Select } from "../../../form/select";
 import { useDateTranslationContext } from "../../Date.locale";
 import { useMonthPickerContext } from "../MonthPicker.context";
 
-const MonthPickerCaption = () => {
+type MonthPickerCaptionProps = {
+  popupLabelId?: string;
+};
+
+const MonthPickerCaption = ({ popupLabelId }: MonthPickerCaptionProps) => {
   const { fromDate, toDate, locale, year, onYearChange, caption } =
     useMonthPickerContext();
 
@@ -58,6 +62,16 @@ const MonthPickerCaption = () => {
 
   return (
     <div className="aksel-date__caption">
+      {caption === "dropdown" && (
+        <span
+          aria-live="polite"
+          aria-atomic="true"
+          className="aksel-sr-only"
+          id={popupLabelId}
+        >
+          {year.getFullYear()}
+        </span>
+      )}
       <Button
         className="aksel-date__caption-button"
         disabled={disablePreviousYear()}
@@ -82,7 +96,11 @@ const MonthPickerCaption = () => {
           ))}
         </Select>
       ) : (
-        <span className="aksel-date__year-label" aria-live="polite">
+        <span
+          className="aksel-date__year-label"
+          aria-live="polite"
+          id={popupLabelId}
+        >
           {year.getFullYear()}
         </span>
       )}

package/src/dropdown/Toggle.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useContext } from "react";
 import { cl, composeEventHandlers } from "../utils/helpers";
+import { useMergeRefs } from "../utils/hooks";
 import { DropdownContext } from "./context";
 
 export interface DropdownToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -15,30 +16,23 @@ export const DropdownToggle = forwardRef<
 >(({ className, onClick, ...rest }, ref) => {
   const context = useContext(DropdownContext);
 
+  const mergedRef = useMergeRefs(context?.setAnchorEl, ref);
+
   if (!context) {
     console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
     return null;
   }
 
-  const { setAnchorEl, handleToggle, isOpen } = context;
+  const { handleToggle, isOpen } = context;
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    setAnchorEl(e.currentTarget);
+  const handleClick = () => {
     handleToggle(!isOpen);
   };
 
   return (
     <button
       {...rest}
-      ref={(el) => {
-        setAnchorEl(el);
-
-        if (typeof ref === "function") {
-          ref(el);
-        } else if (ref != null) {
-          ref.current = el;
-        }
-      }}
+      ref={mergedRef}
       onClick={composeEventHandlers(onClick, handleClick)}
       aria-expanded={isOpen}
       className={cl("aksel-dropdown__toggle", className)}

package/src/form/checkbox/CheckboxGroup.tsx

@@ -81,7 +81,7 @@ export const CheckboxGroup = forwardRef<
           "aksel-checkbox-group",
           `aksel-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
-        nativeReadOnly={false}
+        _fieldsSupportNativeReadOnly={false}
       >
         <CheckboxGroupContext.Provider
           value={{

package/src/form/combobox/Input/Input.tsx

@@ -255,8 +255,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     );
 
     const onChangeHandler = useCallback(
-      (event: React.ChangeEvent<HTMLInputElement>) => {
-        const newValue = event.target.value;
+      (event: React.InputEvent<HTMLInputElement>) => {
+        const newValue = event.currentTarget.value;
         if (newValue && newValue !== "") {
           toggleIsListOpen(true);
         } else if (filteredOptions.length === 0) {

package/src/form/fieldset/Fieldset.tsx

@@ -10,25 +10,45 @@ import { useFieldset } from "./useFieldset";
 export interface FieldsetProps
   extends FormFieldProps, FieldsetHTMLAttributes<HTMLFieldSetElement> {
   /**
-   * FormFields in Fieldset
+   * Form fields in Fieldset.
    */
   children: React.ReactNode;
   /**
-   * Fieldset legend
+   * Fieldset legend.
    */
   legend: React.ReactNode;
   /**
-   * If enabled shows the legend and description for screenreaders only
+   * If enabled, shows the legend and description for screen readers only.
    */
   hideLegend?: boolean;
   /**
-   * Toggles error propagation to child-elements
+   * Toggles error propagation to child-elements.
    * @default true
    */
   errorPropagation?: boolean;
-  nativeReadOnly?: boolean;
+  /**
+   * @private
+   */
+  _fieldsSupportNativeReadOnly?: boolean;
 }
 
+/**
+ * Component for grouping form fields.
+ *
+ * **NB: Only for special use cases.** Form fields should not be grouped by default,
+ * except for checkboxes and radio buttons, for which CheckboxGroup/RadioGroup should be used instead.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/fieldset)
+ * @see 🏷️ {@link FieldsetProps}
+ *
+ * @example
+ * ```jsx
+ * <Fieldset legend="Telefonnummer">
+ *   <TextField label="Landkode" />
+ *   <TextField label="Nummer" />
+ * </Fieldset>
+ * ```
+ */
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   (props, ref) => {
     const legendId = useId();
@@ -51,7 +71,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       legend,
       description,
       hideLegend,
-      nativeReadOnly = true,
+      _fieldsSupportNativeReadOnly = true,
       ...rest
     } = props;
 
@@ -93,7 +113,11 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             })}
           >
             {readOnly &&
-              (nativeReadOnly ? <ReadOnlyIcon /> : <ReadOnlyIconWithTitle />)}
+              (_fieldsSupportNativeReadOnly ? (
+                <ReadOnlyIcon />
+              ) : (
+                <ReadOnlyIconWithTitle />
+              ))}
             {legend}
           </Label>
           {!!description && (

package/src/form/radio/RadioGroup.tsx

@@ -84,7 +84,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
           "aksel-radio-group",
           `aksel-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
-        nativeReadOnly={false}
+        _fieldsSupportNativeReadOnly={false}
       >
         <RadioGroupContext.Provider
           value={{

package/src/index.ts

@@ -178,6 +178,7 @@ export {
   type InfoCardHeaderProps,
   type InfoCardTitleProps,
   type InfoCardContentProps,
+  type InfoCardMessageProps,
 } from "./alert/info-card";
 export {
   LocalAlert,

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { useThemeInternal } from "../../theme/Theme";
-import { BodyShort } from "../../typography";
+import { BodyLong } from "../../typography";
 import { type OverridableComponent, useId } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
@@ -64,7 +64,7 @@ export const InlineMessage: OverridableComponent<
     const contentId = useId();
 
     return (
-      <BodyShort
+      <BodyLong
         ref={forwardedRef}
         className={cl("aksel-inline-message", className)}
         data-color={status === "error" ? "danger" : status}
@@ -75,9 +75,9 @@ export const InlineMessage: OverridableComponent<
       >
         <InlineMessageIcon status={status} />
         {status && (
-          <BodyShort id={statusId} aria-hidden visuallyHidden>
+          <BodyLong id={statusId} aria-hidden visuallyHidden>
             {`${translate(status)}: `}
-          </BodyShort>
+          </BodyLong>
         )}
         {/** biome-ignore lint/a11y/useAriaPropsSupportedByRole: Testing shows that this works. */}
         <span
@@ -87,7 +87,7 @@ export const InlineMessage: OverridableComponent<
         >
           {children}
         </span>
-      </BodyShort>
+      </BodyLong>
     );
   },
 );

package/src/provider/Provider.tsx

@@ -3,7 +3,7 @@ import { PartialTranslations, Translations } from "../utils/i18n/i18n.types";
 import nb from "../utils/i18n/locales/nb";
 
 type ProviderContextType = {
-  rootElement?: HTMLElement;
+  rootElement?: HTMLElement | null;
   locale: Translations;
   translations?: PartialTranslations | PartialTranslations[];
 };
@@ -17,7 +17,7 @@ export type ProviderProps = {
   /**
    * Global root-element to attach portals to. Used by Tooltip, Modal (optionally) and ActionMenu.
    */
-  rootElement?: HTMLElement;
+  rootElement?: HTMLElement | null;
 } & (
   | {
       /**

package/src/read-more/ReadMore.tsx

@@ -43,6 +43,16 @@ export interface ReadMoreProps extends React.ButtonHTMLAttributes<HTMLButtonElem
    * @private
    */
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
+  /**
+   * Changes variant of ReadMore.
+   *
+   * `moderate` is a more visually prominent variant.
+   *
+   *
+   * `ghost` is more subtle, mainly for use in forms.
+   * @default "ghost"
+   */
+  variant?: "moderate" | "ghost";
 }
 
 /**
@@ -66,6 +76,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       onClick,
       size = "medium",
       onOpenChange,
+      variant = "ghost",
       ...rest
     }: ReadMoreProps,
     ref,
@@ -80,13 +91,9 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
     return (
       <div
-        className={cl(
-          "aksel-read-more",
-          `aksel-read-more--${size}`,
-          className,
-          { "aksel-read-more--open": _open },
-        )}
-        data-volume="low"
+        className={cl("aksel-read-more", `aksel-read-more--${size}`, className)}
+        data-variant={variant}
+        data-state={_open ? "open" : "closed"}
       >
         <button
           {...rest}
@@ -97,7 +104,6 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           })}
           onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
           aria-expanded={_open}
-          data-state={_open ? "open" : "closed"}
         >
           <ChevronDownIcon
             className="aksel-read-more__expand-icon"
@@ -106,14 +112,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           <span>{header}</span>
         </button>
 
-        <BodyLong
-          as="div"
-          className={cl("aksel-read-more__content", {
-            "aksel-read-more__content--closed": !_open,
-          })}
-          size={typoSize}
-          data-state={_open ? "open" : "closed"}
-        >
+        <BodyLong as="div" className="aksel-read-more__content" size={typoSize}>
           {children}
         </BodyLong>
       </div>

package/src/tooltip/Tooltip.tsx

@@ -237,9 +237,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               <TooltipShortcuts shortcuts={keys} />
               {_arrow && (
                 <div
-                  ref={(node) => {
-                    arrowRef.current = node;
-                  }}
+                  ref={arrowRef}
                   className="aksel-tooltip__arrow"
                   style={{
                     left: arrowX != null ? `${arrowX}px` : "",

package/src/types/index.ts

@@ -1 +1 @@
-export * from "./theme";
+export { AkselColor, CustomAkselColor } from "./theme";

package/src/utils/components/HighlightText/HighlightText.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+// Før vi ev. eksponerer denne, vurder følgende:
+// - Bør man kunne slå av aria-label? (Ev. kan vi kun sette på aria-label hvis process.env.NODE_ENV === "test")
+// - Navngivning. Bør ikke bruke kun Highlight fordi det er allerede noe som heter det i JS.
+
+interface HighlightTextProps {
+  /** Text to be highlighted */
+  text: string;
+  children: string;
+}
+
+const HighlightText = ({ text, children }: HighlightTextProps) => {
+  const textIndex = children
+    .toLocaleLowerCase()
+    .indexOf(text.toLocaleLowerCase());
+  if (textIndex === -1) {
+    return children;
+  }
+  const start = children.substring(0, textIndex);
+  const match = children.substring(textIndex, textIndex + text.length);
+  const end = children.substring(textIndex + text.length);
+  return (
+    // aria-label is used to fix testing-library wrongly evaluating the accessible name of the option when highlighting text
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Doesn't matter if it doesn't work in the browser
+    <span aria-label={children}>
+      {start}
+      {match && <mark>{match}</mark>}
+      {end}
+    </span>
+  );
+};
+
+export { HighlightText };