@ostack.tech/ui-kform 0.8.1 → 0.9.0

package/dist/ostack-ui-kform.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { usePrefix as usePrefix$1, useControllableState, useLatestValues, combineEventHandlers, LocalizationProvider as LocalizationProvider$1, usePrinting, useConstant, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, usePrintInProgress, PrefixProvider, Root, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useToastManager, useStartPrintingTask, Tabs, useErrorReporter, EMPTY_STORE, Field, Feedback, FeedbackList, FeedbackPopover, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, controlStatusToAccent, VisuallyHidden, IconButton, Tab, boolDataAttr, TabList, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, usePrintClassNames, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, useKeyboardShortcut, NumericInput, Link, usePrint, usePrinterDocumentTitle, PrinterTrigger, RadioGroup, Radio, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, Slot, DataTableContent, DataTablePagination, DataTableRowsPerPage, TextArea, PortalContext } from "@ostack.tech/ui";
+import { usePrefix as usePrefix$1, useControllableState, useLatestValues, combineEventHandlers, LocalizationProvider as LocalizationProvider$1, usePrinting, useConstant, useSpacing, useCssVars, NATIVE_CONTROLS, useResponsiveValues, useCombinedRef, cx, useIsInRoot, warnOnce, usePrintInProgress, PrefixProvider, Root, computed, TabContent, ErrorBoundary, DocumentTitle, Spinner, useToastManager, useStartPrintingTask, Tabs, useErrorReporter, EMPTY_STORE, Field, VisuallyHidden, Feedback, FeedbackList, FeedbackPopover, useMediaBreakpointUp, DropdownMenu, DropdownMenuTrigger, Button, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, useAlertDialog, DropdownMenuRadioItem, controlStatusToAccent, IconButton, Tab, boolDataAttr, TabList, combineAriaIds, useIsInTableCell, useDataTableColumnLabel, useOnFieldLabelChange, Checkbox, OptionsGroup, Option, CheckboxGroup, useDateTransformer, DateInput, DateRangeInput, usePrintClassNames, Input, Dialog, Tooltip, DialogTrigger, ControlAddon, Icon, DialogContent, DialogHeader, DialogTitle, DialogBody, Alert, Stack, Popover, PopoverTrigger, PopoverContent, useMeasure, Container, Select, MenuListItem, MenuList, StepContent, Step, StepList, Stepper, useKeyboardShortcut, CloseButton, useScrollPosition, setBoolDataAttr, Card, CardHeader, CardTitle, CardBody, useIntersectionObserver, NumericInput, Link, usePrint, usePrinterDocumentTitle, PrinterTrigger, RadioGroup, Radio, ButtonGroup, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogBody, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DataTableCell, DataTableRow, useDataTableApiRef, DataTable, Slot, DataTableContent, DataTablePagination, DataTableRowsPerPage, TextArea, PortalContext } from "@ostack.tech/ui";
 import { AbsolutePath, AbsolutePathFragment, PathMultimap, sliceTable, listableSize, Path, ValidationFailure, nullableSchemaInnerSchema, compareSchemaPaths, PromiseCancellationException, arrayToTable, indexOfTableRowId, isComputedSchema } from "@ostack.tech/kform";
 import { useResolvedPath, equals, useFormController, useForm, FormContext, CurrentPath, useCurrentPath, useFormManager, useFormattedValue, InvalidPathError, AtPathError, useIssuesTracker, useFormContext, useInput, useListableInput, formatTemporalAsString, useTemporalInput, useFileInput, toFileList, useController, useNumericInput, formatNumericAsString, useFormatter } from "@ostack.tech/kform-react";
-import { createContext, useContext, useCallback, useMemo, useRef, useEffect, forwardRef, useState, useImperativeHandle, startTransition, Suspense, useDeferredValue, Children, isValidElement, createElement, memo } from "react";
+import { createContext, useContext, useCallback, useMemo, useRef, useEffect, forwardRef, useState, useImperativeHandle, startTransition, Suspense, useDeferredValue, Children, isValidElement, useId, createElement, memo } from "react";
 import { createStore, useStore } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
@@ -681,6 +681,7 @@ const FormAppElement = forwardRef(function FormAppElement2({
     prefix
   });
   const { store } = useFormAppContext();
+  const formTitle = useFormTitle();
   useEffect(
     () => store.subscribe(
       (state) => state.topBarHeight,
@@ -726,7 +727,8 @@ const FormAppElement = forwardRef(function FormAppElement2({
     {
       className: cx(prefix("form-app"), className),
       style: { ...cssVars, ...style },
-      tabIndex: 0,
+      "aria-label": formTitle,
+      tabIndex: -1,
       ...dataAttrs,
       ...otherProps,
       ref: combinedFormAppRef,
@@ -1238,6 +1240,7 @@ function useCreateAnnexesContext({
             set({ nextActiveAnnex: addedPath });
             await setPromise;
             latest.onAnnexAdd?.(addedPath);
+            return addedPath;
           },
           removeAnnex: async (path, isRepetitive) => {
             if (isRepetitive) {
@@ -1897,11 +1900,15 @@ function IssueMessage({
   issue,
   schema,
   displayIssueCode,
+  visuallyHiddenErrorCodePrefix,
+  visuallyHiddenWarningCodePrefix,
   unknownErrorMessage,
   unknownWarningMessage,
   issueCodeProps
 }) {
   const [locale7] = useLocale();
+  visuallyHiddenErrorCodePrefix ??= locale7.IssueMessages.visuallyHiddenErrorCodePrefix;
+  visuallyHiddenWarningCodePrefix ??= locale7.IssueMessages.visuallyHiddenWarningCodePrefix;
   unknownErrorMessage ??= locale7.IssueMessages.unknownErrorMessage;
   unknownWarningMessage ??= locale7.IssueMessages.unknownWarningMessage;
   let message = useRegisteredIssueMessage(path, issue.code);
@@ -1914,7 +1921,16 @@ function IssueMessage({
   return /* @__PURE__ */ jsxs(CurrentPath, { path, children: [
     typeof message === "function" ? message(issue.data ?? {}, schema, path) : message,
     (displayIssueCode || unknownIssue) && /* @__PURE__ */ jsxs("span", { ...issueCodeProps, children: [
+      " ",
       "(",
+      issue.severity === "error" && visuallyHiddenErrorCodePrefix && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+        visuallyHiddenErrorCodePrefix,
+        " "
+      ] }),
+      issue.severity === "warning" && visuallyHiddenWarningCodePrefix && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+        visuallyHiddenWarningCodePrefix,
+        " "
+      ] }),
       issue.code,
       ")"
     ] })
@@ -1925,6 +1941,8 @@ const IssueMessages = forwardRef(function IssueMessages2({
   issues,
   messages,
   displayIssueCodes,
+  visuallyHiddenErrorCodePrefix,
+  visuallyHiddenWarningCodePrefix,
   unknownErrorMessage,
   unknownWarningMessage,
   unwrapped,
@@ -1974,6 +1992,8 @@ const IssueMessages = forwardRef(function IssueMessages2({
         issue,
         schema,
         displayIssueCode: displayIssueCodes,
+        visuallyHiddenErrorCodePrefix,
+        visuallyHiddenWarningCodePrefix,
         unknownErrorMessage,
         unknownWarningMessage,
         issueCodeProps: { className: prefix("issue-messages__issue-code") }
@@ -1984,6 +2004,8 @@ const IssueMessages = forwardRef(function IssueMessages2({
       absolutePath,
       schema,
       displayIssueCodes,
+      visuallyHiddenErrorCodePrefix,
+      visuallyHiddenWarningCodePrefix,
       unknownErrorMessage,
       unknownWarningMessage,
       prefix
@@ -2050,6 +2072,7 @@ function displayStatusToColor(displayStatus) {
 }
 function AnnexesMenu({
   menuButtonText,
+  menuButtonLabel,
   addAnnexText,
   removeAnnexButtonLabel,
   removeAnnexKeyboardHint,
@@ -2077,8 +2100,16 @@ function AnnexesMenu({
     [store]
   );
   const annexes = useStore(store, (state) => state.annexes);
+  const addedAnnexPathRef = useRef(null);
   const newItems = useMemo(
-    () => annexes.map((annex) => /* @__PURE__ */ jsx(AnnexesMenuNewItem, { annex }, annex.path.toString())),
+    () => annexes.map((annex) => /* @__PURE__ */ jsx(
+      AnnexesMenuNewItem,
+      {
+        annex,
+        addedAnnexPathRef
+      },
+      annex.path.toString()
+    )),
     [annexes]
   );
   const tabStates = useStore(
@@ -2097,6 +2128,17 @@ function AnnexesMenu({
       [issuesDisplayMode, resetFocus, store]
     )
   );
+  const focus = useFocus();
+  const handleCloseAutoFocus = useCallback(
+    (evt) => {
+      if (addedAnnexPathRef.current) {
+        evt.preventDefault();
+        focus(addedAnnexPathRef.current);
+        addedAnnexPathRef.current = null;
+      }
+    },
+    [focus]
+  );
   const combinedMenuTriggerRef = useCombinedRef(
     menuTriggerRef,
     menuTriggerProps?.ref
@@ -2114,6 +2156,7 @@ function AnnexesMenu({
           {
             variant: "ghost",
             iconPlacement: "end",
+            "aria-label": menuButtonLabel,
             ...menuTriggerProps,
             className: cx(
               prefix("annexes__menu-trigger"),
@@ -2135,6 +2178,11 @@ function AnnexesMenu({
             align: "start",
             ...menuContentProps,
             className: cx(prefix("annexes__menu"), menuContentProps?.className),
+            onCloseAutoFocus: combineEventHandlers(
+              menuContentProps?.onCloseAutoFocus,
+              // eslint-disable-next-line react-hooks/refs
+              handleCloseAutoFocus
+            ),
             children: [
               /* @__PURE__ */ jsx(
                 DropdownMenuRadioGroup,
@@ -2267,9 +2315,15 @@ function AnnexesMenuItem({
         /* @__PURE__ */ jsxs("div", { className: prefix("annexes__menu-annex-content-container"), children: [
           /* @__PURE__ */ jsxs("div", { className: prefix("annexes__menu-annex-title"), children: [
             title,
-            subtitle && /* @__PURE__ */ jsx("span", { className: prefix("annexes__menu-annex-subtitle"), children: subtitle })
+            subtitle && /* @__PURE__ */ jsxs("span", { className: prefix("annexes__menu-annex-subtitle"), children: [
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }),
+              subtitle
+            ] })
           ] }),
-          nonRepetitiveDescription && /* @__PURE__ */ jsx("div", { className: prefix("annexes__menu-annex-description"), children: nonRepetitiveDescription })
+          nonRepetitiveDescription && /* @__PURE__ */ jsxs("div", { className: prefix("annexes__menu-annex-description"), children: [
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }),
+            nonRepetitiveDescription
+          ] })
         ] }),
         isRemovable && !formIsReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
           removeAnnexKeyboardHint && /* @__PURE__ */ jsx(VisuallyHidden, { children: removeAnnexKeyboardHint }),
@@ -2283,7 +2337,7 @@ function AnnexesMenuItem({
               circle: true,
               disabled: formIsDisabled,
               onClick: handleRemoveButtonClick,
-              "aria-hidden": true
+              tabIndex: -1
             }
           )
         ] })
@@ -2291,7 +2345,10 @@ function AnnexesMenuItem({
     }
   );
 }
-function AnnexesMenuNewItem({ annex }) {
+function AnnexesMenuNewItem({
+  annex,
+  addedAnnexPathRef
+}) {
   const prefix = usePrefix();
   const formIsDisabled = useFormIsDisabled();
   const formManager = useFormManager();
@@ -2340,8 +2397,8 @@ function AnnexesMenuNewItem({ annex }) {
     if (toAdd == null) {
       return;
     }
-    void store.getState().actions.addAnnex(annex.path, toAdd);
-  }, [annex, formManager, store]);
+    addedAnnexPathRef.current = await store.getState().actions.addAnnex(annex.path, toAdd);
+  }, [addedAnnexPathRef, annex, formManager, store]);
   return /* @__PURE__ */ jsx(
     DropdownMenuItem,
     {
@@ -2354,7 +2411,10 @@ function AnnexesMenuNewItem({ annex }) {
       },
       children: /* @__PURE__ */ jsxs(CurrentPath, { path: isRepetitive ? annex.path.parent() : annex.path, children: [
         /* @__PURE__ */ jsx("div", { className: prefix("annexes__menu-new-annex-title"), children: title }),
-        annex.description && /* @__PURE__ */ jsx("div", { className: prefix("annexes__menu-new-annex-description"), children: annex.description })
+        annex.description && /* @__PURE__ */ jsxs("div", { className: prefix("annexes__menu-new-annex-description"), children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }),
+          annex.description
+        ] })
       ] })
     }
   );
@@ -2364,10 +2424,9 @@ function AnnexTab({ path }) {
   const issuesDisplayMode = useIssuesDisplayMode();
   const deferredIssuesToDisplay = useAnnexState(
     path,
-    useShallow(
-      (state) => issuesDisplayMode === "inline" && state?.deferredIssuesToDisplay || []
-    )
+    useShallow((state) => state?.deferredIssuesToDisplay ?? [])
   );
+  const hasIssues = deferredIssuesToDisplay.length > 0;
   const deferredDisplayStatus = useAnnexState(
     path,
     (state) => state?.deferredDisplayStatus
@@ -2380,15 +2439,31 @@ function AnnexTab({ path }) {
     useCallback(
       (focusedPath) => {
         if (tabRef.current && path.equals(focusedPath)) {
-          if (issuesDisplayMode === "panel") {
-            visiblyFocus(tabRef.current);
-          }
+          visiblyFocus(tabRef.current);
           setTimeout(() => resetFocus());
         }
       },
-      [issuesDisplayMode, path, resetFocus]
+      [path, resetFocus]
     )
   );
+  const generatedId = useId();
+  const issueMessagesId = prefix(`annexes-annex-issue-messages-${generatedId}`);
+  const [issuesPopoverOpen, setIssuesPopoverOpen] = useState(false);
+  const [tabFocused, setTabFocused] = useState(false);
+  const handleTabFocus = useCallback(() => {
+    setTabFocused(true);
+  }, []);
+  const handleTabBlur = useCallback(() => {
+    setTabFocused(false);
+  }, []);
+  const handleIssuesPopoverOpenAutoFocus = useCallback(
+    (evt) => {
+      if (tabFocused) {
+        evt.preventDefault();
+      }
+    },
+    [tabFocused]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Tab,
@@ -2396,26 +2471,53 @@ function AnnexTab({ path }) {
         className: prefix("annexes__tab"),
         value: path.toString(),
         status: displayStatusToControlStatus(deferredDisplayStatus),
-        "data-has-issues": boolDataAttr(deferredIssuesToDisplay.length > 0),
+        onFocus: handleTabFocus,
+        onBlur: handleTabBlur,
+        "data-has-issues": boolDataAttr(
+          issuesDisplayMode === "inline" && hasIssues
+        ),
         tabInnerProps: { className: prefix("annexes__tab-inner") },
+        "aria-describedby": hasIssues ? issueMessagesId : void 0,
         ref: tabRef,
         children: /* @__PURE__ */ jsxs(CurrentPath, { path, children: [
           /* @__PURE__ */ jsx("span", { className: prefix("annexes__tab-title"), children: title }),
-          subtitle && /* @__PURE__ */ jsx("span", { className: prefix("annexes__tab-subtitle"), children: subtitle })
+          subtitle && /* @__PURE__ */ jsxs("span", { className: prefix("annexes__tab-subtitle"), children: [
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " }),
+            subtitle
+          ] })
         ] })
       }
     ),
+    hasIssues && issuesDisplayMode === "panel" && /* @__PURE__ */ jsx(
+      IssueMessages,
+      {
+        hidden: true,
+        id: issueMessagesId,
+        path,
+        issues: deferredIssuesToDisplay
+      }
+    ),
     issuesDisplayMode === "inline" && /* @__PURE__ */ jsx(
       IssuesPopover,
       {
         path,
+        open: hasIssues && (tabFocused || issuesPopoverOpen),
+        onOpenChange: setIssuesPopoverOpen,
+        onOpenAutoFocus: handleIssuesPopoverOpenAutoFocus,
         buttonContainerProps: {
           className: prefix("annexes__tab-issues-popover-button-container")
         },
         iconButtonProps: {
-          className: prefix("annexes__tab-issues-popover-button")
+          className: prefix("annexes__tab-issues-popover-button"),
+          tabIndex: -1
         },
-        children: /* @__PURE__ */ jsx(IssueMessages, { issues: deferredIssuesToDisplay })
+        children: /* @__PURE__ */ jsx(
+          IssueMessages,
+          {
+            id: issueMessagesId,
+            issues: deferredIssuesToDisplay
+          }
+        )
       }
     )
   ] });
@@ -2447,6 +2549,7 @@ const AnnexesTabList = forwardRef(function AnnexManager({ hideNonActiveOnSmallSc
 });
 const AnnexesManager = forwardRef(function AnnexManager2({
   menuButtonText,
+  menuButtonLabel,
   addAnnexText,
   removeAnnexButtonLabel,
   removeAnnexKeyboardHint,
@@ -2468,6 +2571,7 @@ const AnnexesManager = forwardRef(function AnnexManager2({
   const [locale7] = useLocale();
   ariaLabel ??= locale7.AnnexesManager["aria-label"];
   menuButtonText ??= locale7.AnnexesManager.menuButtonText;
+  menuButtonLabel ??= locale7.AnnexesManager.menuButtonLabel;
   addAnnexText ??= locale7.AnnexesManager.addAnnexText;
   removeAnnexButtonLabel ??= locale7.AnnexesManager.removeAnnexButtonLabel;
   removeAnnexKeyboardHint ??= locale7.AnnexesManager.removeAnnexKeyboardHint;
@@ -2475,13 +2579,12 @@ const AnnexesManager = forwardRef(function AnnexManager2({
   removeAnnexConfirmDialogMessage ??= locale7.AnnexesManager.removeAnnexConfirmDialogMessage;
   removeAnnexConfirmDialogOkText ??= locale7.AnnexesManager.removeAnnexConfirmDialogOkText;
   removeAnnexConfirmDialogCancelText ??= locale7.AnnexesManager.removeAnnexConfirmDialogCancelText;
+  const managerRef = useRef(null);
   const store = useAnnexesContext();
   const issuesDisplayMode = useIssuesDisplayMode();
   const tablessStates = useStore(
     store,
-    useShallow(
-      (state) => issuesDisplayMode === "inline" ? state.tablessStates() : []
-    )
+    (state) => state.tablessStates()
   );
   const tablessPaths = useMemo(
     () => tablessStates.map((state) => state.path),
@@ -2491,6 +2594,16 @@ const AnnexesManager = forwardRef(function AnnexManager2({
     () => tablessStates.map((state) => state.deferredIssuesToDisplay || []),
     [tablessStates]
   );
+  const hasIssues = useMemo(
+    () => deferredTablessIssuesToDisplay.some((issues) => issues.length > 0),
+    [deferredTablessIssuesToDisplay]
+  );
+  const hasErrors = useMemo(
+    () => deferredTablessIssuesToDisplay.some(
+      (issues) => issues.some((issue) => issue.severity === "error")
+    ),
+    [deferredTablessIssuesToDisplay]
+  );
   const formManager = useFormManager();
   const shouldRenderMenu = useStore(
     store,
@@ -2498,13 +2611,62 @@ const AnnexesManager = forwardRef(function AnnexManager2({
       (annex) => annex.path.lastFragment === AbsolutePathFragment.Wildcard || formManager.schema(annex.path).typeInfo.nullable
     )
   );
+  const generatedId = useId();
+  const menuContentId = menuContentProps?.id ?? prefix(`annexes-menu-content-${generatedId}`);
+  const handleAnnexesMenuOpenChange = useCallback(
+    (open) => {
+      const managerEl = managerRef.current;
+      if (managerEl) {
+        const oldAriaOwns = managerEl.getAttribute("aria-owns")?.split(" ") ?? [];
+        let newAriaOwns;
+        if (open) {
+          newAriaOwns = [...oldAriaOwns, menuContentId];
+        } else {
+          newAriaOwns = oldAriaOwns.filter((id) => id !== menuContentId);
+        }
+        if (newAriaOwns.length > 0) {
+          managerEl.setAttribute("aria-owns", newAriaOwns.join(" "));
+        } else {
+          managerEl.removeAttribute("aria-owns");
+        }
+      }
+    },
+    [menuContentId]
+  );
+  const issueMessagesId = prefix(`annexes-issue-messages-${generatedId}`);
+  const [issuesPopoverOpen, setIssuesPopoverOpen] = useState(false);
+  const [menuTriggerFocused, setMenuTriggerFocused] = useState(false);
+  const handleMenuTriggerFocus = useCallback(() => {
+    setMenuTriggerFocused(true);
+  }, []);
+  const handleMenuTriggerBlur = useCallback(() => {
+    setMenuTriggerFocused(false);
+  }, []);
+  const handleIssuesPopoverOpenAutoFocus = useCallback(
+    (evt) => {
+      if (menuTriggerFocused) {
+        evt.preventDefault();
+      }
+    },
+    [menuTriggerFocused]
+  );
+  const feedbackList = /* @__PURE__ */ jsx(FeedbackList, { id: issueMessagesId, hidden: issuesDisplayMode === "panel", children: tablessStates.map((state, i) => /* @__PURE__ */ jsx(
+    IssueMessages,
+    {
+      path: state.path,
+      issues: deferredTablessIssuesToDisplay[i] ?? [],
+      unwrapped: true
+    },
+    state.path.toString()
+  )) });
+  const combinedManagerRef = useCombinedRef(managerRef, forwardedRef);
   return /* @__PURE__ */ jsxs(
     "nav",
     {
       className: cx(prefix("annexes__manager"), className),
       "aria-label": ariaLabel,
       ...otherProps,
-      ref: forwardedRef,
+      ref: combinedManagerRef,
       children: [
         shouldRenderMenu && /* @__PURE__ */ jsx(
           "div",
@@ -2518,6 +2680,7 @@ const AnnexesManager = forwardRef(function AnnexManager2({
               AnnexesMenu,
               {
                 menuButtonText,
+                menuButtonLabel,
                 addAnnexText,
                 removeAnnexButtonLabel,
                 removeAnnexKeyboardHint,
@@ -2526,28 +2689,44 @@ const AnnexesManager = forwardRef(function AnnexManager2({
                 removeAnnexConfirmDialogOkText,
                 removeAnnexConfirmDialogCancelText,
                 ...menuProps,
-                menuTriggerProps,
-                menuContentProps
+                onOpenChange: combineEventHandlers(
+                  handleAnnexesMenuOpenChange,
+                  menuProps?.onOpenChange
+                ),
+                menuTriggerProps: {
+                  "aria-invalid": hasErrors || void 0,
+                  ...menuTriggerProps,
+                  "aria-describedby": combineAriaIds(
+                    menuTriggerProps?.["aria-describedby"],
+                    issueMessagesId
+                  ),
+                  onFocus: combineEventHandlers(
+                    menuTriggerProps?.onFocus,
+                    handleMenuTriggerFocus
+                  ),
+                  onBlur: combineEventHandlers(
+                    menuTriggerProps?.onBlur,
+                    handleMenuTriggerBlur
+                  )
+                },
+                menuContentProps: { ...menuContentProps, id: menuContentId }
               }
             )
           }
         ),
+        shouldRenderMenu && issuesDisplayMode === "panel" && hasIssues && feedbackList,
         shouldRenderMenu && issuesDisplayMode === "inline" && /* @__PURE__ */ jsx(
           IssuesPopover,
           {
+            open: hasIssues && (menuTriggerFocused || issuesPopoverOpen),
+            onOpenChange: setIssuesPopoverOpen,
+            onOpenAutoFocus: handleIssuesPopoverOpenAutoFocus,
             buttonContainerProps: {
               className: prefix("annexes__issues-popover-container")
             },
+            iconButtonProps: { tabIndex: -1 },
             relevantPaths: tablessPaths,
-            children: /* @__PURE__ */ jsx(FeedbackList, { children: tablessStates.map((state, i) => /* @__PURE__ */ jsx(
-              IssueMessages,
-              {
-                path: state.path,
-                issues: deferredTablessIssuesToDisplay[i] ?? [],
-                unwrapped: true
-              },
-              state.path.toString()
-            )) })
+            children: feedbackList
           }
         ),
         /* @__PURE__ */ jsx(
@@ -3045,9 +3224,7 @@ const DateControl = forwardRef(function DateControl2({
   onDisplayStatusChange,
   onDirtyStatusChange,
   onTouchedStatusChange,
-  locale: dateFnsLocale,
-  shortFormat,
-  fullFormat,
+  format: dateFormat,
   required,
   minDate,
   maxDate,
@@ -3061,9 +3238,7 @@ const DateControl = forwardRef(function DateControl2({
   ...otherProps
 }, forwardedRef) {
   const { format: format2, parse } = useTemporalStringTransformer({
-    locale: dateFnsLocale,
-    shortFormat,
-    fullFormat
+    format: dateFormat
   });
   const [formattedValue, setFormattedValue] = useState("");
   const controller = useTemporalInput(path, {
@@ -3132,9 +3307,7 @@ const DateControl = forwardRef(function DateControl2({
       {
         value: formattedValue,
         name: inputProps.name,
-        locale: dateFnsLocale,
-        shortFormat,
-        fullFormat,
+        format: dateFormat,
         required: required ?? restrictions.required === true,
         minDate: minDate ?? minDateRestriction(schema),
         maxDate: maxDate ?? maxDateRestriction(schema),
@@ -3199,9 +3372,7 @@ const DateRangeControl = forwardRef(function DateRangeControl2({
   onEndDirtyStatusChange,
   onEndTouchedStatusChange,
   onValueChange,
-  locale: dateFnsLocale,
-  shortFormat,
-  fullFormat,
+  format: dateFormat,
   onBlurToOutside,
   endAdornment,
   ...otherProps
@@ -3210,9 +3381,7 @@ const DateRangeControl = forwardRef(function DateRangeControl2({
   issuesPanelStartLabelSuffix ??= locale7.DateRangeControl.issuesPanelStartLabelSuffix;
   issuesPanelEndLabelSuffix ??= locale7.DateRangeControl.issuesPanelEndLabelSuffix;
   const { format: format2, parse } = useTemporalStringTransformer({
-    locale: dateFnsLocale,
-    shortFormat,
-    fullFormat
+    format: dateFormat
   });
   const [formattedValue, setFormattedValue] = useState({
     start: "",
@@ -3338,9 +3507,7 @@ const DateRangeControl = forwardRef(function DateRangeControl2({
       DateRangeInput,
       {
         value: formattedValue,
-        locale: dateFnsLocale,
-        shortFormat,
-        fullFormat,
+        format: dateFormat,
         required: required ?? (startRestrictions.required === true || endRestrictions.required === true),
         minDate: minDate ?? minDateRestriction(startSchema),
         maxDate: maxDate ?? maxDateRestriction(endSchema),
@@ -3777,6 +3944,7 @@ const FormPageHeader = forwardRef(function FormPageHeader2({
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const [locale7] = useLocale();
   const printing = usePrinting();
   const currentPath = useCurrentPath();
   const issuesDisplayMode = useIssuesDisplayMode();
@@ -3792,6 +3960,10 @@ const FormPageHeader = forwardRef(function FormPageHeader2({
   );
   const code = useFormPageState(currentPath, (state) => state?.code);
   const title = useFormPageState(currentPath, (state) => state?.title);
+  const visuallyHiddenCodePrefix = useFormPageState(
+    currentPath,
+    (state) => state?.visuallyHiddenCodePrefix ?? locale7.FormPage.visuallyHiddenCodePrefix
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3802,24 +3974,34 @@ const FormPageHeader = forwardRef(function FormPageHeader2({
       ),
       ref: forwardedRef,
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...codeProps,
-            className: cx(prefix("form-pages__page-code"), codeProps?.className),
-            "data-status": displayStatusToControlStatus(deferredDisplayStatus),
-            "data-accent": controlStatusToAccent(
-              displayStatusToControlStatus(deferredDisplayStatus)
-            ),
-            children: code
-          }
-        ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "h2",
           {
+            tabIndex: -1,
             ...titleProps,
             className: cx(prefix("form-pages__page-title"), titleProps?.className),
-            children: title
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...codeProps,
+                  className: cx(prefix("form-pages__page-code"), codeProps?.className),
+                  "data-status": displayStatusToControlStatus(deferredDisplayStatus),
+                  "data-accent": controlStatusToAccent(
+                    displayStatusToControlStatus(deferredDisplayStatus)
+                  ),
+                  children: code != null && typeof code !== "boolean" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    visuallyHiddenCodePrefix && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+                      visuallyHiddenCodePrefix,
+                      " "
+                    ] }),
+                    code,
+                    /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " })
+                  ] })
+                }
+              ),
+              title
+            ]
           }
         ),
         !printing && /* @__PURE__ */ jsxs(
@@ -3907,6 +4089,7 @@ const FormPage = forwardRef(
     className,
     helperText,
     helperButtonLabel,
+    visuallyHiddenCodePrefix: _visuallyHiddenCodePrefix,
     issueMessages,
     ownIssueMessages,
     headerProps,
@@ -3922,12 +4105,16 @@ const FormPage = forwardRef(
     helperPopoverProps,
     helperPopoverContentProps,
     children,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     ...otherProps
   }, forwardedRef) {
     const prefix = usePrefix();
     const [locale7] = useLocale();
     helperButtonLabel ??= locale7.FormPage.helperButtonLabel;
     const printing = usePrinting();
+    const generatedId = useId();
+    const titleId = titleProps?.id ?? prefix(`form-page-title-${generatedId}`);
     const store = useFormPagesContext();
     const pagePath = useResolvedPath(path);
     const activePage = useStore(store, (state) => state.activePage);
@@ -3971,9 +4158,11 @@ const FormPage = forwardRef(
       {
         title: printing ? void 0 : documentTitle ?? void 0,
         children: /* @__PURE__ */ jsx(
-          "div",
+          "section",
           {
             className: cx(prefix("form-pages__page"), className),
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 ? titleId : void 0),
             ...otherProps,
             ref: forwardedRef,
             children: /* @__PURE__ */ jsx(FormAppStatus, { disabled, readOnly, children: /* @__PURE__ */ jsxs(FormAppIssueMessages, { issueMessages, children: [
@@ -3984,7 +4173,7 @@ const FormPage = forwardRef(
                   helperButtonLabel,
                   ownIssueMessages,
                   codeProps,
-                  titleProps,
+                  titleProps: { ...titleProps, id: titleId },
                   headerPopoverContainerProps,
                   issuesPopoverProps,
                   issueMessagesProps,
@@ -4100,6 +4289,7 @@ const FormPages = forwardRef(
       title: child.props.title,
       documentTitle: child.props.documentTitle,
       code: child.props.code,
+      visuallyHiddenCodePrefix: child.props.visuallyHiddenCodePrefix,
       issuesPanelLabel: child.props.issuesPanelLabel
     }));
     const resolvedPages = useMemo(
@@ -4291,6 +4481,7 @@ const FormPagesSelect = forwardRef(function FormPagesSelect2({
   );
 });
 function FormPageSidebarItem({ path }) {
+  const [locale7] = useLocale();
   const prefix = usePrefix();
   const store = useFormPagesContext();
   const activePage = useStore(store, (state) => state.activePage);
@@ -4302,6 +4493,10 @@ function FormPageSidebarItem({ path }) {
   );
   const code = useFormPageState(path, (state) => state?.code);
   const title = useFormPageState(path, (state) => state?.title);
+  const visuallyHiddenCodePrefix = useFormPageState(
+    path,
+    (state) => state?.visuallyHiddenCodePrefix ?? locale7.FormPage.visuallyHiddenCodePrefix
+  );
   const issuesDisplayMode = useIssuesDisplayMode();
   const itemActionRef = useRef(null);
   const resetFocus = useResetFocus();
@@ -4328,7 +4523,11 @@ function FormPageSidebarItem({ path }) {
       onSelect: handleClick,
       color: "primary",
       contentProps: { className: prefix("form-pages__sidebar-item-content") },
-      actionProps: { ref: itemActionRef },
+      actionProps: {
+        "aria-current": isSelected ? "page" : void 0,
+        "aria-invalid": deferredDisplayStatus === "error" || void 0,
+        ref: itemActionRef
+      },
       children: /* @__PURE__ */ jsxs(CurrentPath, { path, children: [
         /* @__PURE__ */ jsx(
           "span",
@@ -4339,7 +4538,14 @@ function FormPageSidebarItem({ path }) {
             "data-accent": controlStatusToAccent(
               displayStatusToControlStatus(deferredDisplayStatus)
             ),
-            children: code
+            children: code != null && typeof code !== "boolean" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              visuallyHiddenCodePrefix && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+                visuallyHiddenCodePrefix,
+                " "
+              ] }),
+              code,
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: ", " })
+            ] })
           }
         ),
         title
@@ -4368,7 +4574,7 @@ const FormPagesSidebar = forwardRef(function FormPagesSidebar2({ className, ...o
   const pages = useStore(store, (state) => state.pages);
   const combinedSidebarRef = useCombinedRef(setSidebarEl, forwardedRef);
   return /* @__PURE__ */ jsx(
-    "aside",
+    "div",
     {
       className: cx(prefix("form-pages__sidebar"), className),
       ...otherProps,
@@ -4832,10 +5038,15 @@ function IssuesPanelControls({
   buttonsColor,
   closePanel,
   focusButtonLabel,
+  focusKeybinds,
   previousIssueButtonLabel,
+  previousIssueKeybinds,
   nextIssueButtonLabel,
+  nextIssueKeybinds,
   firstIssueButtonLabel,
+  firstIssueKeybinds,
   lastIssueButtonLabel,
+  lastIssueKeybinds,
   paginationLabel,
   validatingSpinnerProps,
   paginationProps,
@@ -4847,11 +5058,48 @@ function IssuesPanelControls({
   closeButtonProps
 }) {
   const prefix = usePrefix();
+  const formIsDisabled = useFormIsDisabled();
   const { validating } = useFormIsValidating();
   const deferredValidating = useDeferredValue(validating);
   const currentPageInitialized = currentPageController.useInitialized();
   const currentPageExists = currentPageController.useExists();
   const focus = useFocus();
+  const handleFocus = useCallback(
+    () => focus(currentPagePath),
+    [currentPagePath, focus]
+  );
+  const focusButtonLoading = !currentPageInitialized;
+  const focusButtonDisabled = formIsDisabled || !currentPageExists;
+  const firstIssueButtonDisabled = formIsDisabled || firstIssueButtonProps?.disabled || currentPageIndex === 0;
+  const previousIssueButtonDisabled = formIsDisabled || previousIssueButtonProps?.disabled || currentPageIndex === 0;
+  const nextIssueButtonDisabled = formIsDisabled || nextIssueButtonProps?.disabled || currentPageIndex === nPages - 1;
+  const lastIssueButtonDisabled = formIsDisabled || lastIssueButtonProps?.disabled || currentPageIndex === nPages - 1;
+  const formAppEl = useFormAppElement();
+  useKeyboardShortcut(focusKeybinds, handleFocus, {
+    disabled: focusButtonLoading || focusButtonDisabled,
+    target: formAppEl,
+    preventDefault: true
+  });
+  useKeyboardShortcut(firstIssueKeybinds, goToFirstPage, {
+    disabled: firstIssueButtonDisabled,
+    target: formAppEl,
+    preventDefault: true
+  });
+  useKeyboardShortcut(previousIssueKeybinds, goToPreviousPage, {
+    disabled: previousIssueButtonDisabled,
+    target: formAppEl,
+    preventDefault: true
+  });
+  useKeyboardShortcut(nextIssueKeybinds, goToNextPage, {
+    disabled: nextIssueButtonDisabled,
+    target: formAppEl,
+    preventDefault: true
+  });
+  useKeyboardShortcut(lastIssueKeybinds, goToLastPage, {
+    disabled: lastIssueButtonDisabled,
+    target: formAppEl,
+    preventDefault: true
+  });
   return /* @__PURE__ */ jsxs("div", { className: prefix("issues-panel__controls"), children: [
     nPages > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       deferredValidating && /* @__PURE__ */ jsx(
@@ -4868,7 +5116,7 @@ function IssuesPanelControls({
         "div",
         {
           role: "presentation",
-          "aria-live": "polite",
+          "aria-live": "assertive",
           ...paginationProps,
           className: cx(
             prefix("issues-panel__pagination"),
@@ -4895,12 +5143,13 @@ function IssuesPanelControls({
             prefix("issues-panel__focus"),
             focusButtonProps?.className
           ),
-          label: focusButtonLabel ?? "",
-          loading: !currentPageInitialized,
-          disabled: !currentPageExists,
+          label: focusButtonLabel,
+          keybinds: focusKeybinds,
+          loading: focusButtonLoading,
+          disabled: focusButtonDisabled,
           onClick: combineEventHandlers(
             focusButtonProps?.onClick,
-            () => focus(currentPagePath)
+            handleFocus
           )
         }
       ),
@@ -4915,8 +5164,9 @@ function IssuesPanelControls({
             prefix("issues-panel__first"),
             firstIssueButtonProps?.className
           ),
-          label: firstIssueButtonLabel ?? "",
-          disabled: firstIssueButtonProps?.disabled || currentPageIndex === 0,
+          label: firstIssueButtonLabel,
+          keybinds: firstIssueKeybinds,
+          disabled: firstIssueButtonDisabled,
           onClick: combineEventHandlers(
             firstIssueButtonProps?.onClick,
             goToFirstPage
@@ -4934,8 +5184,9 @@ function IssuesPanelControls({
             prefix("issues-panel__previous"),
             previousIssueButtonProps?.className
           ),
-          label: previousIssueButtonLabel ?? "",
-          disabled: previousIssueButtonProps?.disabled || currentPageIndex === 0,
+          label: previousIssueButtonLabel,
+          keybinds: previousIssueKeybinds,
+          disabled: previousIssueButtonDisabled,
           onClick: combineEventHandlers(
             previousIssueButtonProps?.onClick,
             goToPreviousPage
@@ -4953,8 +5204,9 @@ function IssuesPanelControls({
             prefix("issues-panel__next"),
             nextIssueButtonProps?.className
           ),
-          label: nextIssueButtonLabel ?? "",
-          disabled: nextIssueButtonProps?.disabled || currentPageIndex === nPages - 1,
+          label: nextIssueButtonLabel,
+          keybinds: nextIssueKeybinds,
+          disabled: nextIssueButtonDisabled,
           onClick: combineEventHandlers(
             nextIssueButtonProps?.onClick,
             goToNextPage
@@ -4972,8 +5224,9 @@ function IssuesPanelControls({
             prefix("issues-panel__last"),
             lastIssueButtonProps?.className
           ),
-          label: lastIssueButtonLabel ?? "",
-          disabled: lastIssueButtonProps?.disabled || currentPageIndex === nPages - 1,
+          label: lastIssueButtonLabel,
+          keybinds: lastIssueKeybinds,
+          disabled: lastIssueButtonDisabled,
           onClick: combineEventHandlers(
             lastIssueButtonProps?.onClick,
             goToLastPage
@@ -5126,8 +5379,6 @@ const IssuesPanelMessagesCard = forwardRef(function IssuesPanelMessagesCard2({
                 /* @__PURE__ */ jsx(
                   CardTitle,
                   {
-                    role: "presentation",
-                    "aria-live": "polite",
                     ...titleProps,
                     className: cx(
                       prefix("issues-panel__title"),
@@ -5236,7 +5487,7 @@ const IssuesPanelSummaryCard = forwardRef(function IssuesPanelSummaryCard2({
                 CardTitle,
                 {
                   role: "presentation",
-                  "aria-live": "polite",
+                  "aria-live": "assertive",
                   ...titleProps,
                   className: cx(
                     prefix("issues-panel__title"),
@@ -5260,6 +5511,11 @@ const IssuesPanelSummaryCard = forwardRef(function IssuesPanelSummaryCard2({
     }
   );
 });
+const DEFAULT_FOCUS_KEYBINDS = "Alt+Shift+F";
+const DEFAULT_PREVIOUS_ISSUE_KEYBINDS = "Alt+Shift+ArrowLeft";
+const DEFAULT_NEXT_ISSUE_KEYBINDS = "Alt+Shift+ArrowRight";
+const DEFAULT_FIRST_ISSUE_KEYBINDS = "Alt+Shift+Home";
+const DEFAULT_LAST_ISSUE_KEYBINDS = "Alt+Shift+End";
 const IssuesPanel = forwardRef(function ValidationPanel({
   defaultOpen = false,
   open: controlledOpen,
@@ -5271,10 +5527,15 @@ const IssuesPanel = forwardRef(function ValidationPanel({
   errorsLabel,
   warningsLabel,
   focusButtonLabel,
+  focusKeybinds,
   previousIssueButtonLabel,
+  previousIssueKeybinds,
   nextIssueButtonLabel,
+  nextIssueKeybinds,
   firstIssueButtonLabel,
+  firstIssueKeybinds,
   lastIssueButtonLabel,
+  lastIssueKeybinds,
   paginationLabel,
   noIssuesMessage,
   resolvedTitle,
@@ -5301,10 +5562,25 @@ const IssuesPanel = forwardRef(function ValidationPanel({
   errorsLabel ??= locale7.IssuesPanel.errorsLabel;
   warningsLabel ??= locale7.IssuesPanel.warningsLabel;
   focusButtonLabel ??= locale7.IssuesPanel.focusButtonLabel;
+  if (focusKeybinds === void 0) {
+    focusKeybinds = locale7.IssuesPanel.focusKeybinds ?? DEFAULT_FOCUS_KEYBINDS;
+  }
   previousIssueButtonLabel ??= locale7.IssuesPanel.previousIssueButtonLabel;
+  if (previousIssueKeybinds === void 0) {
+    previousIssueKeybinds = locale7.IssuesPanel.previousIssueKeybinds ?? DEFAULT_PREVIOUS_ISSUE_KEYBINDS;
+  }
   nextIssueButtonLabel ??= locale7.IssuesPanel.nextIssueButtonLabel;
+  if (nextIssueKeybinds === void 0) {
+    nextIssueKeybinds = locale7.IssuesPanel.nextIssueKeybinds ?? DEFAULT_NEXT_ISSUE_KEYBINDS;
+  }
   firstIssueButtonLabel ??= locale7.IssuesPanel.firstIssueButtonLabel;
+  if (firstIssueKeybinds === void 0) {
+    firstIssueKeybinds = locale7.IssuesPanel.firstIssueKeybinds ?? DEFAULT_FIRST_ISSUE_KEYBINDS;
+  }
   lastIssueButtonLabel ??= locale7.IssuesPanel.lastIssueButtonLabel;
+  if (lastIssueKeybinds === void 0) {
+    lastIssueKeybinds = locale7.IssuesPanel.lastIssueKeybinds ?? DEFAULT_LAST_ISSUE_KEYBINDS;
+  }
   paginationLabel ??= locale7.IssuesPanel.paginationLabel;
   noIssuesMessage ??= locale7.IssuesPanel.noIssuesMessage;
   resolvedTitle ??= locale7.IssuesPanel.resolvedTitle;
@@ -5325,6 +5601,17 @@ const IssuesPanel = forwardRef(function ValidationPanel({
     currentPagePath ?? AbsolutePath.ROOT,
     { enabled: open && !formIsLoading && currentPagePath !== null }
   );
+  useEffect(() => {
+    if (currentPagePath === null && issuesTrackerResult.initialized && issuesTrackerResult.info.length > 0) {
+      setCurrentPagePath(latestInteraction);
+    }
+  }, [
+    currentPagePath,
+    issuesTrackerResult.info?.length,
+    issuesTrackerResult.initialized,
+    latestInteraction,
+    setCurrentPagePath
+  ]);
   const lastExistingPageIndex = useRef(null);
   const currentPageIndex = useMemo(() => {
     const idx = currentPagePath ? info?.findIndex(({ path }) => currentPagePath.equals(path)) ?? -1 : -1;
@@ -5455,10 +5742,15 @@ const IssuesPanel = forwardRef(function ValidationPanel({
       buttonsColor,
       closePanel: close,
       focusButtonLabel,
+      focusKeybinds,
       previousIssueButtonLabel,
+      previousIssueKeybinds,
       nextIssueButtonLabel,
+      nextIssueKeybinds,
       firstIssueButtonLabel,
+      firstIssueKeybinds,
       lastIssueButtonLabel,
+      lastIssueKeybinds,
       paginationLabel,
       validatingSpinnerProps,
       paginationProps,
@@ -5560,6 +5852,7 @@ function mostRelevantIssuePath(info, latestInteraction, formSchema, issuesOrderC
   }
   return info[0].path;
 }
+const DEFAULT_LOAD_KEYBINDS = "$mod+O";
 function LoadAction({
   label,
   keybinds,
@@ -5581,7 +5874,9 @@ function LoadAction({
 }) {
   const [locale7] = useLocale();
   label ??= locale7.LoadAction.label;
-  keybinds ??= locale7.LoadAction.keybinds;
+  if (keybinds === void 0) {
+    keybinds = locale7.LoadAction.keybinds ?? DEFAULT_LOAD_KEYBINDS;
+  }
   const { load } = useFormLoader({
     decode,
     path,
@@ -5599,7 +5894,7 @@ function LoadAction({
   const formIsLoading = useFormIsLoading();
   const formAppEl = useFormAppElement();
   useKeyboardShortcut(keybinds, () => load(), {
-    enabled: !disabled && !loading && !formIsDisabled && !formIsLoading,
+    disabled: disabled || loading || formIsDisabled || formIsLoading,
     target: formAppEl,
     preventDefault: true
   });
@@ -5613,6 +5908,7 @@ function LoadAction({
       onClick: combineEventHandlers(() => load(), onClick),
       disabled: disabled || formIsDisabled,
       loading: loading || formIsLoading,
+      keybinds,
       children: label
     }
   );
@@ -5769,6 +6065,7 @@ const PathLink = forwardRef(function PathLink2({ to, buildHref = DEFAULT_HREF_BU
     }
   );
 });
+const DEFAULT_PRINT_KEYBINDS = "$mod+P";
 function PrintAction({
   label,
   keybinds,
@@ -5779,7 +6076,9 @@ function PrintAction({
 }) {
   const [locale7] = useLocale();
   label ??= locale7.PrintAction.label;
-  keybinds ??= locale7.PrintAction.keybinds;
+  if (keybinds === void 0) {
+    keybinds = locale7.PrintAction.keybinds ?? DEFAULT_PRINT_KEYBINDS;
+  }
   const printInProgress = usePrintInProgress();
   const formIsDisabled = useFormIsDisabled();
   const formIsLoading = useFormIsLoading();
@@ -5794,7 +6093,7 @@ function PrintAction({
     );
   };
   useKeyboardShortcut(keybinds, handlePrint, {
-    enabled: !disabled && !loading && !formIsDisabled && !formIsLoading && !printInProgress,
+    disabled: disabled || loading || formIsDisabled || formIsLoading || printInProgress,
     target: formAppEl,
     preventDefault: true
   });
@@ -5813,6 +6112,7 @@ function PrintAction({
           ...otherProps,
           loading: loading || printInProgress,
           disabled: disabled || formIsDisabled || formIsLoading,
+          keybinds,
           children: label
         }
       )
@@ -6116,6 +6416,8 @@ function defaultFileName(formTitle, extension) {
   const date = format(/* @__PURE__ */ new Date(), "yyyy-MM-dd");
   return [[formTitle, date].filter(Boolean).join(" "), extension].filter(Boolean).join("");
 }
+const DEFAULT_SAVE_KEYBINDS = "$mod+S";
+const DEFAULT_SAVE_AS_KEYBINDS = "$mod+Shift+S";
 function SaveAction({
   label,
   keybinds,
@@ -6145,10 +6447,14 @@ function SaveAction({
 }) {
   const [locale7] = useLocale();
   label ??= locale7.SaveAction.label;
-  keybinds ??= locale7.SaveAction.keybinds;
+  if (keybinds === void 0) {
+    keybinds = locale7.SaveAction.keybinds ?? DEFAULT_SAVE_KEYBINDS;
+  }
   saveOptionsLabel ??= locale7.SaveAction.saveOptionsLabel;
   saveAsLabel ??= locale7.SaveAction.saveAsLabel;
-  saveAsKeybinds ??= locale7.SaveAction.saveAsKeybinds;
+  if (saveAsKeybinds === void 0) {
+    saveAsKeybinds = locale7.SaveAction.saveAsKeybinds ?? DEFAULT_SAVE_AS_KEYBINDS;
+  }
   const { save, supportsFileSystemAPIs } = useFormSaver({
     path,
     encode,
@@ -6165,14 +6471,14 @@ function SaveAction({
   const formIsSaving = useFormIsSaving();
   const formIsLoading = useFormIsLoading();
   const formAppEl = useFormAppElement();
-  const shortcutsEnabled = !disabled && !loading && !formIsSaving && !formIsLoading;
+  const shortcutsDisabled = disabled || loading || formIsSaving || formIsLoading;
   useKeyboardShortcut(keybinds, () => save({ overwrite: !disableOverwrite }), {
-    enabled: shortcutsEnabled,
+    disabled: shortcutsDisabled,
     target: formAppEl,
     preventDefault: true
   });
   useKeyboardShortcut(saveAsKeybinds, () => save(), {
-    enabled: shortcutsEnabled,
+    disabled: shortcutsDisabled,
     target: formAppEl,
     preventDefault: true
   });
@@ -6190,6 +6496,7 @@ function SaveAction({
       ),
       disabled: disabled || formIsLoading,
       loading: loading || formIsSaving,
+      keybinds,
       children: label
     }
   );
@@ -6214,6 +6521,7 @@ function SaveAction({
           onClick: () => save(),
           disabled: disabled || formIsLoading,
           loading: loading || formIsSaving,
+          keybinds: saveAsKeybinds,
           children: saveAsLabel
         }
       ) })
@@ -6541,6 +6849,7 @@ const SelectMultipleControl = forwardRef(function SelectMultipleControl2({
     inlineIssues
   ] });
 });
+const DEFAULT_SUBMIT_KEYBINDS = "$mod+Enter";
 function SubmitAction({
   onSubmit,
   onInvalidSubmit,
@@ -6579,7 +6888,9 @@ function SubmitAction({
   const prefix = usePrefix();
   const [locale7] = useLocale();
   label ??= locale7.SubmitAction.label;
-  keybinds ??= locale7.SubmitAction.keybinds;
+  if (keybinds === void 0) {
+    keybinds = locale7.SubmitAction.keybinds ?? DEFAULT_SUBMIT_KEYBINDS;
+  }
   dialogTitle ??= locale7.SubmitAction.dialogTitle;
   dialogDescription ??= locale7.SubmitAction.dialogDescription;
   dialogBody ??= locale7.SubmitAction.dialogBody;
@@ -6624,9 +6935,19 @@ function SubmitAction({
       setConfirmingSubmission(false);
     }
   };
-  const handleInvalidSubmit = async (issues, event) => {
-    await startIssuesNavigation({ validate: false });
-    onInvalidSubmit?.(issues, event);
+  const preventCloseAutoFocus = useRef(false);
+  const handleInvalidSubmit = (issues, event) => {
+    preventCloseAutoFocus.current = true;
+    setTimeout(async () => {
+      await startIssuesNavigation({ validate: false });
+      onInvalidSubmit?.(issues, event);
+    });
+  };
+  const handleCloseAutoFocus = (event) => {
+    if (preventCloseAutoFocus.current) {
+      event.preventDefault();
+    }
+    preventCloseAutoFocus.current = false;
   };
   const handleSuccessfulSubmit = (submitResult, event) => {
     const message = typeof successMessage === "function" ? successMessage(submitResult) : successMessage;
@@ -6678,7 +6999,7 @@ function SubmitAction({
     convertExternalIssuesTableRowIndicesToIds
   });
   useKeyboardShortcut(keybinds, handleAction, {
-    enabled: !disabled && !loading && !formIsDisabled && !formIsLoading && !submitting,
+    disabled: disabled || loading || formIsDisabled || formIsLoading || submitting,
     target: formAppEl,
     preventDefault: true
   });
@@ -6694,6 +7015,7 @@ function SubmitAction({
         onClick: combineEventHandlers(handleAction, onClick),
         disabled: disabled || formIsDisabled || formIsLoading,
         loading: loading || submitting,
+        keybinds,
         children: label
       }
     ) }),
@@ -6702,6 +7024,11 @@ function SubmitAction({
       {
         color: "primary",
         ...dialogContentProps,
+        onCloseAutoFocus: combineEventHandlers(
+          dialogContentProps?.onCloseAutoFocus,
+          handleCloseAutoFocus,
+          { checkDefaultPrevented: true }
+        ),
         portalProps: {
           container: formAppEl,
           ...dialogContentProps?.portalProps
@@ -7224,8 +7551,7 @@ function tableControlActionsColumn({
     ...columnOverrides
   };
 }
-const TableControlContent = forwardRef(function TableControlContent2({ containerProps, ...otherProps }, forwardedRef) {
-  const prefix = usePrefix();
+const TableControlContent = forwardRef(function TableControlContent2({ scrollableProps, ...otherProps }, forwardedRef) {
   const { autofocusRef, handleFocus, controller } = useTableControlContext();
   const handleContainerOnBlur = useCallback(() => {
     const { initialized, exists, touched } = controller.getState();
@@ -7241,18 +7567,13 @@ const TableControlContent = forwardRef(function TableControlContent2({ container
       editable: true,
       variant: "control",
       status: printing ? void 0 : displayStatusToControlStatus(deferredDisplayStatus),
-      containerProps: {
-        ...containerProps,
-        className: cx(
-          prefix("table-control__content-container"),
-          containerProps?.className
-        ),
-        onFocus: combineEventHandlers(containerProps?.onFocus, handleFocus),
+      scrollableProps: {
+        onFocus: combineEventHandlers(scrollableProps?.onFocus, handleFocus),
         onBlur: combineEventHandlers(
-          containerProps?.onBlur,
+          scrollableProps?.onBlur,
           handleContainerOnBlur
         ),
-        ref: useCombinedRef(autofocusRef, containerProps?.ref)
+        ref: useCombinedRef(autofocusRef, scrollableProps?.ref)
       },
       ...otherProps,
       ref: forwardedRef
@@ -7430,6 +7751,7 @@ const TopBarActions = forwardRef(function TopBarActions2({ className, ...otherPr
     }
   );
 });
+const DEFAULT_VALIDATE_KEYBINDS = "Alt+Shift+V";
 function ValidateAction({
   label,
   keybinds,
@@ -7440,7 +7762,9 @@ function ValidateAction({
 }) {
   const [locale7] = useLocale();
   label ??= locale7.ValidateAction.label;
-  keybinds ??= locale7.ValidateAction.keybinds;
+  if (keybinds === void 0) {
+    keybinds = locale7.ValidateAction.keybinds ?? DEFAULT_VALIDATE_KEYBINDS;
+  }
   const { validate } = useFormValidator();
   const { validatingAutomatically, validatingManually } = useFormIsValidating();
   const deferredValidatingAutomatically = useDeferredValue(
@@ -7450,7 +7774,7 @@ function ValidateAction({
   const formIsLoading = useFormIsLoading();
   const formAppEl = useFormAppElement();
   useKeyboardShortcut(keybinds, validate, {
-    enabled: !disabled && !loading && !formIsDisabled && !formIsLoading && !validatingManually,
+    disabled: disabled || loading || formIsDisabled || formIsLoading || validatingManually,
     target: formAppEl,
     preventDefault: true
   });
@@ -7465,6 +7789,7 @@ function ValidateAction({
       loading: loading || validatingManually,
       disabled: disabled || formIsDisabled || formIsLoading,
       showSpinner: deferredValidatingAutomatically,
+      keybinds,
       children: label
     }
   );
@@ -7479,6 +7804,17 @@ export {
   CheckboxControl,
   CheckboxGroupControl,
   ControlField,
+  DEFAULT_FIRST_ISSUE_KEYBINDS,
+  DEFAULT_FOCUS_KEYBINDS,
+  DEFAULT_LAST_ISSUE_KEYBINDS,
+  DEFAULT_LOAD_KEYBINDS,
+  DEFAULT_NEXT_ISSUE_KEYBINDS,
+  DEFAULT_PREVIOUS_ISSUE_KEYBINDS,
+  DEFAULT_PRINT_KEYBINDS,
+  DEFAULT_SAVE_AS_KEYBINDS,
+  DEFAULT_SAVE_KEYBINDS,
+  DEFAULT_SUBMIT_KEYBINDS,
+  DEFAULT_VALIDATE_KEYBINDS,
   DateControl,
   DateRangeControl,
   FileControl,