@navikt/ds-react 8.5.2 → 8.7.0

package/src/data/token-filter/helpers/query-builder.ts

@@ -1,11 +1,11 @@
-import type { QueryFilterOperator } from "../TokenFilter.types";
+import type { OperatorT } from "../TokenFilter.types";
 
 /**
  * Human-readable labels for query filter operators.
  * Used for displaying operator descriptions in autocomplete suggestions.
  * TODO: Support i18n
  */
-const OPERATOR_LABELS: Record<QueryFilterOperator, string> = {
+const OPERATOR_LABELS: Record<OperatorT, string> = {
   ":": "contains",
   "!:": "does not contain",
   "=": "is",

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/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";
@@ -160,8 +161,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 +315,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";
@@ -310,7 +311,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/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/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/toggle-group/useToggleGroup.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useControllableState } from "../utils/hooks";
 import { ToggleGroupProps } from "./ToggleGroup.types";
 
@@ -8,7 +8,6 @@ export function useToggleGroup({
   defaultValue = "",
 }: Pick<ToggleGroupProps, "onChange" | "value" | "defaultValue">) {
   const [focusedValue, setFocusedValue] = useState(defaultValue);
-
   const [selectedValue, setSelectedValue] = useControllableState({
     defaultValue,
     value,
@@ -16,9 +15,11 @@ export function useToggleGroup({
   });
 
   /* Sync focused `value` with controlled `selectedValue` */
-  if (value != null && value !== focusedValue) {
-    setFocusedValue(value);
-  }
+  useEffect(() => {
+    if (value != null) {
+      setFocusedValue(value);
+    }
+  }, [value]);
 
   return {
     selectedValue,

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/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 };

package/src/utils/components/Listbox/group/ListboxGroup.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useId } from "../../../../utils-external";
+
+interface ListboxGroupProps {
+  label: React.ReactNode;
+  children: React.ReactNode;
+}
+
+function ListboxGroup({ label, children }: ListboxGroupProps) {
+  const labelId = useId();
+
+  return (
+    <div
+      role="group"
+      className="aksel-listbox__group"
+      aria-labelledby={labelId}
+    >
+      <div id={labelId} aria-hidden>
+        {label}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export { ListboxGroup };

package/src/utils/components/Listbox/input-slot/ListboxInputSlot.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Slot } from "../../slot/Slot";
+
+interface ListboxInputSlotProps {
+  children: React.ReactElement;
+}
+
+const ListboxInputSlot = ({ children }: ListboxInputSlotProps) => {
+  return (
+    <Slot
+      aria-activedescendant="aksel-listbox__item-active"
+      // @ts-expect-error - You are meant to use an <input>, but Slot doesn't know that.
+      autoComplete="off"
+      role="combobox"
+    >
+      {children}
+    </Slot>
+  );
+};
+
+export { ListboxInputSlot };
+export type { ListboxInputSlotProps };

package/src/utils/components/Listbox/item/ListboxItem.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { cl } from "../../../helpers";
+
+export interface ListboxItemProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "role" | "tabIndex"
+> {
+  /**
+   * Unique ID used for tracking which item has virtual focus.
+   */
+  id: string;
+  hasVirtualFocus: boolean;
+  children: React.ReactNode;
+  /**
+   * Callback when item is selected.
+   * To improve performance when you have many items,
+   * memoize the prop with e.g. useEventCallback.
+   */
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+}
+
+function ListboxItemComponent({
+  id,
+  hasVirtualFocus,
+  children,
+  className,
+  ...rest
+}: ListboxItemProps) {
+  //console.log("Rendering item", id);
+
+  // TODO: Slot?
+
+  return (
+    <div
+      aria-selected={false}
+      {...rest}
+      className={cl("aksel-listbox__item", className)}
+      role="option"
+      tabIndex={-1}
+      data-virtual-focus={hasVirtualFocus}
+      data-id={id}
+      id={hasVirtualFocus ? "aksel-listbox__item-active" : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * This component is memoized. To improve performance when you have many items,
+ * make sure all object props have stable references (i.e. memoize the event handlers with e.g. useEventCallback).
+ *
+ * NB: Remember to set `aria-selected` on selected items!
+ */
+export const ListboxItem = React.memo(
+  ListboxItemComponent,
+) as typeof ListboxItemComponent;

package/src/utils/components/Listbox/list/ListboxList.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable jsx-a11y/mouse-events-have-key-events */
+/** biome-ignore-all lint/a11y/useKeyWithMouseEvents: We know what we are doing */
+import React from "react";
+import { cl } from "../../../helpers";
+
+export interface ListboxListProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "role" | "tabIndex" | "onMouseOver"
+> {
+  children: React.ReactNode;
+  setVirtuallyFocusedItemId: (value: string) => void;
+}
+
+function ListboxList({
+  children,
+  setVirtuallyFocusedItemId,
+  ...rest
+}: ListboxListProps) {
+  return (
+    <div
+      {...rest}
+      className={cl(rest.className, "aksel-listbox__list")}
+      role="listbox"
+      tabIndex={-1}
+      onMouseOver={(event) => {
+        const target = event.target as HTMLElement;
+        const itemEl: HTMLElement | null = target.closest('[role="option"]');
+        if (itemEl) {
+          setVirtuallyFocusedItemId(itemEl?.dataset.id || "");
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { ListboxList };