@mackin.com/styleguide 10.2.1 → 10.2.4

package/index.d.ts

@@ -863,7 +863,7 @@ interface SliderProps<T extends SliderValue> {
     innerTrackClassName?: string;
     /** Styles applied to the floating handle text with using 'showValue'. */
     sliderTextClassName?: string;
-    /** Styles applied to the floating handle text with using 'showValue'. */
+    /** Sets the aria-label value. */
     ariaLabel?: (T extends number ? string : readonly string[] | undefined) | undefined;
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => React__default.JSX.Element;

package/index.esm.js

@@ -497,6 +497,45 @@ const Button = React.forwardRef((props, ref) => {
     return content;
 });
 
+/* Type is not always determinable due to the nature of custom components in typescript. For example OmniLink will not have a type of "a" but rather "OmniLink" so we have to determine
+if the child component is focusable based on certain properties on the control that are found on focusable components */
+const isChildFocusable = (props, type) => {
+    if (props.tabIndex !== undefined && props.tabIndex !== null) {
+        return true;
+    }
+    if (props.onClick !== undefined || props.onValueChange !== undefined) { //button or select
+        return true;
+    }
+    if (props.href || props.cols || props.rows || props.maxLength) {
+        return true;
+    }
+    if ((type === 'button' || type === 'input' || type === 'select' || type === 'textarea') && !props.disabled) {
+        return true;
+    }
+    return false;
+};
+const TabIndexContainer = (props) => {
+    const processElement = (node) => {
+        if (!React__default.isValidElement(node)) {
+            return node;
+        }
+        let updatedNode = node;
+        // Use the props-based logic to check focusability
+        if (isChildFocusable(node.props, node.type)) {
+            updatedNode = React__default.cloneElement(node, { tabIndex: props.tabIndexValue });
+        }
+        // Recursively process children
+        if (updatedNode.props.children) {
+            const clonedChildren = React__default.Children.map(updatedNode.props.children, processElement);
+            updatedNode = React__default.cloneElement(updatedNode, {
+                children: clonedChildren,
+            });
+        }
+        return updatedNode;
+    };
+    return (React__default.createElement(React__default.Fragment, null, React__default.Children.map(props.children, processElement)));
+};
+
 const accordianExpandTimeMs = 250;
 const accordianMaxHeight = 1020;
 const accordianTimingFunction = 'ease-in-out';
@@ -544,7 +583,7 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    return (React.createElement("div", { className: "accordian" },
+    return (React.createElement("div", { className: "accordian", "aria-expanded": open },
         React.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: cx(css({
                 display: 'flex',
                 alignItems: 'center',
@@ -563,7 +602,8 @@ const Accordian = (props) => {
             }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
             React.createElement("span", null, props.header)),
         React.createElement("div", { ref: content, className: cx('accordian__body', contentStyles) },
-            React.createElement("div", { className: expandedContentWrapperStyles }, props.children))));
+            React.createElement("div", { className: expandedContentWrapperStyles },
+                React.createElement(TabIndexContainer, { tabIndexValue: open ? 0 : -1 }, props.children)))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
@@ -969,13 +1009,14 @@ const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "listItemButtonClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
     const theme = useThemeSafely();
     const element = React.useRef(null);
     const input = React.useRef(null);
     const list = React.useRef(null);
+    const [selectedResultIndex, setSelectedResultIndex] = React.useState();
     const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
     const displayOptions = React.useMemo(() => {
         if (!p.allowScroll) {
@@ -994,10 +1035,12 @@ const Autocomplete = (p) => {
             if (direction === -1) {
                 buttonIndex = displayOptions.length - 1;
             }
+            setSelectedResultIndex(buttonIndex);
             return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
         }
         else {
             const nextIndex = fromIndex + direction;
+            setSelectedResultIndex(nextIndex);
             if (nextIndex >= displayOptions.length || nextIndex < 0) {
                 return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
             }
@@ -1021,6 +1064,7 @@ const Autocomplete = (p) => {
     if (p.round || theme.controls.borderRadius) {
         listBorderRadius = theme.controls.borderRadius || '0.5rem';
     }
+    const id = (_b = p.id) !== null && _b !== void 0 ? _b : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
     const onPickValue = (v) => {
         var _a;
         // the TextInput will not respond to outer value changes if it has focus.
@@ -1068,8 +1112,9 @@ const Autocomplete = (p) => {
                         }
                     }
                     (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
-                } })),
-            !!displayOptions.length && (React.createElement(List, { ref: list, className: cx(css({
+                }, "aria-owns": id, "aria-expanded": !!displayOptions.length, "aria-autocomplete": "both", "aria-describedby": `${id}-aria-description` })),
+            React.createElement("span", { id: `${id}-aria-description`, className: css({ display: "none" }) }, "When autocomplete results are available use up and down arrows to review and enter to select."),
+            !!displayOptions.length && (React.createElement(List, { id: id, ref: list, role: "listbox", className: cx(css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1092,7 +1137,7 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     var _a;
-                    return (React.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName },
+                    return (React.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName, role: "option", "aria-selected": selectedResultIndex === listItemIndex },
                         React.createElement(Button, { title: ((_a = p.showOptionTextAsTitle) !== null && _a !== void 0 ? _a : true) ? v : undefined, onKeyDown: e => {
                                 var _a, _b;
                                 if (e.key === 'ArrowDown') {
@@ -1258,15 +1303,18 @@ const useLogger = (componentName, enabled) => {
 const portalId = 'backdrop';
 const BackdropContext = React__default.createContext({
     showing: false,
-    showCount: 0,
     portalId: portalId,
+    children: [],
     setShow: () => {
         /* empty */
     }
 });
+function useBackdropContext() {
+    return useContext(BackdropContext);
+}
 const BackdropContextProvider = (p) => {
     var _a;
-    const [showCount, setShowCount] = useState(0);
+    const [modalChildren, setModalChildren] = useState([]);
     const log = useLogger('BackdropContextProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
     if (p.__debug) {
         useEffect(() => {
@@ -1276,26 +1324,38 @@ const BackdropContextProvider = (p) => {
             };
         }, []);
         useIgnoreMount(() => {
-            log('showCount changed', showCount);
-        }, [showCount]);
+            log('showCount changed', modalChildren);
+        }, [modalChildren]);
     }
     return (React__default.createElement(BackdropContext.Provider, { value: {
             portalId: portalId,
-            showing: showCount > 0,
-            showCount: showCount,
+            showing: modalChildren.length > 0,
+            children: modalChildren.slice(),
             setShow: (show, from) => {
                 if (show) {
-                    setShowCount(s => {
-                        const count = s + 1;
-                        log(`setShow from ${from} ${s} -> ${count}`);
-                        return count;
+                    setModalChildren(previousChildren => {
+                        const newChildren = [...previousChildren, from];
+                        log(`setModalChildren TRUE from ${JSON.stringify(from)}.`);
+                        return newChildren;
                     });
                 }
                 else {
-                    setShowCount(s => {
-                        const count = Math.max(0, s - 1);
-                        log(`setShow from ${from} ${s} -> ${count}`);
-                        return count;
+                    setModalChildren(previousChildren => {
+                        let newChildren;
+                        if (from.key === backdropOverlayKey && !show) {
+                            if (previousChildren.length === 1) {
+                                newChildren = [];
+                            }
+                            else {
+                                newChildren = [...previousChildren];
+                                newChildren.pop();
+                            }
+                        }
+                        else {
+                            newChildren = previousChildren.filter(c => c.key !== from.key);
+                        }
+                        log(`setModalChildren FALSE from ${JSON.stringify(from)}.`);
+                        return newChildren;
                     });
                 }
             }
@@ -1310,9 +1370,10 @@ const BackdropContextProvider = (p) => {
                 margin: 0,
                 zIndex: 9999
             })) },
-            "Backdrop showCount: ",
-            showCount))));
+            "Backdrop children: ",
+            JSON.stringify(modalChildren, null, 4)))));
 };
+const backdropOverlayKey = 'BackdropOverlay';
 const BackdropOverlay = (p) => {
     var _a, _b;
     const context = useContext(BackdropContext);
@@ -1330,15 +1391,25 @@ const BackdropOverlay = (p) => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
     }
+    let zIndex = -1;
+    if (context.showing) {
+        zIndex = theme.zIndexes.backdrop;
+        context.children.forEach(child => {
+            if (child.zIndex > zIndex) {
+                // -1 so it's always directly below the child
+                zIndex = child.zIndex - 1;
+            }
+        });
+    }
     return (React__default.createElement("div", { onClick: () => {
-            context === null || context === void 0 ? void 0 : context.setShow(false, 'BackdropOverlay');
+            context === null || context === void 0 ? void 0 : context.setShow(false, { key: backdropOverlayKey, zIndex });
             log('onClick', 'setShow', false);
         }, id: context === null || context === void 0 ? void 0 : context.portalId, className: css({
             cursor: 'pointer',
             position: 'fixed',
             top: 0, right: 0, bottom: 0, left: 0,
             backgroundColor: theme.colors.backdrop,
-            zIndex: (context === null || context === void 0 ? void 0 : context.showing) ? theme.zIndexes.backdrop : -1,
+            zIndex,
             visibility: (context === null || context === void 0 ? void 0 : context.showing) ? 'visible' : 'hidden',
             opacity: (context === null || context === void 0 ? void 0 : context.showing) ? 1 : 0,
             transition: `opacity ${showTimeMs}ms ease-in-out`,
@@ -1582,7 +1653,7 @@ const useScrollbarSize = (recalc) => {
 
 const Modal = (p) => {
     var _a, _b, _c, _d;
-    const backdrop = useContext(BackdropContext);
+    const backdrop = useBackdropContext();
     const mouseDownElement = useRef(undefined);
     const theme = useThemeSafely();
     const hasHeader = p.closeButton || p.heading;
@@ -1623,13 +1694,14 @@ const Modal = (p) => {
             });
         }
     };
+    const zIndex = theme.zIndexes.modal;
     useEffect(() => {
         log('mounted');
         return () => {
             var _a;
             if (showing.current) {
                 log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
-                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+                backdrop.setShow(false, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
                 log('backdrop.setShow', false);
                 tryRemoveScrollStyles();
             }
@@ -1642,7 +1714,7 @@ const Modal = (p) => {
     useBooleanChanged((show, previousShow) => {
         var _a;
         log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
-        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        backdrop.setShow(show, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
         showing.current = show;
         log('backdrop.setShow', show);
         if (show) {
@@ -1670,7 +1742,7 @@ const Modal = (p) => {
     const modalBodyStyles = css({
         maxHeight: p.scrollable ? undefined : '99vh',
         overflow: 'hidden',
-        zIndex: theme.zIndexes.modal,
+        zIndex,
         cursor: 'default',
         margin: '1rem',
         backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
@@ -2722,7 +2794,7 @@ const Nav = (props) => {
     const theme = useThemeSafely();
     const navWidth = (_a = props.navWidth) !== null && _a !== void 0 ? _a : theme.layout.navWidth;
     const totalNavOffset = `calc(${navWidth} + 20px)`;
-    const backdrop = React.useContext(BackdropContext);
+    const backdrop = useBackdropContext();
     const log = useLogger(`Nav ${(_b = props.id) !== null && _b !== void 0 ? _b : '?'}`, (_c = props.__debug) !== null && _c !== void 0 ? _c : false);
     const slideMs = (_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs;
     const slideRight = keyframes `
@@ -2749,6 +2821,7 @@ const Nav = (props) => {
     const classNavNotShowing = css `
 		animation: ${slideLeft} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
+    const zIndex = theme.zIndexes.nav;
     // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
     const navStyles = css `
 		label: Nav;
@@ -2761,7 +2834,7 @@ const Nav = (props) => {
 		width: ${navWidth};
 		min-width: ${navWidth};
 		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
-		z-index: ${theme.zIndexes.nav};
+		z-index: ${zIndex};
 		overflow-y: auto;
 		.omniLink, .omniLink:active, .omniLink:focus, .omniLink:visited {
 			color: ${theme.colors.navFont};
@@ -2776,7 +2849,7 @@ const Nav = (props) => {
     useBooleanChanged((current, previous) => {
         var _a;
         log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
-        backdrop.setShow(current, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
+        backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
     }, props.show);
     React.useLayoutEffect(() => {
         if (nav && nav.current) {
@@ -4016,7 +4089,7 @@ const TabHeader = (p) => {
                 buttonContent = tab.name;
             }
             return (React.createElement("li", { key: index, className: cx(tabStyles, p.tabClassName) },
-                React.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                React.createElement(Button, { "aria-role": "tab", "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
                         const onChange = () => {
                             var _a;
                             setTabIndex(index);

package/index.js

@@ -515,6 +515,45 @@ const Button = React__namespace.forwardRef((props, ref) => {
     return content;
 });
 
+/* Type is not always determinable due to the nature of custom components in typescript. For example OmniLink will not have a type of "a" but rather "OmniLink" so we have to determine
+if the child component is focusable based on certain properties on the control that are found on focusable components */
+const isChildFocusable = (props, type) => {
+    if (props.tabIndex !== undefined && props.tabIndex !== null) {
+        return true;
+    }
+    if (props.onClick !== undefined || props.onValueChange !== undefined) { //button or select
+        return true;
+    }
+    if (props.href || props.cols || props.rows || props.maxLength) {
+        return true;
+    }
+    if ((type === 'button' || type === 'input' || type === 'select' || type === 'textarea') && !props.disabled) {
+        return true;
+    }
+    return false;
+};
+const TabIndexContainer = (props) => {
+    const processElement = (node) => {
+        if (!React.isValidElement(node)) {
+            return node;
+        }
+        let updatedNode = node;
+        // Use the props-based logic to check focusability
+        if (isChildFocusable(node.props, node.type)) {
+            updatedNode = React.cloneElement(node, { tabIndex: props.tabIndexValue });
+        }
+        // Recursively process children
+        if (updatedNode.props.children) {
+            const clonedChildren = React.Children.map(updatedNode.props.children, processElement);
+            updatedNode = React.cloneElement(updatedNode, {
+                children: clonedChildren,
+            });
+        }
+        return updatedNode;
+    };
+    return (React.createElement(React.Fragment, null, React.Children.map(props.children, processElement)));
+};
+
 const accordianExpandTimeMs = 250;
 const accordianMaxHeight = 1020;
 const accordianTimingFunction = 'ease-in-out';
@@ -562,7 +601,7 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    return (React__namespace.createElement("div", { className: "accordian" },
+    return (React__namespace.createElement("div", { className: "accordian", "aria-expanded": open },
         React__namespace.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
                 display: 'flex',
                 alignItems: 'center',
@@ -581,7 +620,8 @@ const Accordian = (props) => {
             }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
             React__namespace.createElement("span", null, props.header)),
         React__namespace.createElement("div", { ref: content, className: css.cx('accordian__body', contentStyles) },
-            React__namespace.createElement("div", { className: expandedContentWrapperStyles }, props.children))));
+            React__namespace.createElement("div", { className: expandedContentWrapperStyles },
+                React__namespace.createElement(TabIndexContainer, { tabIndexValue: open ? 0 : -1 }, props.children)))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
@@ -987,13 +1027,14 @@ const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "listItemButtonClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
     const theme = useThemeSafely();
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
     const list = React__namespace.useRef(null);
+    const [selectedResultIndex, setSelectedResultIndex] = React__namespace.useState();
     const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
     const displayOptions = React__namespace.useMemo(() => {
         if (!p.allowScroll) {
@@ -1012,10 +1053,12 @@ const Autocomplete = (p) => {
             if (direction === -1) {
                 buttonIndex = displayOptions.length - 1;
             }
+            setSelectedResultIndex(buttonIndex);
             return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
         }
         else {
             const nextIndex = fromIndex + direction;
+            setSelectedResultIndex(nextIndex);
             if (nextIndex >= displayOptions.length || nextIndex < 0) {
                 return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
             }
@@ -1039,6 +1082,7 @@ const Autocomplete = (p) => {
     if (p.round || theme.controls.borderRadius) {
         listBorderRadius = theme.controls.borderRadius || '0.5rem';
     }
+    const id = (_b = p.id) !== null && _b !== void 0 ? _b : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
     const onPickValue = (v) => {
         var _a;
         // the TextInput will not respond to outer value changes if it has focus.
@@ -1086,8 +1130,9 @@ const Autocomplete = (p) => {
                         }
                     }
                     (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
-                } })),
-            !!displayOptions.length && (React__namespace.createElement(List, { ref: list, className: css.cx(css.css({
+                }, "aria-owns": id, "aria-expanded": !!displayOptions.length, "aria-autocomplete": "both", "aria-describedby": `${id}-aria-description` })),
+            React__namespace.createElement("span", { id: `${id}-aria-description`, className: css.css({ display: "none" }) }, "When autocomplete results are available use up and down arrows to review and enter to select."),
+            !!displayOptions.length && (React__namespace.createElement(List, { id: id, ref: list, role: "listbox", className: css.cx(css.css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1110,7 +1155,7 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     var _a;
-                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName },
+                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName, role: "option", "aria-selected": selectedResultIndex === listItemIndex },
                         React__namespace.createElement(Button, { title: ((_a = p.showOptionTextAsTitle) !== null && _a !== void 0 ? _a : true) ? v : undefined, onKeyDown: e => {
                                 var _a, _b;
                                 if (e.key === 'ArrowDown') {
@@ -1276,15 +1321,18 @@ const useLogger = (componentName, enabled) => {
 const portalId = 'backdrop';
 const BackdropContext = React.createContext({
     showing: false,
-    showCount: 0,
     portalId: portalId,
+    children: [],
     setShow: () => {
         /* empty */
     }
 });
+function useBackdropContext() {
+    return React.useContext(BackdropContext);
+}
 const BackdropContextProvider = (p) => {
     var _a;
-    const [showCount, setShowCount] = React.useState(0);
+    const [modalChildren, setModalChildren] = React.useState([]);
     const log = useLogger('BackdropContextProvider', (_a = p.__debug) !== null && _a !== void 0 ? _a : false);
     if (p.__debug) {
         React.useEffect(() => {
@@ -1294,26 +1342,38 @@ const BackdropContextProvider = (p) => {
             };
         }, []);
         useIgnoreMount(() => {
-            log('showCount changed', showCount);
-        }, [showCount]);
+            log('showCount changed', modalChildren);
+        }, [modalChildren]);
     }
     return (React.createElement(BackdropContext.Provider, { value: {
             portalId: portalId,
-            showing: showCount > 0,
-            showCount: showCount,
+            showing: modalChildren.length > 0,
+            children: modalChildren.slice(),
             setShow: (show, from) => {
                 if (show) {
-                    setShowCount(s => {
-                        const count = s + 1;
-                        log(`setShow from ${from} ${s} -> ${count}`);
-                        return count;
+                    setModalChildren(previousChildren => {
+                        const newChildren = [...previousChildren, from];
+                        log(`setModalChildren TRUE from ${JSON.stringify(from)}.`);
+                        return newChildren;
                     });
                 }
                 else {
-                    setShowCount(s => {
-                        const count = Math.max(0, s - 1);
-                        log(`setShow from ${from} ${s} -> ${count}`);
-                        return count;
+                    setModalChildren(previousChildren => {
+                        let newChildren;
+                        if (from.key === backdropOverlayKey && !show) {
+                            if (previousChildren.length === 1) {
+                                newChildren = [];
+                            }
+                            else {
+                                newChildren = [...previousChildren];
+                                newChildren.pop();
+                            }
+                        }
+                        else {
+                            newChildren = previousChildren.filter(c => c.key !== from.key);
+                        }
+                        log(`setModalChildren FALSE from ${JSON.stringify(from)}.`);
+                        return newChildren;
                     });
                 }
             }
@@ -1328,9 +1388,10 @@ const BackdropContextProvider = (p) => {
                 margin: 0,
                 zIndex: 9999
             })) },
-            "Backdrop showCount: ",
-            showCount))));
+            "Backdrop children: ",
+            JSON.stringify(modalChildren, null, 4)))));
 };
+const backdropOverlayKey = 'BackdropOverlay';
 const BackdropOverlay = (p) => {
     var _a, _b;
     const context = React.useContext(BackdropContext);
@@ -1348,15 +1409,25 @@ const BackdropOverlay = (p) => {
             log('context.showing changed', context.showing);
         }, [context.showing]);
     }
+    let zIndex = -1;
+    if (context.showing) {
+        zIndex = theme.zIndexes.backdrop;
+        context.children.forEach(child => {
+            if (child.zIndex > zIndex) {
+                // -1 so it's always directly below the child
+                zIndex = child.zIndex - 1;
+            }
+        });
+    }
     return (React.createElement("div", { onClick: () => {
-            context === null || context === void 0 ? void 0 : context.setShow(false, 'BackdropOverlay');
+            context === null || context === void 0 ? void 0 : context.setShow(false, { key: backdropOverlayKey, zIndex });
             log('onClick', 'setShow', false);
         }, id: context === null || context === void 0 ? void 0 : context.portalId, className: css.css({
             cursor: 'pointer',
             position: 'fixed',
             top: 0, right: 0, bottom: 0, left: 0,
             backgroundColor: theme.colors.backdrop,
-            zIndex: (context === null || context === void 0 ? void 0 : context.showing) ? theme.zIndexes.backdrop : -1,
+            zIndex,
             visibility: (context === null || context === void 0 ? void 0 : context.showing) ? 'visible' : 'hidden',
             opacity: (context === null || context === void 0 ? void 0 : context.showing) ? 1 : 0,
             transition: `opacity ${showTimeMs}ms ease-in-out`,
@@ -1600,7 +1671,7 @@ const useScrollbarSize = (recalc) => {
 
 const Modal = (p) => {
     var _a, _b, _c, _d;
-    const backdrop = React.useContext(BackdropContext);
+    const backdrop = useBackdropContext();
     const mouseDownElement = React.useRef(undefined);
     const theme = useThemeSafely();
     const hasHeader = p.closeButton || p.heading;
@@ -1641,13 +1712,14 @@ const Modal = (p) => {
             });
         }
     };
+    const zIndex = theme.zIndexes.modal;
     React.useEffect(() => {
         log('mounted');
         return () => {
             var _a;
             if (showing.current) {
                 log(`un-mount in progress and this modal is showing.  decrement the backdrop and try to remove singleton body styles.`);
-                backdrop.setShow(false, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+                backdrop.setShow(false, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
                 log('backdrop.setShow', false);
                 tryRemoveScrollStyles();
             }
@@ -1660,7 +1732,7 @@ const Modal = (p) => {
     useBooleanChanged((show, previousShow) => {
         var _a;
         log('show changed', `${previousShow !== null && previousShow !== void 0 ? previousShow : 'undefined'} > ${show}`);
-        backdrop.setShow(show, (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal');
+        backdrop.setShow(show, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
         showing.current = show;
         log('backdrop.setShow', show);
         if (show) {
@@ -1688,7 +1760,7 @@ const Modal = (p) => {
     const modalBodyStyles = css.css({
         maxHeight: p.scrollable ? undefined : '99vh',
         overflow: 'hidden',
-        zIndex: theme.zIndexes.modal,
+        zIndex,
         cursor: 'default',
         margin: '1rem',
         backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
@@ -2740,7 +2812,7 @@ const Nav = (props) => {
     const theme = useThemeSafely();
     const navWidth = (_a = props.navWidth) !== null && _a !== void 0 ? _a : theme.layout.navWidth;
     const totalNavOffset = `calc(${navWidth} + 20px)`;
-    const backdrop = React__namespace.useContext(BackdropContext);
+    const backdrop = useBackdropContext();
     const log = useLogger(`Nav ${(_b = props.id) !== null && _b !== void 0 ? _b : '?'}`, (_c = props.__debug) !== null && _c !== void 0 ? _c : false);
     const slideMs = (_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs;
     const slideRight = css.keyframes `
@@ -2767,6 +2839,7 @@ const Nav = (props) => {
     const classNavNotShowing = css.css `
 		animation: ${slideLeft} ${slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
+    const zIndex = theme.zIndexes.nav;
     // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
     const navStyles = css.css `
 		label: Nav;
@@ -2779,7 +2852,7 @@ const Nav = (props) => {
 		width: ${navWidth};
 		min-width: ${navWidth};
 		box-shadow: 4px 2px 12px 6px rgba(0, 0, 0, 0.2);
-		z-index: ${theme.zIndexes.nav};
+		z-index: ${zIndex};
 		overflow-y: auto;
 		.omniLink, .omniLink:active, .omniLink:focus, .omniLink:visited {
 			color: ${theme.colors.navFont};
@@ -2794,7 +2867,7 @@ const Nav = (props) => {
     useBooleanChanged((current, previous) => {
         var _a;
         log('show changed', `${previous !== null && previous !== void 0 ? previous : 'undefined'} > ${current}`);
-        backdrop.setShow(current, (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav');
+        backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
     }, props.show);
     React__namespace.useLayoutEffect(() => {
         if (nav && nav.current) {
@@ -4034,7 +4107,7 @@ const TabHeader = (p) => {
                 buttonContent = tab.name;
             }
             return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
-                React__namespace.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                React__namespace.createElement(Button, { "aria-role": "tab", "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
                         const onChange = () => {
                             var _a;
                             setTabIndex(index);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "10.2.1",
+    "version": "10.2.4",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",