@navikt/ds-react 8.9.1 → 8.10.0

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>
     );
   },

package/src/timeline/TimelineRow.tsx

@@ -1,11 +1,15 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { format } from "date-fns";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../typography/BodyShort";
 import { cl } from "../utils/helpers";
 import { useI18n } from "../utils/i18n/i18n.hooks";
+import {
+  useTimelineKeyboardActiveRow,
+  useTimelineKeyboardContext,
+} from "./hooks/TimelineKeyboardNavProvider";
 import { PeriodContext } from "./hooks/usePeriodContext";
 import { useRowContext } from "./hooks/useRowContext";
-import { useTimelineContext } from "./hooks/useTimelineContext";
 import Period from "./period";
 import {
   PositionedPeriod,
@@ -49,10 +53,14 @@ export interface TimelineRowType extends React.ForwardRefExoticComponent<
 
 export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
   ({ label, className, headingTag = "h3", icon, ...rest }, ref) => {
-    const { periods, active } = useRowContext();
-    const { setActiveRow } = useTimelineContext();
+    const { periods } = useRowContext();
+    const { updateActiveRow, handleRowKeyDown } = useTimelineKeyboardContext();
+    const { activeRow } = useTimelineKeyboardActiveRow();
     const translate = useI18n("Timeline");
 
+    const [elementRefState, setElementRefState] =
+      React.useState<HTMLDivElement | null>(null);
+
     const latest = periods.reduce((a, b) => {
       return a.end > b.end ? a : b;
     }, {} as PositionedPeriod);
@@ -61,10 +69,6 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
       return a.end < b.end ? a : b;
     }, {} as PositionedPeriod);
 
-    const firstFocusable = periods.find(
-      (p) => !!p.children || !!p.onSelectPeriod,
-    );
-
     return (
       <>
         {label &&
@@ -80,15 +84,20 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
           ) : (
             <div className="aksel-timeline__row-label">{label}</div>
           ))}
+
+        {/** biome-ignore lint/a11y/noStaticElementInteractions: onKeyDown just captures events on child-elements here. Regular interaction patterns still works as expected. */}
         <div
           className={cl("aksel-timeline__row", {
-            "aksel-timeline__row--active": active,
+            "aksel-timeline__row--active": activeRow === elementRefState,
           })}
+          ref={setElementRefState}
+          tabIndex={-1}
+          onFocusCapture={() => updateActiveRow(elementRefState)}
+          onKeyDown={handleRowKeyDown}
+          data-timeline-row
         >
-          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
           <ol
             {...rest}
-            tabIndex={-1}
             ref={ref}
             aria-label={
               periods.length === 0
@@ -99,12 +108,6 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
                   })
             }
             className={cl("aksel-timeline__row-periods", className)}
-            onKeyDown={(e) => {
-              if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-                e.preventDefault();
-                setActiveRow(e.key);
-              }
-            }}
           >
             {periods?.map((period) => {
               return (
@@ -112,7 +115,6 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
                   <PeriodContext.Provider
                     value={{
                       periodId: period.id,
-                      firstFocus: firstFocusable?.id === period.id,
                       restProps: period?.restProps,
                     }}
                   >

package/src/timeline/hooks/TimelineKeyboardNavProvider.tsx

@@ -0,0 +1,237 @@
+import React, { useCallback, useRef } from "react";
+import { Slot } from "../../utils/components/slot/Slot";
+import { createStrictContext } from "../../utils/helpers";
+
+type TimelineKeyboardNavStableContextType = {
+  updateActiveRow: (element: HTMLElement | null) => void;
+  handleRowKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+  handlePinKeyDown: (event: React.KeyboardEvent<Element>) => void;
+};
+
+type TimelineKeyboardNavActiveRowContextType = {
+  activeRow: HTMLElement | null;
+};
+
+const {
+  Provider: TimelineKeyboardNavStableContextProvider,
+  useContext: useTimelineKeyboardContext,
+} = createStrictContext<TimelineKeyboardNavStableContextType>({
+  name: "TimelineKeyboardNavStableContext",
+  errorMessage:
+    "useTimelineKeyboardContext must be used within a TimelineKeyboardNavProvider",
+});
+
+const {
+  Provider: TimelineKeyboardNavActiveRowContextProvider,
+  useContext: useTimelineKeyboardActiveRow,
+} = createStrictContext<TimelineKeyboardNavActiveRowContextType>({
+  name: "TimelineKeyboardNavActiveRowContext",
+  errorMessage:
+    "useTimelineKeyboardActiveRow must be used within a TimelineKeyboardNavProvider",
+});
+
+type TimelineKeyboardNavProviderProps = {
+  children: React.ReactElement;
+};
+
+function TimelineKeyboardNavProvider({
+  children,
+}: TimelineKeyboardNavProviderProps) {
+  const [activeRow, setActiveRow] = React.useState<HTMLElement | null>(null);
+  const activeRowRef = React.useRef<HTMLElement | null>(null);
+
+  const timelineElementRef = useRef<HTMLTableElement>(null);
+
+  const updateActiveRow = React.useCallback((element: HTMLElement | null) => {
+    activeRowRef.current = element;
+    setActiveRow(element);
+  }, []);
+
+  const handleRowKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      const currentActiveRow = activeRowRef.current;
+      if (!currentActiveRow) {
+        return;
+      }
+
+      /* Skip interaction if focus is inside popover */
+      if (document.activeElement?.closest("[data-timeline-popover]")) {
+        return;
+      }
+
+      const { key } = event;
+
+      if (key === "ArrowDown" || key === "ArrowUp") {
+        const rows = currentActiveRow.parentElement?.querySelectorAll(
+          "[data-timeline-row]",
+        );
+        const firstPin = currentActiveRow.parentElement?.querySelector(
+          "[data-timeline-pin]",
+        );
+
+        if (!rows || rows.length === 0) {
+          return;
+        }
+
+        const currentIndex = Array.from(rows).indexOf(currentActiveRow);
+        if (currentIndex === -1) {
+          return;
+        }
+
+        const atBoundary = currentIndex === 0 && key === "ArrowUp";
+
+        if (atBoundary && firstPin) {
+          focusElement(firstPin, event);
+          return;
+        }
+
+        const nextIndex =
+          key === "ArrowDown" ? currentIndex + 1 : currentIndex - 1;
+
+        /* We want to avoid looping */
+        if (nextIndex < 0 || nextIndex >= rows.length) {
+          return;
+        }
+
+        const nextRow = rows[nextIndex];
+        const periods = nextRow?.querySelectorAll("[data-timeline-period]");
+
+        if (periods?.length > 0) {
+          focusElement(periods[0], event);
+        } else if (nextRow) {
+          focusElement(nextRow, event);
+        }
+        return;
+      }
+
+      if (key === "ArrowRight" || key === "ArrowLeft") {
+        event.preventDefault();
+        const periods = currentActiveRow.querySelectorAll(
+          "[data-timeline-period]",
+        );
+        if (periods.length === 0) {
+          return;
+        }
+
+        const currentIndex = Array.from(periods).indexOf(
+          document.activeElement as HTMLElement,
+        );
+        if (currentIndex === -1) {
+          /* If just the row has focus, we want to focus either the first or last period inside based on key */
+          focusElement(
+            periods[key === "ArrowRight" ? 0 : periods.length - 1],
+            event,
+          );
+          return;
+        }
+
+        const nextIndex =
+          key === "ArrowRight" ? currentIndex + 1 : currentIndex - 1;
+
+        /* We want to avoid looping */
+        if (nextIndex < 0 || nextIndex >= periods.length) {
+          return;
+        }
+
+        focusElement(periods[nextIndex], event);
+      }
+    },
+    [],
+  );
+
+  const handlePinKeyDown = useCallback(
+    (event: React.KeyboardEvent<Element>) => {
+      const timelineElement = timelineElementRef.current;
+      if (!timelineElement) {
+        return;
+      }
+
+      /* Skip interaction if focus is inside popover */
+      if (document.activeElement?.closest("[data-timeline-popover]")) {
+        return;
+      }
+
+      const { key } = event;
+
+      if (key === "ArrowDown") {
+        const rows = timelineElement.querySelectorAll("[data-timeline-row]");
+        if (rows.length === 0) {
+          return;
+        }
+        const rowToFocus = rows[0] as HTMLElement | null;
+
+        if (rowToFocus) {
+          const periods = rowToFocus?.querySelectorAll(
+            "[data-timeline-period]",
+          );
+
+          if (periods?.length > 0) {
+            focusElement(periods[0], event);
+          } else if (rowToFocus) {
+            focusElement(rowToFocus, event);
+          }
+        }
+      }
+
+      if (key === "ArrowRight" || key === "ArrowLeft") {
+        event.preventDefault();
+        const pins = timelineElement.querySelectorAll("[data-timeline-pin]");
+        if (pins.length === 0) {
+          return;
+        }
+
+        const currentIndex = Array.from(pins).indexOf(
+          document.activeElement as HTMLElement,
+        );
+        if (currentIndex === -1) {
+          return;
+        }
+
+        const nextIndex =
+          key === "ArrowRight" ? currentIndex + 1 : currentIndex - 1;
+
+        /* We want to avoid looping */
+        if (nextIndex < 0 || nextIndex >= pins.length) {
+          return;
+        }
+
+        focusElement(pins[nextIndex], event);
+      }
+    },
+    [],
+  );
+
+  return (
+    <TimelineKeyboardNavStableContextProvider
+      updateActiveRow={updateActiveRow}
+      handleRowKeyDown={handleRowKeyDown}
+      handlePinKeyDown={handlePinKeyDown}
+    >
+      <TimelineKeyboardNavActiveRowContextProvider activeRow={activeRow}>
+        <Slot ref={timelineElementRef}>{children}</Slot>
+      </TimelineKeyboardNavActiveRowContextProvider>
+    </TimelineKeyboardNavStableContextProvider>
+  );
+}
+
+/**
+ * Focuses the given element and prevents default behavior of the event if focus is called.
+ */
+function focusElement(
+  element: HTMLElement | Element | null,
+  event: React.KeyboardEvent<HTMLElement | Element>,
+) {
+  if (!element) {
+    return;
+  }
+
+  event.preventDefault();
+
+  (element as HTMLElement).focus();
+}
+
+export {
+  TimelineKeyboardNavProvider,
+  useTimelineKeyboardContext,
+  useTimelineKeyboardActiveRow,
+};

package/src/timeline/hooks/usePeriodContext.tsx

@@ -2,13 +2,11 @@ import { createContext, useContext } from "react";
 
 interface PeriodContextProps {
   periodId: string;
-  firstFocus: boolean;
   restProps?: any;
 }
 
 export const PeriodContext = createContext<PeriodContextProps>({
   periodId: "",
-  firstFocus: false,
 });
 
 export const usePeriodContext = () => {

package/src/timeline/hooks/useRowContext.tsx

@@ -4,14 +4,12 @@ import { PositionedPeriod } from "../utils/types.internal";
 interface RowContextProps {
   periods: PositionedPeriod[];
   id: string;
-  active: boolean;
   index: number;
 }
 
 export const RowContext = createContext<RowContextProps>({
   periods: [],
   id: "",
-  active: false,
   index: 0,
 });
 

package/src/timeline/hooks/useTimelineContext.tsx

@@ -6,10 +6,6 @@ interface TimelineContextProps {
   direction: "left" | "right";
   setStart: (d: Date) => void;
   setEndInclusive: (d: Date) => void;
-  activeRow: number | null;
-  setActiveRow: (i: string) => void;
-  initiate: (i: number) => void;
-  addFocusable: (ref: HTMLButtonElement | null, id: number) => void;
 }
 
 export const TimelineContext = createContext<TimelineContextProps>({
@@ -18,10 +14,6 @@ export const TimelineContext = createContext<TimelineContextProps>({
   direction: "left",
   setStart: () => null,
   setEndInclusive: () => null,
-  activeRow: 0,
-  setActiveRow: () => null,
-  initiate: () => null,
-  addFocusable: () => null,
 });
 
 export const useTimelineContext = () => {

package/src/timeline/period/ClickablePeriod.tsx

@@ -5,6 +5,7 @@ import {
   offset,
   safePolygon,
   shift,
+  useClick,
   useDismiss,
   useFloating,
   useFocus,
@@ -15,9 +16,6 @@ import React, { useState } from "react";
 import { cl } from "../../utils/helpers";
 import { useMergeRefs } from "../../utils/hooks";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
-import { usePeriodContext } from "../hooks/usePeriodContext";
-import { useRowContext } from "../hooks/useRowContext";
-import { useTimelineContext } from "../hooks/useTimelineContext";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
 import type { PeriodProps } from "./types";
 
@@ -52,9 +50,6 @@ const ClickablePeriod = React.memo(
     periodRef,
   }: TimelineClickablePeriodProps) => {
     const [open, setOpen] = useState(false);
-    const { index } = useRowContext();
-    const { firstFocus } = usePeriodContext();
-    const { initiate, addFocusable } = useTimelineContext();
 
     const translate = useI18n("Timeline");
 
@@ -78,8 +73,10 @@ const ClickablePeriod = React.memo(
     });
     const focus = useFocus(context);
     const dismiss = useDismiss(context);
+    const click = useClick(context);
 
     const { getFloatingProps, getReferenceProps } = useInteractions([
+      click,
       hover,
       focus,
       dismiss,
@@ -92,13 +89,11 @@ const ClickablePeriod = React.memo(
     return (
       <>
         <button
+          data-timeline-period
           {...restProps}
           data-color={restProps?.["data-color"] ?? status}
           type="button"
-          ref={(r) => {
-            firstFocus && addFocusable(r, index);
-            mergedRef?.(r);
-          }}
+          ref={mergedRef}
           aria-label={label}
           className={cl(
             "aksel-timeline__period--clickable",
@@ -111,17 +106,10 @@ const ClickablePeriod = React.memo(
           aria-expanded={children ? open : undefined}
           aria-current={isActive || undefined}
           {...getReferenceProps({
-            onFocus: () => {
-              initiate(index);
-            },
             onKeyDown: (e) => {
-              restProps?.onKeydown?.(e);
-              if (e.key === "Enter") {
-                setOpen((prev) => !prev);
-              }
+              restProps?.onKeyDown?.(e);
               if (e.key === " ") {
                 onSelectPeriod?.(e);
-                setOpen(false);
               }
             },
             style: {
@@ -144,10 +132,11 @@ const ClickablePeriod = React.memo(
             context={context}
             modal={false}
             initialFocus={-1}
-            returnFocus={false}
+            returnFocus
           >
             <div
               className="aksel-timeline__popover"
+              data-timeline-popover
               data-placement={placement}
               ref={refs.setFloating}
               role="dialog"

package/src/timeline/period/NonClickablePeriod.tsx

@@ -25,7 +25,9 @@ const NonClickablePeriod = ({
 
   return (
     <div
+      data-timeline-period
       ref={periodRef}
+      tabIndex={-1}
       {...restProps}
       data-color={restProps?.["data-color"] ?? status}
       className={cl(