@deque/cauldron-react 7.5.0-canary.7edd719e → 7.5.0-canary.a93c1d1c

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';

package/package.json

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