@mackin.com/styleguide 10.2.2 → 10.2.6

package/index.d.ts

@@ -140,6 +140,7 @@ interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttr
     checkedThemeColor?: 'primary' | 'primary2' | 'secondary';
     /** Background color when checked.  Mutually exclusive with 'checkedThemeColor'. */
     checkedColor?: string;
+    tabIndex?: number | undefined;
 }
 declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
 
@@ -863,8 +864,9 @@ interface SliderProps<T extends SliderValue> {
     innerTrackClassName?: string;
     /** Styles applied to the floating handle text with using 'showValue'. */
     sliderTextClassName?: string;
-    /** Styles applied to the floating handle text with using 'showValue'. */
+    /** Sets the aria-label value. */
     ariaLabel?: (T extends number ? string : readonly string[] | undefined) | undefined;
+    tabIndex?: number | undefined;
 }
 declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => React__default.JSX.Element;
 

package/index.esm.js

@@ -510,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,
@@ -525,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);
@@ -532,6 +534,11 @@ const Accordian = (props) => {
             }
             else {
                 currentContent.classList.remove(visibleStyle, expandedContentStyles);
+                if (children !== undefined) {
+                    window.setTimeout(() => {
+                        setChildren(undefined);
+                    }, accordianExpandTimeMs);
+                }
             }
         }
     }, [open]);
@@ -544,7 +551,7 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    return (React.createElement("div", { className: "accordian" },
+    return (React.createElement("div", { className: "accordian", "aria-expanded": open },
         React.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: cx(css({
                 display: 'flex',
                 alignItems: 'center',
@@ -563,7 +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 }, 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) => {
@@ -969,13 +976,14 @@ const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "listItemButtonClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
     const theme = useThemeSafely();
     const element = React.useRef(null);
     const input = React.useRef(null);
     const list = React.useRef(null);
+    const [selectedResultIndex, setSelectedResultIndex] = React.useState();
     const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
     const displayOptions = React.useMemo(() => {
         if (!p.allowScroll) {
@@ -994,10 +1002,12 @@ const Autocomplete = (p) => {
             if (direction === -1) {
                 buttonIndex = displayOptions.length - 1;
             }
+            setSelectedResultIndex(buttonIndex);
             return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
         }
         else {
             const nextIndex = fromIndex + direction;
+            setSelectedResultIndex(nextIndex);
             if (nextIndex >= displayOptions.length || nextIndex < 0) {
                 return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
             }
@@ -1021,6 +1031,7 @@ const Autocomplete = (p) => {
     if (p.round || theme.controls.borderRadius) {
         listBorderRadius = theme.controls.borderRadius || '0.5rem';
     }
+    const id = (_b = p.id) !== null && _b !== void 0 ? _b : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
     const onPickValue = (v) => {
         var _a;
         // the TextInput will not respond to outer value changes if it has focus.
@@ -1068,8 +1079,9 @@ const Autocomplete = (p) => {
                         }
                     }
                     (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
-                } })),
-            !!displayOptions.length && (React.createElement(List, { ref: list, className: cx(css({
+                }, "aria-owns": id, "aria-expanded": !!displayOptions.length, "aria-autocomplete": "both", "aria-describedby": `${id}-aria-description` })),
+            React.createElement("span", { id: `${id}-aria-description`, className: css({ display: "none" }) }, "When autocomplete results are available use up and down arrows to review and enter to select."),
+            !!displayOptions.length && (React.createElement(List, { id: id, ref: list, role: "listbox", className: cx(css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1092,7 +1104,7 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     var _a;
-                    return (React.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName },
+                    return (React.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName, role: "option", "aria-selected": selectedResultIndex === listItemIndex },
                         React.createElement(Button, { title: ((_a = p.showOptionTextAsTitle) !== null && _a !== void 0 ? _a : true) ? v : undefined, onKeyDown: e => {
                                 var _a, _b;
                                 if (e.key === 'ArrowDown') {
@@ -1480,6 +1492,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 selected = checkedIcon || 'selected';
     const unselected = uncheckedIcon || 'unselected';
@@ -1544,7 +1557,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, { tabIndex: readOnly ? -1 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
                     if (readOnly) {
                         e.preventDefault();
                         return;
@@ -3939,7 +3952,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) => {
@@ -4044,7 +4057,7 @@ const TabHeader = (p) => {
                 buttonContent = tab.name;
             }
             return (React.createElement("li", { key: index, className: cx(tabStyles, p.tabClassName) },
-                React.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                React.createElement(Button, { "aria-role": "tab", "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
                         const onChange = () => {
                             var _a;
                             setTabIndex(index);

package/index.js

@@ -528,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,
@@ -543,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);
@@ -550,6 +552,11 @@ const Accordian = (props) => {
             }
             else {
                 currentContent.classList.remove(visibleStyle, expandedContentStyles);
+                if (children !== undefined) {
+                    window.setTimeout(() => {
+                        setChildren(undefined);
+                    }, accordianExpandTimeMs);
+                }
             }
         }
     }, [open]);
@@ -562,7 +569,7 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    return (React__namespace.createElement("div", { className: "accordian" },
+    return (React__namespace.createElement("div", { className: "accordian", "aria-expanded": open },
         React__namespace.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
                 display: 'flex',
                 alignItems: 'center',
@@ -581,7 +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 }, 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) => {
@@ -987,13 +994,14 @@ const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "listItemButtonClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
     const theme = useThemeSafely();
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
     const list = React__namespace.useRef(null);
+    const [selectedResultIndex, setSelectedResultIndex] = React__namespace.useState();
     const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
     const displayOptions = React__namespace.useMemo(() => {
         if (!p.allowScroll) {
@@ -1012,10 +1020,12 @@ const Autocomplete = (p) => {
             if (direction === -1) {
                 buttonIndex = displayOptions.length - 1;
             }
+            setSelectedResultIndex(buttonIndex);
             return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
         }
         else {
             const nextIndex = fromIndex + direction;
+            setSelectedResultIndex(nextIndex);
             if (nextIndex >= displayOptions.length || nextIndex < 0) {
                 return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
             }
@@ -1039,6 +1049,7 @@ const Autocomplete = (p) => {
     if (p.round || theme.controls.borderRadius) {
         listBorderRadius = theme.controls.borderRadius || '0.5rem';
     }
+    const id = (_b = p.id) !== null && _b !== void 0 ? _b : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
     const onPickValue = (v) => {
         var _a;
         // the TextInput will not respond to outer value changes if it has focus.
@@ -1086,8 +1097,9 @@ const Autocomplete = (p) => {
                         }
                     }
                     (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
-                } })),
-            !!displayOptions.length && (React__namespace.createElement(List, { ref: list, className: css.cx(css.css({
+                }, "aria-owns": id, "aria-expanded": !!displayOptions.length, "aria-autocomplete": "both", "aria-describedby": `${id}-aria-description` })),
+            React__namespace.createElement("span", { id: `${id}-aria-description`, className: css.css({ display: "none" }) }, "When autocomplete results are available use up and down arrows to review and enter to select."),
+            !!displayOptions.length && (React__namespace.createElement(List, { id: id, ref: list, role: "listbox", className: css.cx(css.css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1110,7 +1122,7 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     var _a;
-                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName },
+                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName, role: "option", "aria-selected": selectedResultIndex === listItemIndex },
                         React__namespace.createElement(Button, { title: ((_a = p.showOptionTextAsTitle) !== null && _a !== void 0 ? _a : true) ? v : undefined, onKeyDown: e => {
                                 var _a, _b;
                                 if (e.key === 'ArrowDown') {
@@ -1498,6 +1510,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 selected = checkedIcon || 'selected';
     const unselected = uncheckedIcon || 'unselected';
@@ -1562,7 +1575,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, { tabIndex: readOnly ? -1 : (_a = props.tabIndex) !== null && _a !== void 0 ? _a : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
                     if (readOnly) {
                         e.preventDefault();
                         return;
@@ -3957,7 +3970,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) => {
@@ -4062,7 +4075,7 @@ const TabHeader = (p) => {
                 buttonContent = tab.name;
             }
             return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
-                React__namespace.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                React__namespace.createElement(Button, { "aria-role": "tab", "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
                         const onChange = () => {
                             var _a;
                             setTabIndex(index);

package/package.json

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