@deque/cauldron-react 7.4.0 → 7.5.0-canary.792c4b83

package/lib/components/ActionMenu/ActionMenu.d.ts

@@ -13,7 +13,14 @@ interface ActionMenuListProps {
  * (`<li>`) in the documented `TopBar`/`MenuBar` nesting — so the `ref` and
  * spread handlers type against the actual element without casts.
  */
-export type ActionMenuTriggerProps<E extends HTMLElement = HTMLButtonElement> = Pick<React.HTMLAttributes<E>, 'children' | 'id' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'> & {
+export type ActionMenuTriggerProps<E extends HTMLElement = HTMLButtonElement> = Pick<React.HTMLAttributes<E>, 'children' | 'id' | 'onClick' | 'onKeyDown' | 'aria-labelledby' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'> & {
+    /**
+     * Id for the element wrapping the trigger's visible label, e.g.
+     * `<span id={labelId}>Menu</span>`. Only provided with `renderInTrigger`,
+     * where the trigger contains the menu and would otherwise be named after
+     * every item in it. Not a DOM attribute — destructure it out of the props.
+     */
+    labelId?: string;
     ref: React.RefObject<E | null>;
 };
 export type ActionMenuTriggerFunction<E extends HTMLElement = HTMLButtonElement> = (props: ActionMenuTriggerProps<E>, open: boolean) => React.ReactElement;

package/lib/index.js

@@ -1659,7 +1659,11 @@ var DialogContent = function (_a) {
             'text--align-left': align === 'left',
             'text--align-center': align === 'center',
             'text--align-right': align === 'right'
-        }), tabIndex: (context === null || context === void 0 ? void 0 : context.scrollable) ? -1 : undefined }, other), children));
+        }), 
+        // A keyboard user can only scroll this region if it is tabbable (WCAG
+        // 2.1.1). The rule allows that on role="tabpanel" only. See #680.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: (context === null || context === void 0 ? void 0 : context.scrollable) ? 0 : undefined }, other), children));
 };
 DialogContent.displayName = 'DialogContent';
 var DialogFooter = function (_a) {
@@ -3783,6 +3787,20 @@ var Listbox = React.forwardRef(function (_a, ref) {
     var listboxRef = useSharedRef(ref);
     var isControlled = typeof value !== 'undefined';
     var isActiveControlled = typeof controlledActiveOption !== 'undefined';
+    var hasActiveChangeHandler = typeof onActiveChange === 'function';
+    React.useEffect(function () {
+        if (process.env.NODE_ENV !== 'production' &&
+            isActiveControlled &&
+            hasActiveChangeHandler) {
+            console.warn('Listbox received both `activeOption` and `onActiveChange`. Do not ' +
+                'write the option reported by `onActiveChange` back into ' +
+                '`activeOption`: the two copies then race, and a stale downward ' +
+                'sync can revert a newer value and re-render without settling. ' +
+                'Let Listbox own the active option, or use `activeOption` only as ' +
+                'a one-shot request. ' +
+                'See https://github.com/dequelabs/cauldron/issues/2512');
+        }
+    }, [isActiveControlled, hasActiveChangeHandler]);
     React.useLayoutEffect(function () {
         if (!isControlled && selectedOptions.length > 0) {
             return;
@@ -3924,7 +3942,7 @@ var Listbox = React.forwardRef(function (_a, ref) {
             var firstOption = !focusDisabledOptions
                 ? options.find(function (option) { return !isDisabledOption(option); })
                 : options[0];
-            if (firstOption) {
+            if (firstOption && firstOption.element !== (activeOption === null || activeOption === void 0 ? void 0 : activeOption.element)) {
                 setActiveOption(firstOption);
             }
             return;
@@ -3933,7 +3951,7 @@ var Listbox = React.forwardRef(function (_a, ref) {
             var lastOption = !focusDisabledOptions
                 ? tslib.__spreadArray([], tslib.__read(options), false).reverse().find(function (option) { return !isDisabledOption(option); })
                 : options[options.length - 1];
-            if (lastOption) {
+            if (lastOption && lastOption.element !== (activeOption === null || activeOption === void 0 ? void 0 : activeOption.element)) {
                 setActiveOption(lastOption);
             }
             return;
@@ -5154,21 +5172,24 @@ function useMnemonics(_a) {
 
 var ActionList = React.forwardRef(function (_a, ref) {
     var _b = _a.selectionType, selectionType = _b === void 0 ? null : _b, onAction = _a.onAction, className = _a.className, children = _a.children, props = tslib.__rest(_a, ["selectionType", "onAction", "className", "children"]);
-    var activeElement = React.useRef(null);
+    // Listbox owns the active option. ActionList must not mirror it back down
+    // as a controlled prop: the two copies then race, and a downward sync
+    // carrying an already-stale value can revert a newer one and oscillate.
+    // `activeOption` below is only a one-shot mnemonic request, never a
+    // mirror. See cauldron#2512; cauldron#2522 tracks making `activeOption`
+    // properly controlled so this constraint lives in the interface instead.
     var _c = tslib.__read(React.useState(), 2), activeOption = _c[0], setActiveOption = _c[1];
-    var handleActiveChange = React.useCallback(function (value) {
-        activeElement.current = value === null || value === void 0 ? void 0 : value.element;
-        setActiveOption(value);
-    }, []);
     var handleAction = React.useCallback(function (key, event) {
         if (typeof onAction === 'function') {
             onAction(key, event);
         }
     }, [onAction]);
+    // A new object every match, even for the same element: this is a one-shot
+    // request to Listbox rather than a mirror of its state, so re-using the
+    // previous object would leave the controlled prop unchanged and the
+    // request would never reach Listbox.
     var handleMnemonicMatch = React.useCallback(function (element) {
-        setActiveOption(function (prev) {
-            return (prev === null || prev === void 0 ? void 0 : prev.element) === element ? prev : { element: element };
-        });
+        setActiveOption({ element: element });
     }, []);
     var containerRef = useMnemonics({
         onMatch: handleMnemonicMatch,
@@ -5185,7 +5206,7 @@ var ActionList = React.forwardRef(function (_a, ref) {
         /* Listbox comes with an explicit role of "listbox", but we want to either
          * use the role from props, or default to the intrinsic role */
         // eslint-disable-next-line jsx-a11y/aria-role
-        role: undefined, "aria-multiselectable": undefined, className: classNames__default["default"]('ActionList', className), activeOption: activeOption }, props, { onActiveChange: handleActiveChange, navigation: "bound" }),
+        role: undefined, "aria-multiselectable": undefined, className: classNames__default["default"]('ActionList', className), activeOption: activeOption }, props, { navigation: "bound" }),
         React__default["default"].createElement(ActionListProvider, { role: props.role || 'list', onAction: handleAction, selectionType: selectionType }, children)));
 });
 ActionList.displayName = 'ActionList';
@@ -5341,8 +5362,9 @@ var ActionMenuComponent = React.forwardRef(function (_a, ref) {
     var actionMenuRef = useSharedRef(ref);
     var _f = actionMenuList.props, actionListRef = _f.ref, actionListOnAction = _f.onAction;
     var actionMenuListRef = useSharedRef(actionListRef !== null && actionListRef !== void 0 ? actionListRef : null);
-    var _g = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _g[0];
-    var _h = tslib.__read(nextId.useId(1, 'menu'), 1), menuId = _h[0];
+    var _g = tslib.__read(nextId.useId(1, 'menu-label'), 1), labelId = _g[0];
+    var _h = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _h[0];
+    var _j = tslib.__read(nextId.useId(1, 'menu'), 1), menuId = _j[0];
     var handleTriggerClick = React.useCallback(function (event) {
         // istanbul ignore else
         if (!event.defaultPrevented) {
@@ -5411,18 +5433,41 @@ var ActionMenuComponent = React.forwardRef(function (_a, ref) {
             (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [open]);
+    // Triggers predating `labelId` render no label element. Since
+    // `aria-labelledby` is not chained, naming the menu with such a trigger
+    // would resolve back to the menu's own items, so it is left unnamed.
+    var _k = tslib.__read(React.useState(false), 2), hasLabelElement = _k[0], setHasLabelElement = _k[1];
+    React.useEffect(function () {
+        setHasLabelElement(renderInTrigger ? !!document.getElementById(labelId) : false);
+    }, [renderInTrigger, labelId]);
+    React.useEffect(function () {
+        // istanbul ignore next
+        if (renderInTrigger &&
+            !document.getElementById(labelId) &&
+            process.env.NODE_ENV !== 'production') {
+            console.warn("renderInTrigger should render id=\"".concat(labelId, "\" on the element wrapping the trigger's visible label, otherwise the trigger and the menu are named after the entire submenu."));
+        }
+    }, [renderInTrigger, labelId]);
+    var labelledBy = triggerId;
+    if (renderInTrigger) {
+        labelledBy = hasLabelElement ? labelId : undefined;
+    }
     var hidden = renderInTrigger && !open;
     var overlay = (React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ ref: actionMenuRef, role: "presentation", className: classNames__default["default"]('ActionMenu', className), open: open, onOpenChange: setOpen, target: triggerRef, placement: placement, offset: 4, portal: portal, style: tslib.__assign({ display: !open ? 'none' : undefined }, style), "aria-hidden": hidden, onBlur: handleOverlayBlur }, props), React__default["default"].cloneElement(actionMenuList, {
         ref: actionMenuListRef,
         id: menuId,
         role: 'menu',
         onAction: handleAction,
-        'aria-labelledby': triggerId,
+        // aria-labelledby is not chained, so pointing at a trigger that
+        // contains this menu would resolve to the menu's own items.
+        'aria-labelledby': labelledBy,
         focusStrategy: focusStrategy,
         focusDisabledOptions: true,
         hidden: hidden
     })));
-    var triggerProps = React.useMemo(function () {
+    // Spread onto a prerendered trigger element below, so this must stay
+    // DOM-safe: no labelId.
+    var baseTriggerProps = React.useMemo(function () {
         return {
             ref: triggerRef,
             id: triggerId,
@@ -5432,7 +5477,7 @@ var ActionMenuComponent = React.forwardRef(function (_a, ref) {
             'aria-haspopup': 'menu',
             'aria-controls': menuId
         };
-    }, [handleTriggerClick, open, menuId]);
+    }, [handleTriggerClick, handleTriggerKeyDown, open, triggerId, menuId]);
     if (renderInTrigger) {
         // istanbul ignore next
         if (portal && process.env.NODE_ENV !== 'production') {
@@ -5442,11 +5487,14 @@ var ActionMenuComponent = React.forwardRef(function (_a, ref) {
         if (React__default["default"].isValidElement(trigger)) {
             console.warn('renderInTrigger requires the use of a trigger function, rather than a prerendered trigger ReactElement.');
         }
-        triggerProps.children = overlay;
     }
+    // Derived rather than mutated onto the memoized object, so that toggling
+    // `renderInTrigger` off cannot leave a stale `children` behind.
+    var triggerProps = renderInTrigger
+        ? tslib.__assign(tslib.__assign({}, baseTriggerProps), { children: overlay, 'aria-labelledby': labelledBy }) : baseTriggerProps;
     var actionMenuTrigger = React__default["default"].isValidElement(trigger)
         ? React__default["default"].cloneElement(trigger, triggerProps)
-        : trigger(tslib.__assign(tslib.__assign({}, triggerProps), { children: overlay }), open);
+        : trigger(tslib.__assign(tslib.__assign(tslib.__assign({}, triggerProps), { children: overlay }), (renderInTrigger && { labelId: labelId })), open);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false, target: triggerProps.ref }, actionMenuTrigger),
         renderInTrigger ? null : overlay));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "7.4.0",
+  "version": "7.5.0-canary.792c4b83",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",