@mackin.com/styleguide 11.0.1 → 11.0.3

package/index.d.ts

@@ -151,6 +151,7 @@ interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttr
 declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
 
 interface ConfirmModalProps {
+    id: string;
     show: boolean;
     text: string;
     header: string;
@@ -160,7 +161,6 @@ interface ConfirmModalProps {
     cancelText?: string;
     className?: string;
     variant?: 'omg';
-    id?: string;
     __debug?: boolean;
 }
 declare const ConfirmModal: (props: ConfirmModalProps) => React.JSX.Element;
@@ -176,9 +176,9 @@ declare const Divider: (p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHREl
 declare const ErrorModal: (props: {
     message: string;
     show: boolean;
-    id?: string;
+    id: string;
     __debug?: boolean;
-    close: () => void;
+    onClose: () => void;
 }) => React.JSX.Element;
 
 interface FileUploaderProps {
@@ -293,18 +293,18 @@ interface InfoTipProps {
     bgColor?: string;
     /** Defaults to nav font color. */
     fontColor?: string;
-    /** For variant=modal only. */
-    modalHeader?: string;
-    /** For variant=modal only. */
-    modalId?: string;
-    /** For variant=modal only. */
-    __modalDebug?: boolean;
+    /** For variant=modal only. The InfoTip will not render if `variant=modal` and this is missing. */
+    modalProps?: {
+        heading: string;
+        id: string;
+        __debug?: boolean;
+    };
     /** Whether to move the popover on collision with the parent's bounds.  Default is false.  For variant=info only. */
     reposition?: boolean;
     /** Order of positions as the Popover colides with the window edge.  The default order is ['right', 'top', 'left', 'bottom'].  For variant=info only. */
     positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
 }
-declare const InfoTip: (props: InfoTipProps) => React.JSX.Element;
+declare const InfoTip: (props: InfoTipProps) => React.JSX.Element | null;
 
 interface BaseInputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     rightControl?: JSX.Element;
@@ -403,30 +403,34 @@ interface ListItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<H
 declare const ListItem: (props: ListItemProps) => React.JSX.Element;
 
 interface ModalProps {
+    /** Required for various ARIA support choices. */
+    id: string;
     show: boolean;
     children: React__default.ReactNode;
+    heading: string;
     /** Defaults to theme.breakpoints.tablet. */
     maxWidth?: string;
     minWidth?: string;
-    /** Will not apply a background color to the modal body. */
-    noBackground?: boolean;
-    closeButton?: boolean;
-    heading?: string;
     /** Use to override default heading styling. */
     headerClassName?: string;
-    /** Selector of the element to focus on initial show. */
+    /** Selector of the element to focus on initial show. Will default to the close button. */
     focusSelector?: string;
     scrollable?: boolean;
-    id?: string;
     /** Applied to the modal body. */
     className?: string;
     __debug?: boolean;
-    onClick?: () => void;
+    /** Only used for the `WaitingIndicator`. This will break accessiblity so do not use. */
+    __noHeader?: boolean;
+    onClose: () => void;
 }
 declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
 
 declare const Nav: (props: {
     show: boolean;
+    /** Required for ARIA. The element to focus when first opened. */
+    focusSelector: string;
+    /** Required for ARIA. Description of the `Nav` purpose. */
+    ariaLabel: string;
     toggle: (show: boolean) => void;
     id?: string;
     children?: React.ReactNode;
@@ -882,8 +886,12 @@ interface TabHeaderTabProps {
     title?: string;
 }
 interface TabHeaderProps {
+    /** Required for generating element IDs for ARIA. */
+    id: string;
     tabs: TabHeaderTabProps[];
-    id?: string;
+    ariaLabel: string;
+    /** The ID of the content panel with `role=tabpanel` this header is associated with. */
+    ariaControlsId: string;
     /** Defaults to 10rem. */
     maxTabWidth?: string;
     /** Defaults to 'tab'. */
@@ -952,6 +960,7 @@ declare const TabLocker: (props: {
     disabled?: boolean;
     children?: React.ReactNode;
     style?: React.CSSProperties;
+    className?: string;
 }) => React.JSX.Element;
 
 type SupportedTags = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'span' | 'div';
@@ -977,11 +986,13 @@ interface TextProps {
     /** Will remove all margin/padding from specified tag */
     noPad?: boolean;
     leftPad?: string;
+    id?: string;
 }
 /** Wraps common needs for displaying text.  Use for all text-containing elements to save on duplicated styling.  */
 declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
     style: React.CSSProperties;
     className: string;
+    id: string | undefined;
 }, HTMLElement>;
 
 type BaseProps = Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value'> & InputOnFocusProps;
@@ -1103,13 +1114,15 @@ interface ThemeRendererProps extends MackinTheme {
 declare const ThemeRenderer: (p: ThemeRendererProps) => React.JSX.Element;
 
 interface TabContainerProps {
+    /** Required for generating element IDs for ARIA. */
+    id: string;
+    ariaLabel: string;
     tabs: {
         name: string | JSX.Element;
         /** The HTML title of the tab button.  Defaults to 'name' prop. */
         title?: string;
         getContent: () => JSX.Element;
     }[];
-    id?: string;
     /** Defaults to 10rem. */
     maxTabWidth?: string;
     /** Defaults to 'tab'. */

package/index.esm.js

@@ -288,7 +288,8 @@ const Text = (props) => {
     });
     return React.createElement(tagChoice, {
         style: style,
-        className: cx('text', styles, props.className)
+        className: cx('text', styles, props.className),
+        id: props.id
     }, props.children);
 };
 
@@ -949,7 +950,7 @@ const ListItem = (props) => {
 
 const TabLocker = (props) => {
     const tabLocker = React.useRef(null);
-    return (React.createElement("div", { className: "tabLocker", style: props.style, ref: tabLocker, onKeyDown: e => {
+    return (React.createElement("div", { className: cx('tabLocker', props.className), style: props.style, ref: tabLocker, onKeyDown: e => {
             var _a, _b;
             if (props.disabled) {
                 return;
@@ -1579,7 +1580,7 @@ const Checkbox = (props) => {
 		`}
 	`;
     const iconStyles = css `
-		${!!label && `
+		${!!label && !hideLabel && `
 			margin-right: 0.5rem;
 		`}
 		${props.disabled && `
@@ -1662,7 +1663,7 @@ const Modal = (p) => {
     const backdrop = useBackdropContext();
     const mouseDownElement = useRef(undefined);
     const theme = useThemeSafely();
-    const hasHeader = p.closeButton || p.heading;
+    const hasHeader = !p.__noHeader;
     const contentRef = React__default.useRef(null);
     const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
     const showing = useRef(p.show);
@@ -1701,10 +1702,22 @@ const Modal = (p) => {
         }
     };
     const zIndex = theme.zIndexes.modal;
+    const { getText, language } = useLocalization();
+    const closeText = React__default.useMemo(() => {
+        return getText('Close');
+    }, [language]);
     useEffect(() => {
         log('mounted');
+        const escapeRemover = createBodyEscapeHandler(() => {
+            if (showing.current) {
+                p.onClose();
+            }
+        });
+        log('body escape handler created');
         return () => {
             var _a;
+            escapeRemover();
+            log('body escape handler removed');
             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, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
@@ -1751,9 +1764,9 @@ const Modal = (p) => {
         zIndex,
         cursor: 'default',
         margin: '1rem',
-        backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
-        border: p.noBackground ? undefined : theme.controls.border,
-        boxShadow: p.noBackground ? undefined : theme.controls.boxShadow,
+        backgroundColor: !hasHeader ? undefined : theme.colors.modalBg,
+        border: !hasHeader ? undefined : theme.controls.border,
+        boxShadow: !hasHeader ? undefined : theme.controls.boxShadow,
         maxWidth: (_c = p.maxWidth) !== null && _c !== void 0 ? _c : theme.breakpoints.tablet,
         minWidth: (_d = p.minWidth) !== null && _d !== void 0 ? _d : (hasHeader ? '250px' : undefined),
         opacity: p.show ? 1 : 0,
@@ -1780,26 +1793,30 @@ const Modal = (p) => {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            cursor: p.onClick ? 'pointer' : 'default'
+            cursor: 'pointer'
         }, p.scrollable && {
             overflowY: 'auto',
             overflowX: 'hidden',
             alignItems: 'flex-start'
         }]);
+    const ariaLabelId = `${p.id}_label`;
     if (p.show) {
         const backdropContainer = document.getElementById(backdrop.portalId);
         if (backdropContainer) {
-            return createPortal((React__default.createElement("div", { onClick: e => {
+            return createPortal((React__default.createElement("div", { id: p.id, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, onClick: e => {
                     e.stopPropagation();
                     if (!mouseDownElement.current) {
-                        if (p.onClick) {
-                            log('backdropContainer onClick');
-                            p.onClick();
-                        }
+                        log('backdropContainer onClick');
+                        p.onClose();
                     }
                     mouseDownElement.current = undefined;
+                }, onKeyDown: e => {
+                    if (e.code === 'Escape') {
+                        e.stopPropagation();
+                        p.onClose();
+                    }
                 }, className: cx('modalContainer', modalContainerStyles) },
-                React__default.createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
+                React__default.createElement("div", { ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
                         mouseDownElement.current = e.target;
                         e.stopPropagation();
                     }, onMouseUp: () => {
@@ -1813,21 +1830,35 @@ const Modal = (p) => {
                     }, className: cx('modalBody', modalBodyStyles, p.className) },
                     React__default.createElement(TabLocker, null,
                         hasHeader && (React__default.createElement("header", { className: cx('modalHeader', modalHeaderStyles) },
-                            p.heading ? React__default.createElement(Text, { className: css({
+                            React__default.createElement(Text, { id: ariaLabelId, className: css({
                                     margin: 0,
                                     flexGrow: 1
-                                }), tag: "h1", bold: true }, p.heading) : React__default.createElement("span", null),
-                            p.closeButton && p.onClick ? React__default.createElement(Button, { className: cx('modalCloseButton', css({
+                                }), tag: "h1", bold: true }, p.heading),
+                            React__default.createElement(Button, { className: cx('modalCloseButton', css({
                                     color: theme.colors.headerFont,
                                     marginLeft: '1rem',
                                     backgroundColor: 'transparent'
-                                })), "aria-label": "Close", variant: "icon", onClick: p.onClick },
-                                React__default.createElement(Icon, { id: "close" })) : React__default.createElement("span", null))),
+                                })), "aria-label": closeText, variant: "icon", onClick: e => {
+                                    e.stopPropagation();
+                                    p.onClose();
+                                } },
+                                React__default.createElement(Icon, { id: "close" })))),
                         p.children)))), backdropContainer);
         }
     }
     return null;
 };
+function createBodyEscapeHandler(onEscape) {
+    const handler = (e) => {
+        if (e.code === 'Escape') {
+            onEscape();
+        }
+    };
+    document.addEventListener('keydown', handler);
+    return () => {
+        document.removeEventListener('keydown', handler);
+    };
+}
 
 const ConfirmModal = (props) => {
     const theme = useThemeSafely();
@@ -1845,7 +1876,7 @@ const ConfirmModal = (props) => {
         const cancelText = props.cancelText || getText('Cancel');
         return { confirmText, cancelText };
     }, [language, props.confirmText, props.cancelText]);
-    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
+    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('confirmModal', modalStyle, props.className), heading: props.header, show: props.show, onClose: props.onCancel },
         React.createElement("div", { className: css({ padding: '1rem' }) },
             React.createElement(Text, { align: "center" }, props.text),
             React.createElement("div", { className: css({ textAlign: 'center' }) },
@@ -1909,7 +1940,7 @@ const ErrorModal = (props) => {
 			color:  ${theme.colors.omgFont};
 		}
 	`;
-    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('errorModal', modalStyles), heading: heading, closeButton: true, show: props.show, onClick: props.close },
+    return (React.createElement(Modal, { id: props.id, __debug: props.__debug, className: cx('errorModal', modalStyles), heading: heading, show: props.show, onClose: props.onClose },
         React.createElement("div", { className: css({ padding: '1rem' }) },
             React.createElement(Text, { align: "center" }, message))));
 };
@@ -2381,6 +2412,10 @@ const InfoTip = (props) => {
     var _a, _b, _c;
     const [showTip, setShowTip] = React.useState(false);
     const theme = useThemeSafely();
+    if (props.variant === 'modal' && !props.modalProps) {
+        console.warn(`InfoTip with variant=modal requires modalProps.`);
+        return null;
+    }
     const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
     const fontColor = (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.navFont;
     const onClick = () => {
@@ -2437,12 +2472,12 @@ const InfoTip = (props) => {
 		display:inline-block;
 	`;
     const button = React.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, "i");
-    if (props.variant === 'modal') {
+    if (props.variant === 'modal' && props.modalProps) {
         return (React.createElement(React.Fragment, null,
             button,
-            React.createElement(Modal, { id: props.modalId, __debug: props.__modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css({
+            React.createElement(Modal, { id: props.modalProps.id, __debug: props.modalProps.__debug, show: showTip, heading: props.modalProps.heading, onClose: closeTip, className: css({
                     whiteSpace: 'normal'
-                }), closeButton: true },
+                }) },
                 React.createElement("div", { className: css({ padding: '1rem' }) }, props.content))));
     }
     else {
@@ -2862,6 +2897,10 @@ const Nav = (props) => {
             if (props.show) {
                 if (!nav.current.classList.contains(classNavShowing)) {
                     nav.current.classList.add(classNavShowing);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = document.querySelector(props.focusSelector)) === null || _a === void 0 ? void 0 : _a.focus();
+                    }, slideMs + 1);
                 }
             }
             else {
@@ -2877,7 +2916,12 @@ const Nav = (props) => {
             }
         }
     });
-    return (React.createElement("nav", { ref: nav, className: cx('nav', navStyles, props.className) }, props.children));
+    return (React.createElement("nav", { role: "dialog", "aria-modal": "true", "aria-label": props.ariaLabel, ref: nav, className: cx('nav', navStyles, props.className), onKeyDown: e => {
+            if (e.code === 'Escape') {
+                props.toggle(false);
+            }
+        } },
+        React.createElement(TabLocker, { className: css({ height: '100%' }) }, props.children)));
 };
 
 const LinkContent = (props) => {
@@ -4048,8 +4092,37 @@ const TabHeader = (p) => {
         borderBottom: theme.controls.border,
         paddingBottom: '1rem'
     });
+    function onTabSelect(index, tabId, focusAfter) {
+        const onChange = () => {
+            var _a;
+            setTabIndex(index);
+            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
+            if (focusAfter) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = document.getElementById(tabId)) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }
+        };
+        if (p.onBeforeTabChanged) {
+            setTabsChanging(true);
+            p.onBeforeTabChanged(index)
+                .then(() => {
+                onChange();
+            })
+                .catch(() => {
+                /* do nothing */
+            })
+                .finally(() => {
+                setTabsChanging(false);
+            });
+        }
+        else {
+            onChange();
+        }
+    }
     return (React.createElement("div", { className: "tabHeader" },
-        React.createElement("ul", { className: cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
+        React.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
             var _a, _b;
             const active = index === tabIndex;
             let tabStyles;
@@ -4093,28 +4166,31 @@ const TabHeader = (p) => {
             else {
                 buttonContent = tab.name;
             }
+            const tabId = getTabHeaderTabId(p.id, index);
             return (React.createElement("li", { key: index, className: cx(tabStyles, p.tabClassName) },
-                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);
-                            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
-                        };
-                        if (p.onBeforeTabChanged) {
-                            setTabsChanging(true);
-                            p.onBeforeTabChanged(index)
-                                .then(() => {
-                                onChange();
-                            })
-                                .catch(() => {
-                                /* do nothing */
-                            })
-                                .finally(() => {
-                                setTabsChanging(false);
-                            });
+                React.createElement(Button, { id: tabId, tabIndex: active ? 0 : -1, role: "tab", "aria-controls": p.ariaControlsId, "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                        onTabSelect(index, tabId, false);
+                    }, onKeyDown: e => {
+                        e.stopPropagation();
+                        let newIndex = index;
+                        if (e.code === 'ArrowLeft') {
+                            if (index === 0) {
+                                newIndex = p.tabs.length - 1;
+                            }
+                            else {
+                                newIndex = index - 1;
+                            }
                         }
-                        else {
-                            onChange();
+                        else if (e.code === 'ArrowRight') {
+                            if (index === p.tabs.length - 1) {
+                                newIndex = 0;
+                            }
+                            else {
+                                newIndex = index + 1;
+                            }
+                        }
+                        if (newIndex !== index) {
+                            onTabSelect(newIndex, getTabHeaderTabId(p.id, newIndex), true);
                         }
                     } }, buttonContent)));
         })),
@@ -4126,6 +4202,9 @@ const TabHeader = (p) => {
                 position: 'relative'
             }), p.tabHeaderDividerClassName) }))));
 };
+function getTabHeaderTabId(tabHeaderId, tabIndex) {
+    return `${tabHeaderId}_tab_${tabIndex}`;
+}
 
 const Table = (props) => {
     const theme = useThemeSafely();
@@ -4430,7 +4509,7 @@ const TogglePasswordInput = React.forwardRef((props, ref) => {
 });
 
 const WaitingIndicator = (p) => {
-    var _a, _b;
+    var _a, _b, _c;
     const [show, setShow] = useState(p.show);
     const hideTimer = useRef(0);
     const lastShowStatus = useRef(false);
@@ -4482,7 +4561,10 @@ const WaitingIndicator = (p) => {
             }
         }
     }, [p.show]);
-    return (React__default.createElement(Modal, { id: p.id, __debug: p.__debug, className: "waitingIndicator", show: show, noBackground: true },
+    const id = (_c = p.id) !== null && _c !== void 0 ? _c : 'WaitingIndicator';
+    return (React__default.createElement(Modal, { id: id, __debug: p.__debug, __noHeader: true, heading: '', onClose: () => {
+            /* noop */
+        }, className: "waitingIndicator", show: show },
         React__default.createElement("div", { className: css({
                 color: 'white',
                 fontSize: '3rem',
@@ -4892,15 +4974,17 @@ const TabContainer = (p) => {
     var _a;
     const [tabIndex, setTabIndex] = React.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
     const theme = useThemeSafely();
+    const tabPanelId = `${p.id}_tabpanel`;
+    const tabHeaderId = `${p.id}_TabHeader`;
     return (React.createElement("div", { className: css({
             label: 'TabContainer'
         }) },
-        React.createElement(TabHeader, { tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: newIndex => {
+        React.createElement(TabHeader, { id: tabHeaderId, ariaControlsId: tabPanelId, ariaLabel: p.ariaLabel, tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: (newIndex) => {
                 var _a;
                 setTabIndex(newIndex);
                 (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
             } }),
-        React.createElement("div", { className: cx(css({
+        React.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: cx(css({
                 label: 'TabContainerContent',
                 padding: '1rem',
                 borderLeft: theme.controls.border,

package/index.js

@@ -306,7 +306,8 @@ const Text = (props) => {
     });
     return React__namespace.createElement(tagChoice, {
         style: style,
-        className: css.cx('text', styles, props.className)
+        className: css.cx('text', styles, props.className),
+        id: props.id
     }, props.children);
 };
 
@@ -967,7 +968,7 @@ const ListItem = (props) => {
 
 const TabLocker = (props) => {
     const tabLocker = React__namespace.useRef(null);
-    return (React__namespace.createElement("div", { className: "tabLocker", style: props.style, ref: tabLocker, onKeyDown: e => {
+    return (React__namespace.createElement("div", { className: css.cx('tabLocker', props.className), style: props.style, ref: tabLocker, onKeyDown: e => {
             var _a, _b;
             if (props.disabled) {
                 return;
@@ -1597,7 +1598,7 @@ const Checkbox = (props) => {
 		`}
 	`;
     const iconStyles = css.css `
-		${!!label && `
+		${!!label && !hideLabel && `
 			margin-right: 0.5rem;
 		`}
 		${props.disabled && `
@@ -1680,7 +1681,7 @@ const Modal = (p) => {
     const backdrop = useBackdropContext();
     const mouseDownElement = React.useRef(undefined);
     const theme = useThemeSafely();
-    const hasHeader = p.closeButton || p.heading;
+    const hasHeader = !p.__noHeader;
     const contentRef = React.useRef(null);
     const log = useLogger((_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', (_b = p.__debug) !== null && _b !== void 0 ? _b : false);
     const showing = React.useRef(p.show);
@@ -1719,10 +1720,22 @@ const Modal = (p) => {
         }
     };
     const zIndex = theme.zIndexes.modal;
+    const { getText, language } = useLocalization();
+    const closeText = React.useMemo(() => {
+        return getText('Close');
+    }, [language]);
     React.useEffect(() => {
         log('mounted');
+        const escapeRemover = createBodyEscapeHandler(() => {
+            if (showing.current) {
+                p.onClose();
+            }
+        });
+        log('body escape handler created');
         return () => {
             var _a;
+            escapeRemover();
+            log('body escape handler removed');
             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, { key: (_a = p.id) !== null && _a !== void 0 ? _a : 'Modal', zIndex });
@@ -1769,9 +1782,9 @@ const Modal = (p) => {
         zIndex,
         cursor: 'default',
         margin: '1rem',
-        backgroundColor: p.noBackground ? undefined : theme.colors.modalBg,
-        border: p.noBackground ? undefined : theme.controls.border,
-        boxShadow: p.noBackground ? undefined : theme.controls.boxShadow,
+        backgroundColor: !hasHeader ? undefined : theme.colors.modalBg,
+        border: !hasHeader ? undefined : theme.controls.border,
+        boxShadow: !hasHeader ? undefined : theme.controls.boxShadow,
         maxWidth: (_c = p.maxWidth) !== null && _c !== void 0 ? _c : theme.breakpoints.tablet,
         minWidth: (_d = p.minWidth) !== null && _d !== void 0 ? _d : (hasHeader ? '250px' : undefined),
         opacity: p.show ? 1 : 0,
@@ -1798,26 +1811,30 @@ const Modal = (p) => {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            cursor: p.onClick ? 'pointer' : 'default'
+            cursor: 'pointer'
         }, p.scrollable && {
             overflowY: 'auto',
             overflowX: 'hidden',
             alignItems: 'flex-start'
         }]);
+    const ariaLabelId = `${p.id}_label`;
     if (p.show) {
         const backdropContainer = document.getElementById(backdrop.portalId);
         if (backdropContainer) {
-            return reactDom.createPortal((React.createElement("div", { onClick: e => {
+            return reactDom.createPortal((React.createElement("div", { id: p.id, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, onClick: e => {
                     e.stopPropagation();
                     if (!mouseDownElement.current) {
-                        if (p.onClick) {
-                            log('backdropContainer onClick');
-                            p.onClick();
-                        }
+                        log('backdropContainer onClick');
+                        p.onClose();
                     }
                     mouseDownElement.current = undefined;
+                }, onKeyDown: e => {
+                    if (e.code === 'Escape') {
+                        e.stopPropagation();
+                        p.onClose();
+                    }
                 }, className: css.cx('modalContainer', modalContainerStyles) },
-                React.createElement("div", { id: p.id, ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
+                React.createElement("div", { ref: contentRef, onClick: e => e.stopPropagation(), onMouseDown: e => {
                         mouseDownElement.current = e.target;
                         e.stopPropagation();
                     }, onMouseUp: () => {
@@ -1831,21 +1848,35 @@ const Modal = (p) => {
                     }, className: css.cx('modalBody', modalBodyStyles, p.className) },
                     React.createElement(TabLocker, null,
                         hasHeader && (React.createElement("header", { className: css.cx('modalHeader', modalHeaderStyles) },
-                            p.heading ? React.createElement(Text, { className: css.css({
+                            React.createElement(Text, { id: ariaLabelId, className: css.css({
                                     margin: 0,
                                     flexGrow: 1
-                                }), tag: "h1", bold: true }, p.heading) : React.createElement("span", null),
-                            p.closeButton && p.onClick ? React.createElement(Button, { className: css.cx('modalCloseButton', css.css({
+                                }), tag: "h1", bold: true }, p.heading),
+                            React.createElement(Button, { className: css.cx('modalCloseButton', css.css({
                                     color: theme.colors.headerFont,
                                     marginLeft: '1rem',
                                     backgroundColor: 'transparent'
-                                })), "aria-label": "Close", variant: "icon", onClick: p.onClick },
-                                React.createElement(Icon, { id: "close" })) : React.createElement("span", null))),
+                                })), "aria-label": closeText, variant: "icon", onClick: e => {
+                                    e.stopPropagation();
+                                    p.onClose();
+                                } },
+                                React.createElement(Icon, { id: "close" })))),
                         p.children)))), backdropContainer);
         }
     }
     return null;
 };
+function createBodyEscapeHandler(onEscape) {
+    const handler = (e) => {
+        if (e.code === 'Escape') {
+            onEscape();
+        }
+    };
+    document.addEventListener('keydown', handler);
+    return () => {
+        document.removeEventListener('keydown', handler);
+    };
+}
 
 const ConfirmModal = (props) => {
     const theme = useThemeSafely();
@@ -1863,7 +1894,7 @@ const ConfirmModal = (props) => {
         const cancelText = props.cancelText || getText('Cancel');
         return { confirmText, cancelText };
     }, [language, props.confirmText, props.cancelText]);
-    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, closeButton: true, show: props.show, onClick: props.onCancel },
+    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('confirmModal', modalStyle, props.className), heading: props.header, show: props.show, onClose: props.onCancel },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, props.text),
             React__namespace.createElement("div", { className: css.css({ textAlign: 'center' }) },
@@ -1927,7 +1958,7 @@ const ErrorModal = (props) => {
 			color:  ${theme.colors.omgFont};
 		}
 	`;
-    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('errorModal', modalStyles), heading: heading, closeButton: true, show: props.show, onClick: props.close },
+    return (React__namespace.createElement(Modal, { id: props.id, __debug: props.__debug, className: css.cx('errorModal', modalStyles), heading: heading, show: props.show, onClose: props.onClose },
         React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) },
             React__namespace.createElement(Text, { align: "center" }, message))));
 };
@@ -2399,6 +2430,10 @@ const InfoTip = (props) => {
     var _a, _b, _c;
     const [showTip, setShowTip] = React__namespace.useState(false);
     const theme = useThemeSafely();
+    if (props.variant === 'modal' && !props.modalProps) {
+        console.warn(`InfoTip with variant=modal requires modalProps.`);
+        return null;
+    }
     const bgColor = (_a = props.bgColor) !== null && _a !== void 0 ? _a : theme.colors.nav;
     const fontColor = (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.navFont;
     const onClick = () => {
@@ -2455,12 +2490,12 @@ const InfoTip = (props) => {
 		display:inline-block;
 	`;
     const button = React__namespace.createElement(Button, { className: buttonStyles, disabled: props.disabled, variant: 'circle', tabIndex: props.tabIndex, onClick: onClick, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut }, "i");
-    if (props.variant === 'modal') {
+    if (props.variant === 'modal' && props.modalProps) {
         return (React__namespace.createElement(React__namespace.Fragment, null,
             button,
-            React__namespace.createElement(Modal, { id: props.modalId, __debug: props.__modalDebug, show: showTip, heading: props.modalHeader, onClick: closeTip, className: css.css({
+            React__namespace.createElement(Modal, { id: props.modalProps.id, __debug: props.modalProps.__debug, show: showTip, heading: props.modalProps.heading, onClose: closeTip, className: css.css({
                     whiteSpace: 'normal'
-                }), closeButton: true },
+                }) },
                 React__namespace.createElement("div", { className: css.css({ padding: '1rem' }) }, props.content))));
     }
     else {
@@ -2880,6 +2915,10 @@ const Nav = (props) => {
             if (props.show) {
                 if (!nav.current.classList.contains(classNavShowing)) {
                     nav.current.classList.add(classNavShowing);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = document.querySelector(props.focusSelector)) === null || _a === void 0 ? void 0 : _a.focus();
+                    }, slideMs + 1);
                 }
             }
             else {
@@ -2895,7 +2934,12 @@ const Nav = (props) => {
             }
         }
     });
-    return (React__namespace.createElement("nav", { ref: nav, className: css.cx('nav', navStyles, props.className) }, props.children));
+    return (React__namespace.createElement("nav", { role: "dialog", "aria-modal": "true", "aria-label": props.ariaLabel, ref: nav, className: css.cx('nav', navStyles, props.className), onKeyDown: e => {
+            if (e.code === 'Escape') {
+                props.toggle(false);
+            }
+        } },
+        React__namespace.createElement(TabLocker, { className: css.css({ height: '100%' }) }, props.children)));
 };
 
 const LinkContent = (props) => {
@@ -4066,8 +4110,37 @@ const TabHeader = (p) => {
         borderBottom: theme.controls.border,
         paddingBottom: '1rem'
     });
+    function onTabSelect(index, tabId, focusAfter) {
+        const onChange = () => {
+            var _a;
+            setTabIndex(index);
+            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
+            if (focusAfter) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = document.getElementById(tabId)) === null || _a === void 0 ? void 0 : _a.focus();
+                }, 0);
+            }
+        };
+        if (p.onBeforeTabChanged) {
+            setTabsChanging(true);
+            p.onBeforeTabChanged(index)
+                .then(() => {
+                onChange();
+            })
+                .catch(() => {
+                /* do nothing */
+            })
+                .finally(() => {
+                setTabsChanging(false);
+            });
+        }
+        else {
+            onChange();
+        }
+    }
     return (React__namespace.createElement("div", { className: "tabHeader" },
-        React__namespace.createElement("ul", { className: css.cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
+        React__namespace.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: css.cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
             var _a, _b;
             const active = index === tabIndex;
             let tabStyles;
@@ -4111,28 +4184,31 @@ const TabHeader = (p) => {
             else {
                 buttonContent = tab.name;
             }
+            const tabId = getTabHeaderTabId(p.id, index);
             return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
-                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);
-                            (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
-                        };
-                        if (p.onBeforeTabChanged) {
-                            setTabsChanging(true);
-                            p.onBeforeTabChanged(index)
-                                .then(() => {
-                                onChange();
-                            })
-                                .catch(() => {
-                                /* do nothing */
-                            })
-                                .finally(() => {
-                                setTabsChanging(false);
-                            });
+                React__namespace.createElement(Button, { id: tabId, tabIndex: active ? 0 : -1, role: "tab", "aria-controls": p.ariaControlsId, "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                        onTabSelect(index, tabId, false);
+                    }, onKeyDown: e => {
+                        e.stopPropagation();
+                        let newIndex = index;
+                        if (e.code === 'ArrowLeft') {
+                            if (index === 0) {
+                                newIndex = p.tabs.length - 1;
+                            }
+                            else {
+                                newIndex = index - 1;
+                            }
                         }
-                        else {
-                            onChange();
+                        else if (e.code === 'ArrowRight') {
+                            if (index === p.tabs.length - 1) {
+                                newIndex = 0;
+                            }
+                            else {
+                                newIndex = index + 1;
+                            }
+                        }
+                        if (newIndex !== index) {
+                            onTabSelect(newIndex, getTabHeaderTabId(p.id, newIndex), true);
                         }
                     } }, buttonContent)));
         })),
@@ -4144,6 +4220,9 @@ const TabHeader = (p) => {
                 position: 'relative'
             }), p.tabHeaderDividerClassName) }))));
 };
+function getTabHeaderTabId(tabHeaderId, tabIndex) {
+    return `${tabHeaderId}_tab_${tabIndex}`;
+}
 
 const Table = (props) => {
     const theme = useThemeSafely();
@@ -4448,7 +4527,7 @@ const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
 });
 
 const WaitingIndicator = (p) => {
-    var _a, _b;
+    var _a, _b, _c;
     const [show, setShow] = React.useState(p.show);
     const hideTimer = React.useRef(0);
     const lastShowStatus = React.useRef(false);
@@ -4500,7 +4579,10 @@ const WaitingIndicator = (p) => {
             }
         }
     }, [p.show]);
-    return (React.createElement(Modal, { id: p.id, __debug: p.__debug, className: "waitingIndicator", show: show, noBackground: true },
+    const id = (_c = p.id) !== null && _c !== void 0 ? _c : 'WaitingIndicator';
+    return (React.createElement(Modal, { id: id, __debug: p.__debug, __noHeader: true, heading: '', onClose: () => {
+            /* noop */
+        }, className: "waitingIndicator", show: show },
         React.createElement("div", { className: css.css({
                 color: 'white',
                 fontSize: '3rem',
@@ -4910,15 +4992,17 @@ const TabContainer = (p) => {
     var _a;
     const [tabIndex, setTabIndex] = React__namespace.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
     const theme = useThemeSafely();
+    const tabPanelId = `${p.id}_tabpanel`;
+    const tabHeaderId = `${p.id}_TabHeader`;
     return (React__namespace.createElement("div", { className: css.css({
             label: 'TabContainer'
         }) },
-        React__namespace.createElement(TabHeader, { tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: newIndex => {
+        React__namespace.createElement(TabHeader, { id: tabHeaderId, ariaControlsId: tabPanelId, ariaLabel: p.ariaLabel, tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: (newIndex) => {
                 var _a;
                 setTabIndex(newIndex);
                 (_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
             } }),
-        React__namespace.createElement("div", { className: css.cx(css.css({
+        React__namespace.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: css.cx(css.css({
                 label: 'TabContainerContent',
                 padding: '1rem',
                 borderLeft: theme.controls.border,

package/package.json

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