@mackin.com/styleguide 10.2.6 → 11.0.1

package/index.d.ts

@@ -4,6 +4,8 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 type HeaderVariant = 'label' | 'link' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
 interface AccordianProps {
+    /** Required for ARIA. */
+    id: string;
     header: JSX.Element | string;
     children: React.ReactNode;
     variant?: HeaderVariant;
@@ -33,8 +35,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 +49,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,10 +133,11 @@ 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'. */
@@ -141,6 +145,8 @@ interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttr
     /** 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;
 

package/index.esm.js

@@ -292,7 +292,6 @@ const Text = (props) => {
     }, props.children);
 };
 
-//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const Button = React.forwardRef((props, ref) => {
     var _a;
     const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
@@ -551,26 +550,33 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    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',
-                justifyContent: 'space-between',
-                height: 'auto',
-                minHeight: theme.controls.height,
-                width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
-            }, props.className)), onClick: e => {
-                e.stopPropagation();
-                if (props.onChange) {
-                    props.onChange(!open);
-                }
-                else {
-                    setOpen(!open);
-                }
-            }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
-            React.createElement("span", null, props.header)),
+    const expandedPanelId = `${props.id}_expanded`;
+    return (React.createElement("div", { id: props.id, className: "accordian" },
+        React.createElement("h3", { className: css({
+                // required for ARIA
+                margin: 0,
+                padding: 0,
+                fontSize: 'inherit'
+            }) },
+            React.createElement(Button, { "aria-controls": expandedPanelId, "aria-expanded": open, "aria-disabled": props.disabled, readOnly: props.disabled, variant: props.variant, className: cx(css({
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    height: 'auto',
+                    minHeight: theme.controls.height,
+                    width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
+                }, props.className)), onClick: e => {
+                    e.stopPropagation();
+                    if (props.onChange) {
+                        props.onChange(!open);
+                    }
+                    else {
+                        setOpen(!open);
+                    }
+                }, 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 }, children))));
+            React.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId }, children))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
@@ -972,18 +978,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", "ariaLabel"]);
     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) {
@@ -995,27 +1006,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) {
@@ -1031,57 +1021,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,
@@ -1090,11 +1141,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,
                     }
@@ -1103,36 +1154,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() {
@@ -1493,7 +1531,7 @@ const Calendar = (p) => {
 
 const Checkbox = (props) => {
     var _a;
-    const { onChange, label, checkedIcon, uncheckedIcon, checkedThemeColor, checkedColor, readOnly } = props, inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
+    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();
@@ -1557,7 +1595,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 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : 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;
@@ -1565,7 +1603,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)));
 };
 
@@ -2860,7 +2898,6 @@ const LinkContent = (props) => {
             }) }, props.rightIcon)));
 };
 
-//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const generateLinkStyles = (props, theme) => {
     const disabled = props.disabled || props.waiting;
     let color = props.colorOverride;
@@ -4229,7 +4266,6 @@ const TextArea = React.forwardRef((props, ref) => {
         }
         else {
             if (reportValueOnError) {
-                //TB: temp, add a custom list of validators that will be run for all inputs if a pattern cannot be decided.
                 onValueChange(localValue);
             }
             else {

package/index.js

@@ -310,7 +310,6 @@ const Text = (props) => {
     }, props.children);
 };
 
-//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const Button = React__namespace.forwardRef((props, ref) => {
     var _a;
     const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
@@ -569,26 +568,33 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    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',
-                justifyContent: 'space-between',
-                height: 'auto',
-                minHeight: theme.controls.height,
-                width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
-            }, props.className)), onClick: e => {
-                e.stopPropagation();
-                if (props.onChange) {
-                    props.onChange(!open);
-                }
-                else {
-                    setOpen(!open);
-                }
-            }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
-            React__namespace.createElement("span", null, props.header)),
+    const expandedPanelId = `${props.id}_expanded`;
+    return (React__namespace.createElement("div", { id: props.id, className: "accordian" },
+        React__namespace.createElement("h3", { className: css.css({
+                // required for ARIA
+                margin: 0,
+                padding: 0,
+                fontSize: 'inherit'
+            }) },
+            React__namespace.createElement(Button, { "aria-controls": expandedPanelId, "aria-expanded": open, "aria-disabled": props.disabled, readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    height: 'auto',
+                    minHeight: theme.controls.height,
+                    width: ((_d = props.block) !== null && _d !== void 0 ? _d : true) ? '100%' : 'auto'
+                }, props.className)), onClick: e => {
+                    e.stopPropagation();
+                    if (props.onChange) {
+                        props.onChange(!open);
+                    }
+                    else {
+                        setOpen(!open);
+                    }
+                }, 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 }, children))));
+            React__namespace.createElement("div", { className: expandedContentWrapperStyles, id: expandedPanelId }, children))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
@@ -990,18 +996,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", "ariaLabel"]);
     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) {
@@ -1013,27 +1024,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) {
@@ -1049,57 +1039,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,
@@ -1108,11 +1159,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,
                     }
@@ -1121,36 +1172,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() {
@@ -1511,7 +1549,7 @@ const Calendar = (p) => {
 
 const Checkbox = (props) => {
     var _a;
-    const { onChange, label, checkedIcon, uncheckedIcon, checkedThemeColor, checkedColor, readOnly } = props, inputProps = __rest(props, ["onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
+    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();
@@ -1575,7 +1613,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 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : 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;
@@ -1583,7 +1621,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)));
 };
 
@@ -2878,7 +2916,6 @@ const LinkContent = (props) => {
             }) }, props.rightIcon)));
 };
 
-//TB: FUTURE de-dup these styles.  create individual styles and compose them manually.
 const generateLinkStyles = (props, theme) => {
     const disabled = props.disabled || props.waiting;
     let color = props.colorOverride;
@@ -4247,7 +4284,6 @@ const TextArea = React__namespace.forwardRef((props, ref) => {
         }
         else {
             if (reportValueOnError) {
-                //TB: temp, add a custom list of validators that will be run for all inputs if a pattern cannot be decided.
                 onValueChange(localValue);
             }
             else {

package/package.json

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