@mackin.com/styleguide 10.2.4 → 11.0.0

package/index.d.ts

@@ -33,8 +33,12 @@ interface InputOnFocusProps {
     allowUpdateOnFocus?: boolean;
 }
 
-type BaseInputProps$1 = Omit<TextInputProps, 'value' | 'className' | 'wrapperClassName' | 'type' | 'showErrorDisplay'> & InputOnFocusProps;
+type BaseInputProps$1 = Omit<TextInputProps, 'value' | 'className' | 'wrapperClassName' | 'type' | 'showErrorDisplay' | 'id' | 'aria-label'> & InputOnFocusProps;
 interface AutocompleteProps extends BaseInputProps$1 {
+    /** Required for ARIA. Will be used to add unique IDs to the options. */
+    id: string;
+    /** Required for ARIA. Will be applied to both the input and the popup listbox. */
+    ariaLabel: string;
     value: string | undefined;
     options: string[];
     /** Applied to the Autocomplete wrapper. */
@@ -43,15 +47,12 @@ interface AutocompleteProps extends BaseInputProps$1 {
     inputClassName?: string;
     listClassName?: string;
     listItemClassName?: string;
-    listItemButtonClassName?: string;
     /** Limits what will be show in the autocomplete options. Default is 7. */
     maxShownValues?: number;
     /** Will enable scrolling in the results list. */
     allowScroll?: boolean;
     /** Delay before the input is re-focused after picking a value.  Adjust if there are issues with the displayed input value after pick.  Defaults to 100ms. */
     onPickFocusWaitMs?: number;
-    /** The option `title` attribute will be filled with the option text.  Defaults to `true`. */
-    showOptionTextAsTitle?: boolean;
     onPick: (value: string | undefined, index?: number) => void;
 }
 declare const Autocomplete: (p: AutocompleteProps) => React.JSX.Element;
@@ -130,16 +131,20 @@ interface CalendarProps {
 declare const Calendar: (p: CalendarProps) => React.JSX.Element;
 
 interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'checked' | 'onChange' | 'type'> {
+    /** Required for the internal label (ARIA). Pass `true` to `hideLabel` to treat this label as an aria-label. */
+    label: string;
     checked: boolean;
     onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
     readOnly?: boolean;
-    label?: string;
     checkedIcon?: string;
     uncheckedIcon?: string;
     /** Background color when checked based on the current theme.  Mutually exclusive with 'checkedColor'. */
     checkedThemeColor?: 'primary' | 'primary2' | 'secondary';
     /** Background color when checked.  Mutually exclusive with 'checkedThemeColor'. */
     checkedColor?: string;
+    tabIndex?: number | undefined;
+    /** Pass `true` to `hideLabel` to treat `label` as an aria-label. */
+    hideLabel?: boolean;
 }
 declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
 
@@ -865,6 +870,7 @@ interface SliderProps<T extends SliderValue> {
     sliderTextClassName?: string;
     /** Sets the aria-label value. */
     ariaLabel?: (T extends number ? string : readonly string[] | undefined) | undefined;
+    tabIndex?: number | undefined;
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => React__default.JSX.Element;
 

package/index.esm.js

@@ -497,45 +497,6 @@ 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';
@@ -549,6 +510,7 @@ const Accordian = (props) => {
     const [open, setOpen] = React.useState(false);
     const theme = useThemeSafely();
     const content = React.useRef(null);
+    const [children, setChildren] = React.useState();
     const contentStyles = css({
         overflow: 'hidden',
         maxHeight: 0,
@@ -564,6 +526,7 @@ const Accordian = (props) => {
         const currentContent = content.current;
         if (currentContent) {
             if (open) {
+                setChildren(props.children);
                 currentContent.classList.add(expandedContentStyles);
                 window.setTimeout(() => {
                     currentContent.classList.add(visibleStyle);
@@ -571,6 +534,11 @@ const Accordian = (props) => {
             }
             else {
                 currentContent.classList.remove(visibleStyle, expandedContentStyles);
+                if (children !== undefined) {
+                    window.setTimeout(() => {
+                        setChildren(undefined);
+                    }, accordianExpandTimeMs);
+                }
             }
         }
     }, [open]);
@@ -602,8 +570,7 @@ 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 },
-                React.createElement(TabIndexContainer, { tabIndexValue: open ? 0 : -1 }, props.children)))));
+            React.createElement("div", { className: expandedContentWrapperStyles }, children))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
@@ -1005,18 +972,23 @@ const TabLocker = (props) => {
         } }, props.children));
 };
 
+/*
+    ARIA info:
+        https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+        https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
+    This would be considered "List autocomplete with manual selection"
+*/
 const defaultMaxShownValues = 7;
-const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
-    var _a, _b;
+    var _a;
     // 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 inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "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 [selectedResultIndex, setSelectedResultIndex] = React.useState(-1);
     const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
     const displayOptions = React.useMemo(() => {
         if (!p.allowScroll) {
@@ -1028,27 +1000,6 @@ const Autocomplete = (p) => {
     const resultsText = React.useMemo(() => {
         return `${getText("Showing")} ${displayOptions.length.toLocaleString()} ${getText("of")} ${p.options.length.toLocaleString()} ${getText("results")}.`;
     }, [language, displayOptions, p.options]);
-    const getNextTabElement = (fromIndex, direction) => {
-        var _a, _b, _c;
-        if (fromIndex === -1) {
-            let buttonIndex = 0;
-            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;
-            }
-            else {
-                return (_c = list.current) === null || _c === void 0 ? void 0 : _c.querySelector(`.${buttonMarkerClass}${nextIndex}`);
-            }
-        }
-    };
     React.useEffect(() => {
         const clearItems = () => {
             if (p.options.length) {
@@ -1064,57 +1015,118 @@ 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) => {
+    const onPickValue = (v, keepFocus = true) => {
         var _a;
         // the TextInput will not respond to outer value changes if it has focus.
         // here we clear first and then onPickValue will re-focus after all updates.
         (_a = input.current) === null || _a === void 0 ? void 0 : _a.blur();
         setTimeout(() => {
-            // blur is now complete
             var _a;
+            // blur is now complete
             let index = v ? p.options.findIndex(o => o === v) : undefined;
             if (index !== undefined && index < 0) {
                 index = undefined;
             }
             p.onPick(v, index);
             // wait for the re-render.  the value will not update if the control has focus
-            setTimeout(() => {
-                var _a;
-                (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, (_a = p.onPickFocusWaitMs) !== null && _a !== void 0 ? _a : defaultOnPickFocusMs);
+            if (keepFocus) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, (_a = p.onPickFocusWaitMs) !== null && _a !== void 0 ? _a : defaultOnPickFocusMs);
+            }
         }, 0);
     };
+    React.useEffect(() => {
+        if (selectedResultIndex === -1) {
+            return;
+        }
+        const element = document.getElementById(getOptionId(p.id, selectedResultIndex));
+        if (element) {
+            element.scrollIntoView();
+        }
+    }, [selectedResultIndex]);
+    const popupId = `${p.id}_ul`;
+    const listItemStyles = css({
+        paddingLeft: theme.controls.padding,
+        paddingRight: theme.controls.padding,
+        backgroundColor: 'white',
+        cursor: 'pointer',
+        color: theme.colors.font,
+        height: theme.controls.height,
+        transition: theme.controls.transition,
+        fontsize: '1rem',
+        fontWeight: 'bold',
+        ':hover': {
+            filter: theme.controls.hoverBrightness
+        }
+    });
+    const listItemFocusStyles = css({
+        outline: 'none',
+        boxShadow: theme.controls.focusOutlineShadow,
+        // prevents box shadow clipping
+        position: 'relative',
+        zIndex: 2
+    });
+    const listItemTextStyles = css({
+        lineHeight: theme.controls.height
+    });
     return (React.createElement("div", { onClick: e => {
             e.stopPropagation();
         }, onKeyDown: e => {
             if (e.key === 'Escape') {
                 onPickValue(undefined);
+                setSelectedResultIndex(-1);
             }
-        }, ref: element, className: cx(css({
-            position: 'relative',
-            width: '100%',
-            label: 'Autocomplete'
-        }), p.className, 'autocomplete') },
+        }, ref: element, className: cx(styles.autocomplete, p.className, 'autocomplete') },
         React.createElement(TabLocker, { disabled: !displayOptions.length, style: { position: 'relative' } },
             React.createElement(TextInput, Object.assign({}, inputProps, { showErrorDisplay: false, ref: input, value: p.value, className: p.inputClassName, wrapperClassName: p.inputWrapperClassName, onKeyDown: e => {
-                    var _a, _b, _c;
-                    if (displayOptions.length) {
-                        if (e.key === 'ArrowDown') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            (_a = getNextTabElement(-1, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                    let handled = false;
+                    switch (e.code) {
+                        case 'ArrowDown': {
+                            if (displayOptions.length) {
+                                let nextIndex = selectedResultIndex + 1;
+                                if (nextIndex >= displayOptions.length) {
+                                    nextIndex = 0;
+                                }
+                                setSelectedResultIndex(nextIndex);
+                                handled = true;
+                            }
+                            break;
                         }
-                        else if (e.key === 'ArrowUp') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            (_b = getNextTabElement(-1, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                        case 'ArrowUp': {
+                            if (displayOptions.length) {
+                                let nextIndex = selectedResultIndex - 1;
+                                if (nextIndex < 0) {
+                                    nextIndex = displayOptions.length - 1;
+                                }
+                                setSelectedResultIndex(nextIndex);
+                                handled = true;
+                            }
+                            break;
+                        }
+                        case 'Enter': {
+                            let pickedValue = p.value;
+                            if (selectedResultIndex >= 0) {
+                                pickedValue = displayOptions[selectedResultIndex];
+                            }
+                            onPickValue(pickedValue);
+                            setSelectedResultIndex(-1);
+                            handled = true;
+                            break;
                         }
+                        case 'Tab': {
+                            onPickValue(p.value, false);
+                            setSelectedResultIndex(-1);
+                            break;
+                        }
+                    }
+                    if (handled) {
+                        e.preventDefault();
+                        e.stopPropagation();
                     }
-                    (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
-                }, "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({
+                }, role: "combobox", "aria-expanded": !!displayOptions.length, "aria-controls": popupId, "aria-autocomplete": "list", "aria-activedescendant": selectedResultIndex >= 0 ? getOptionId(p.id, selectedResultIndex) : undefined, "aria-label": p.ariaLabel })),
+            !!displayOptions.length && (React.createElement(List, { id: popupId, ref: list, role: "listbox", "aria-label": p.ariaLabel, className: cx(css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1123,11 +1135,11 @@ const Autocomplete = (p) => {
                     backgroundColor: theme.colors.bg,
                     marginTop: `-4px !important`,
                     zIndex: theme.zIndexes.backdrop,
-                    'li:first-child button': {
+                    'li:first-child': {
                         borderTopRightRadius: listBorderRadius,
                         borderTopLeftRadius: listBorderRadius,
                     },
-                    'li:last-child button': {
+                    'li:last-child': {
                         borderBottomRightRadius: listBorderRadius,
                         borderBottomLeftRadius: listBorderRadius,
                     }
@@ -1136,36 +1148,23 @@ const Autocomplete = (p) => {
                     maxHeight: `calc(${theme.controls.height} * ${maxShowValues})`
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
-                    var _a;
-                    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') {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    (_a = getNextTabElement(listItemIndex, 1)) === null || _a === void 0 ? void 0 : _a.focus();
-                                }
-                                else if (e.key === 'ArrowUp') {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
-                                }
-                                else if (e.key === 'Enter') {
-                                    e.stopPropagation();
-                                    // this will prevent the click event from firing in addition to this enter key event.
-                                    e.preventDefault();
-                                    onPickValue(v);
-                                }
-                            }, className: cx(buttonMarkerClass + listItemIndex, css({
-                                borderRadius: 0,
-                            }), p.listItemButtonClassName), onClick: () => {
-                                onPickValue(v);
-                            } },
-                            React.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, v))));
+                    const selected = selectedResultIndex === listItemIndex;
+                    return (React.createElement(ListItem, { key: v, variant: "full", className: cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected },
+                        React.createElement(Text, { tag: "div", ellipsis: true, align: "left", className: listItemTextStyles }, v)));
                 }),
                 !p.allowScroll && displayOptions.length < p.options.length && (React.createElement(ListItem, { className: p.listItemClassName },
                     React.createElement(Text, { tag: "div", italics: true, align: "center" }, resultsText))))))));
 };
+function getOptionId(baseId, optionIndex) {
+    return `${baseId}_li_${optionIndex}`;
+}
+const styles = {
+    autocomplete: css({
+        position: 'relative',
+        width: '100%',
+        label: 'Autocomplete'
+    }),
+};
 
 /** Returns a UID.  Use this instead of a direct call to a library. */
 function createUid() {
@@ -1525,7 +1524,8 @@ const Calendar = (p) => {
 };
 
 const Checkbox = (props) => {
-    const { onChange, label, checkedIcon, uncheckedIcon, checkedThemeColor, checkedColor, readOnly } = props, inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
+    var _a;
+    const { onChange, label, checkedIcon, uncheckedIcon, checkedThemeColor, checkedColor, readOnly, hideLabel } = props, inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly", "hideLabel"]);
     const selected = checkedIcon || 'selected';
     const unselected = uncheckedIcon || 'unselected';
     const theme = useThemeSafely();
@@ -1589,7 +1589,7 @@ const Checkbox = (props) => {
 	`;
     return (React.createElement("span", { className: cx('checkbox', checkboxStyles, props.className) },
         React.createElement("label", { className: labelStyles },
-            React.createElement("input", Object.assign({}, inputProps, { tabIndex: readOnly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
+            React.createElement("input", Object.assign({}, inputProps, { "aria-label": hideLabel ? label : undefined, tabIndex: readOnly ? -1 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
                     if (readOnly) {
                         e.preventDefault();
                         return;
@@ -1597,7 +1597,7 @@ const Checkbox = (props) => {
                     return onChange(e.currentTarget.checked, e);
                 } })),
             React.createElement(Icon, { className: cx('checkboxIcon', iconStyles), id: props.checked ? selected : unselected }),
-            label,
+            !hideLabel && label,
             props.children)));
 };
 
@@ -3984,7 +3984,7 @@ const Slider = (p) => {
                     }), specificThumbStyles, p.handleClassName, css({
                         width: sliderHandleSize,
                         height: sliderHandleSize,
-                    })) }, rest), p.showValue && (React__default.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+                    })) }, rest, { tabIndex: p.tabIndex }), p.showValue && (React__default.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
             } })));
 };
 const rectsCollideX = (r1, r2) => {

package/index.js

@@ -515,45 +515,6 @@ 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';
@@ -567,6 +528,7 @@ const Accordian = (props) => {
     const [open, setOpen] = React__namespace.useState(false);
     const theme = useThemeSafely();
     const content = React__namespace.useRef(null);
+    const [children, setChildren] = React__namespace.useState();
     const contentStyles = css.css({
         overflow: 'hidden',
         maxHeight: 0,
@@ -582,6 +544,7 @@ const Accordian = (props) => {
         const currentContent = content.current;
         if (currentContent) {
             if (open) {
+                setChildren(props.children);
                 currentContent.classList.add(expandedContentStyles);
                 window.setTimeout(() => {
                     currentContent.classList.add(visibleStyle);
@@ -589,6 +552,11 @@ const Accordian = (props) => {
             }
             else {
                 currentContent.classList.remove(visibleStyle, expandedContentStyles);
+                if (children !== undefined) {
+                    window.setTimeout(() => {
+                        setChildren(undefined);
+                    }, accordianExpandTimeMs);
+                }
             }
         }
     }, [open]);
@@ -620,8 +588,7 @@ 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 },
-                React__namespace.createElement(TabIndexContainer, { tabIndexValue: open ? 0 : -1 }, props.children)))));
+            React__namespace.createElement("div", { className: expandedContentWrapperStyles }, children))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
@@ -1023,18 +990,23 @@ const TabLocker = (props) => {
         } }, props.children));
 };
 
+/*
+    ARIA info:
+        https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+        https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
+    This would be considered "List autocomplete with manual selection"
+*/
 const defaultMaxShownValues = 7;
-const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
-    var _a, _b;
+    var _a;
     // 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 inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "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 [selectedResultIndex, setSelectedResultIndex] = React__namespace.useState(-1);
     const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
     const displayOptions = React__namespace.useMemo(() => {
         if (!p.allowScroll) {
@@ -1046,27 +1018,6 @@ const Autocomplete = (p) => {
     const resultsText = React__namespace.useMemo(() => {
         return `${getText("Showing")} ${displayOptions.length.toLocaleString()} ${getText("of")} ${p.options.length.toLocaleString()} ${getText("results")}.`;
     }, [language, displayOptions, p.options]);
-    const getNextTabElement = (fromIndex, direction) => {
-        var _a, _b, _c;
-        if (fromIndex === -1) {
-            let buttonIndex = 0;
-            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;
-            }
-            else {
-                return (_c = list.current) === null || _c === void 0 ? void 0 : _c.querySelector(`.${buttonMarkerClass}${nextIndex}`);
-            }
-        }
-    };
     React__namespace.useEffect(() => {
         const clearItems = () => {
             if (p.options.length) {
@@ -1082,57 +1033,118 @@ 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) => {
+    const onPickValue = (v, keepFocus = true) => {
         var _a;
         // the TextInput will not respond to outer value changes if it has focus.
         // here we clear first and then onPickValue will re-focus after all updates.
         (_a = input.current) === null || _a === void 0 ? void 0 : _a.blur();
         setTimeout(() => {
-            // blur is now complete
             var _a;
+            // blur is now complete
             let index = v ? p.options.findIndex(o => o === v) : undefined;
             if (index !== undefined && index < 0) {
                 index = undefined;
             }
             p.onPick(v, index);
             // wait for the re-render.  the value will not update if the control has focus
-            setTimeout(() => {
-                var _a;
-                (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, (_a = p.onPickFocusWaitMs) !== null && _a !== void 0 ? _a : defaultOnPickFocusMs);
+            if (keepFocus) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, (_a = p.onPickFocusWaitMs) !== null && _a !== void 0 ? _a : defaultOnPickFocusMs);
+            }
         }, 0);
     };
+    React__namespace.useEffect(() => {
+        if (selectedResultIndex === -1) {
+            return;
+        }
+        const element = document.getElementById(getOptionId(p.id, selectedResultIndex));
+        if (element) {
+            element.scrollIntoView();
+        }
+    }, [selectedResultIndex]);
+    const popupId = `${p.id}_ul`;
+    const listItemStyles = css.css({
+        paddingLeft: theme.controls.padding,
+        paddingRight: theme.controls.padding,
+        backgroundColor: 'white',
+        cursor: 'pointer',
+        color: theme.colors.font,
+        height: theme.controls.height,
+        transition: theme.controls.transition,
+        fontsize: '1rem',
+        fontWeight: 'bold',
+        ':hover': {
+            filter: theme.controls.hoverBrightness
+        }
+    });
+    const listItemFocusStyles = css.css({
+        outline: 'none',
+        boxShadow: theme.controls.focusOutlineShadow,
+        // prevents box shadow clipping
+        position: 'relative',
+        zIndex: 2
+    });
+    const listItemTextStyles = css.css({
+        lineHeight: theme.controls.height
+    });
     return (React__namespace.createElement("div", { onClick: e => {
             e.stopPropagation();
         }, onKeyDown: e => {
             if (e.key === 'Escape') {
                 onPickValue(undefined);
+                setSelectedResultIndex(-1);
             }
-        }, ref: element, className: css.cx(css.css({
-            position: 'relative',
-            width: '100%',
-            label: 'Autocomplete'
-        }), p.className, 'autocomplete') },
+        }, ref: element, className: css.cx(styles.autocomplete, p.className, 'autocomplete') },
         React__namespace.createElement(TabLocker, { disabled: !displayOptions.length, style: { position: 'relative' } },
             React__namespace.createElement(TextInput, Object.assign({}, inputProps, { showErrorDisplay: false, ref: input, value: p.value, className: p.inputClassName, wrapperClassName: p.inputWrapperClassName, onKeyDown: e => {
-                    var _a, _b, _c;
-                    if (displayOptions.length) {
-                        if (e.key === 'ArrowDown') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            (_a = getNextTabElement(-1, 1)) === null || _a === void 0 ? void 0 : _a.focus();
+                    let handled = false;
+                    switch (e.code) {
+                        case 'ArrowDown': {
+                            if (displayOptions.length) {
+                                let nextIndex = selectedResultIndex + 1;
+                                if (nextIndex >= displayOptions.length) {
+                                    nextIndex = 0;
+                                }
+                                setSelectedResultIndex(nextIndex);
+                                handled = true;
+                            }
+                            break;
                         }
-                        else if (e.key === 'ArrowUp') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            (_b = getNextTabElement(-1, -1)) === null || _b === void 0 ? void 0 : _b.focus();
+                        case 'ArrowUp': {
+                            if (displayOptions.length) {
+                                let nextIndex = selectedResultIndex - 1;
+                                if (nextIndex < 0) {
+                                    nextIndex = displayOptions.length - 1;
+                                }
+                                setSelectedResultIndex(nextIndex);
+                                handled = true;
+                            }
+                            break;
+                        }
+                        case 'Enter': {
+                            let pickedValue = p.value;
+                            if (selectedResultIndex >= 0) {
+                                pickedValue = displayOptions[selectedResultIndex];
+                            }
+                            onPickValue(pickedValue);
+                            setSelectedResultIndex(-1);
+                            handled = true;
+                            break;
                         }
+                        case 'Tab': {
+                            onPickValue(p.value, false);
+                            setSelectedResultIndex(-1);
+                            break;
+                        }
+                    }
+                    if (handled) {
+                        e.preventDefault();
+                        e.stopPropagation();
                     }
-                    (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
-                }, "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({
+                }, role: "combobox", "aria-expanded": !!displayOptions.length, "aria-controls": popupId, "aria-autocomplete": "list", "aria-activedescendant": selectedResultIndex >= 0 ? getOptionId(p.id, selectedResultIndex) : undefined, "aria-label": p.ariaLabel })),
+            !!displayOptions.length && (React__namespace.createElement(List, { id: popupId, ref: list, role: "listbox", "aria-label": p.ariaLabel, className: css.cx(css.css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1141,11 +1153,11 @@ const Autocomplete = (p) => {
                     backgroundColor: theme.colors.bg,
                     marginTop: `-4px !important`,
                     zIndex: theme.zIndexes.backdrop,
-                    'li:first-child button': {
+                    'li:first-child': {
                         borderTopRightRadius: listBorderRadius,
                         borderTopLeftRadius: listBorderRadius,
                     },
-                    'li:last-child button': {
+                    'li:last-child': {
                         borderBottomRightRadius: listBorderRadius,
                         borderBottomLeftRadius: listBorderRadius,
                     }
@@ -1154,36 +1166,23 @@ const Autocomplete = (p) => {
                     maxHeight: `calc(${theme.controls.height} * ${maxShowValues})`
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
-                    var _a;
-                    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') {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    (_a = getNextTabElement(listItemIndex, 1)) === null || _a === void 0 ? void 0 : _a.focus();
-                                }
-                                else if (e.key === 'ArrowUp') {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    (_b = getNextTabElement(listItemIndex, -1)) === null || _b === void 0 ? void 0 : _b.focus();
-                                }
-                                else if (e.key === 'Enter') {
-                                    e.stopPropagation();
-                                    // this will prevent the click event from firing in addition to this enter key event.
-                                    e.preventDefault();
-                                    onPickValue(v);
-                                }
-                            }, className: css.cx(buttonMarkerClass + listItemIndex, css.css({
-                                borderRadius: 0,
-                            }), p.listItemButtonClassName), onClick: () => {
-                                onPickValue(v);
-                            } },
-                            React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left" }, v))));
+                    const selected = selectedResultIndex === listItemIndex;
+                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: css.cx(listItemStyles, selected ? listItemFocusStyles : undefined, p.listItemClassName), role: "option", id: getOptionId(p.id, listItemIndex), "aria-selected": selected },
+                        React__namespace.createElement(Text, { tag: "div", ellipsis: true, align: "left", className: listItemTextStyles }, v)));
                 }),
                 !p.allowScroll && displayOptions.length < p.options.length && (React__namespace.createElement(ListItem, { className: p.listItemClassName },
                     React__namespace.createElement(Text, { tag: "div", italics: true, align: "center" }, resultsText))))))));
 };
+function getOptionId(baseId, optionIndex) {
+    return `${baseId}_li_${optionIndex}`;
+}
+const styles = {
+    autocomplete: css.css({
+        position: 'relative',
+        width: '100%',
+        label: 'Autocomplete'
+    }),
+};
 
 /** Returns a UID.  Use this instead of a direct call to a library. */
 function createUid() {
@@ -1543,7 +1542,8 @@ const Calendar = (p) => {
 };
 
 const Checkbox = (props) => {
-    const { onChange, label, checkedIcon, uncheckedIcon, checkedThemeColor, checkedColor, readOnly } = props, inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
+    var _a;
+    const { onChange, label, checkedIcon, uncheckedIcon, checkedThemeColor, checkedColor, readOnly, hideLabel } = props, inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly", "hideLabel"]);
     const selected = checkedIcon || 'selected';
     const unselected = uncheckedIcon || 'unselected';
     const theme = useThemeSafely();
@@ -1607,7 +1607,7 @@ const Checkbox = (props) => {
 	`;
     return (React__namespace.createElement("span", { className: css.cx('checkbox', checkboxStyles, props.className) },
         React__namespace.createElement("label", { className: labelStyles },
-            React__namespace.createElement("input", Object.assign({}, inputProps, { tabIndex: readOnly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
+            React__namespace.createElement("input", Object.assign({}, inputProps, { "aria-label": hideLabel ? label : undefined, tabIndex: readOnly ? -1 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
                     if (readOnly) {
                         e.preventDefault();
                         return;
@@ -1615,7 +1615,7 @@ const Checkbox = (props) => {
                     return onChange(e.currentTarget.checked, e);
                 } })),
             React__namespace.createElement(Icon, { className: css.cx('checkboxIcon', iconStyles), id: props.checked ? selected : unselected }),
-            label,
+            !hideLabel && label,
             props.children)));
 };
 
@@ -4002,7 +4002,7 @@ const Slider = (p) => {
                     }), specificThumbStyles, p.handleClassName, css.css({
                         width: sliderHandleSize,
                         height: sliderHandleSize,
-                    })) }, rest), p.showValue && (React.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
+                    })) }, rest, { tabIndex: p.tabIndex }), p.showValue && (React.createElement(HandleText, { sliderHandleSize: sliderHandleSize, className: p.sliderTextClassName, index: state.index, parentElement: sliderContainer.current, value: Array.isArray(currentValue.current) ? currentValue.current[state.index] : currentValue.current, renderValue: p.renderValue, renderValueWidth: p.renderValueWidth }))));
             } })));
 };
 const rectsCollideX = (r1, r2) => {

package/package.json

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