@deque/cauldron-react 7.4.0 → 7.5.0-canary.b12b7518

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) {
@@ -5341,8 +5345,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 +5416,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 +5460,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 +5470,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.b12b7518",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",