@mackin.com/styleguide 10.2.2 → 10.2.4

package/index.d.ts

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

package/index.esm.js

@@ -497,6 +497,45 @@ const Button = React.forwardRef((props, ref) => {
     return content;
 });
 
+/* Type is not always determinable due to the nature of custom components in typescript. For example OmniLink will not have a type of "a" but rather "OmniLink" so we have to determine
+if the child component is focusable based on certain properties on the control that are found on focusable components */
+const isChildFocusable = (props, type) => {
+    if (props.tabIndex !== undefined && props.tabIndex !== null) {
+        return true;
+    }
+    if (props.onClick !== undefined || props.onValueChange !== undefined) { //button or select
+        return true;
+    }
+    if (props.href || props.cols || props.rows || props.maxLength) {
+        return true;
+    }
+    if ((type === 'button' || type === 'input' || type === 'select' || type === 'textarea') && !props.disabled) {
+        return true;
+    }
+    return false;
+};
+const TabIndexContainer = (props) => {
+    const processElement = (node) => {
+        if (!React__default.isValidElement(node)) {
+            return node;
+        }
+        let updatedNode = node;
+        // Use the props-based logic to check focusability
+        if (isChildFocusable(node.props, node.type)) {
+            updatedNode = React__default.cloneElement(node, { tabIndex: props.tabIndexValue });
+        }
+        // Recursively process children
+        if (updatedNode.props.children) {
+            const clonedChildren = React__default.Children.map(updatedNode.props.children, processElement);
+            updatedNode = React__default.cloneElement(updatedNode, {
+                children: clonedChildren,
+            });
+        }
+        return updatedNode;
+    };
+    return (React__default.createElement(React__default.Fragment, null, React__default.Children.map(props.children, processElement)));
+};
+
 const accordianExpandTimeMs = 250;
 const accordianMaxHeight = 1020;
 const accordianTimingFunction = 'ease-in-out';
@@ -544,7 +583,7 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    return (React.createElement("div", { className: "accordian" },
+    return (React.createElement("div", { className: "accordian", "aria-expanded": open },
         React.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: cx(css({
                 display: 'flex',
                 alignItems: 'center',
@@ -563,7 +602,8 @@ const Accordian = (props) => {
             }, rightIcon: !props.disabled ? React.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
             React.createElement("span", null, props.header)),
         React.createElement("div", { ref: content, className: cx('accordian__body', contentStyles) },
-            React.createElement("div", { className: expandedContentWrapperStyles }, props.children))));
+            React.createElement("div", { className: expandedContentWrapperStyles },
+                React.createElement(TabIndexContainer, { tabIndexValue: open ? 0 : -1 }, props.children)))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React.useState(new Array(count).fill(false).map((b, i) => {
@@ -969,13 +1009,14 @@ const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "listItemButtonClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
     const theme = useThemeSafely();
     const element = React.useRef(null);
     const input = React.useRef(null);
     const list = React.useRef(null);
+    const [selectedResultIndex, setSelectedResultIndex] = React.useState();
     const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
     const displayOptions = React.useMemo(() => {
         if (!p.allowScroll) {
@@ -994,10 +1035,12 @@ const Autocomplete = (p) => {
             if (direction === -1) {
                 buttonIndex = displayOptions.length - 1;
             }
+            setSelectedResultIndex(buttonIndex);
             return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
         }
         else {
             const nextIndex = fromIndex + direction;
+            setSelectedResultIndex(nextIndex);
             if (nextIndex >= displayOptions.length || nextIndex < 0) {
                 return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
             }
@@ -1021,6 +1064,7 @@ const Autocomplete = (p) => {
     if (p.round || theme.controls.borderRadius) {
         listBorderRadius = theme.controls.borderRadius || '0.5rem';
     }
+    const id = (_b = p.id) !== null && _b !== void 0 ? _b : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
     const onPickValue = (v) => {
         var _a;
         // the TextInput will not respond to outer value changes if it has focus.
@@ -1068,8 +1112,9 @@ const Autocomplete = (p) => {
                         }
                     }
                     (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
-                } })),
-            !!displayOptions.length && (React.createElement(List, { ref: list, className: cx(css({
+                }, "aria-owns": id, "aria-expanded": !!displayOptions.length, "aria-autocomplete": "both", "aria-describedby": `${id}-aria-description` })),
+            React.createElement("span", { id: `${id}-aria-description`, className: css({ display: "none" }) }, "When autocomplete results are available use up and down arrows to review and enter to select."),
+            !!displayOptions.length && (React.createElement(List, { id: id, ref: list, role: "listbox", className: cx(css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1092,7 +1137,7 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     var _a;
-                    return (React.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName },
+                    return (React.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName, role: "option", "aria-selected": selectedResultIndex === listItemIndex },
                         React.createElement(Button, { title: ((_a = p.showOptionTextAsTitle) !== null && _a !== void 0 ? _a : true) ? v : undefined, onKeyDown: e => {
                                 var _a, _b;
                                 if (e.key === 'ArrowDown') {
@@ -4044,7 +4089,7 @@ const TabHeader = (p) => {
                 buttonContent = tab.name;
             }
             return (React.createElement("li", { key: index, className: cx(tabStyles, p.tabClassName) },
-                React.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                React.createElement(Button, { "aria-role": "tab", "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
                         const onChange = () => {
                             var _a;
                             setTabIndex(index);

package/index.js

@@ -515,6 +515,45 @@ const Button = React__namespace.forwardRef((props, ref) => {
     return content;
 });
 
+/* Type is not always determinable due to the nature of custom components in typescript. For example OmniLink will not have a type of "a" but rather "OmniLink" so we have to determine
+if the child component is focusable based on certain properties on the control that are found on focusable components */
+const isChildFocusable = (props, type) => {
+    if (props.tabIndex !== undefined && props.tabIndex !== null) {
+        return true;
+    }
+    if (props.onClick !== undefined || props.onValueChange !== undefined) { //button or select
+        return true;
+    }
+    if (props.href || props.cols || props.rows || props.maxLength) {
+        return true;
+    }
+    if ((type === 'button' || type === 'input' || type === 'select' || type === 'textarea') && !props.disabled) {
+        return true;
+    }
+    return false;
+};
+const TabIndexContainer = (props) => {
+    const processElement = (node) => {
+        if (!React.isValidElement(node)) {
+            return node;
+        }
+        let updatedNode = node;
+        // Use the props-based logic to check focusability
+        if (isChildFocusable(node.props, node.type)) {
+            updatedNode = React.cloneElement(node, { tabIndex: props.tabIndexValue });
+        }
+        // Recursively process children
+        if (updatedNode.props.children) {
+            const clonedChildren = React.Children.map(updatedNode.props.children, processElement);
+            updatedNode = React.cloneElement(updatedNode, {
+                children: clonedChildren,
+            });
+        }
+        return updatedNode;
+    };
+    return (React.createElement(React.Fragment, null, React.Children.map(props.children, processElement)));
+};
+
 const accordianExpandTimeMs = 250;
 const accordianMaxHeight = 1020;
 const accordianTimingFunction = 'ease-in-out';
@@ -562,7 +601,7 @@ const Accordian = (props) => {
         }
         setOpen((_a = props.open) !== null && _a !== void 0 ? _a : false);
     }, [props.open]);
-    return (React__namespace.createElement("div", { className: "accordian" },
+    return (React__namespace.createElement("div", { className: "accordian", "aria-expanded": open },
         React__namespace.createElement(Button, { readOnly: props.disabled, variant: props.variant, className: css.cx(css.css({
                 display: 'flex',
                 alignItems: 'center',
@@ -581,7 +620,8 @@ const Accordian = (props) => {
             }, rightIcon: !props.disabled ? React__namespace.createElement(Icon, { id: open ? 'collapse' : 'expand' }) : undefined },
             React__namespace.createElement("span", null, props.header)),
         React__namespace.createElement("div", { ref: content, className: css.cx('accordian__body', contentStyles) },
-            React__namespace.createElement("div", { className: expandedContentWrapperStyles }, props.children))));
+            React__namespace.createElement("div", { className: expandedContentWrapperStyles },
+                React__namespace.createElement(TabIndexContainer, { tabIndexValue: open ? 0 : -1 }, props.children)))));
 };
 const useAccordianState = (count, openIndex) => {
     const [panels, setShowPanel] = React__namespace.useState(new Array(count).fill(false).map((b, i) => {
@@ -987,13 +1027,14 @@ const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
 const defaultOnPickFocusMs = 100;
 const Autocomplete = (p) => {
-    var _a;
+    var _a, _b;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const inputProps = __rest(p, ["value", "className", "inputWrapperClassName", "inputClassName", "listClassName", "listItemClassName", "listItemButtonClassName", "maxShownValues", "allowScroll", "options", "onPick", "onPickFocusWaitMs"]);
     const theme = useThemeSafely();
     const element = React__namespace.useRef(null);
     const input = React__namespace.useRef(null);
     const list = React__namespace.useRef(null);
+    const [selectedResultIndex, setSelectedResultIndex] = React__namespace.useState();
     const maxShowValues = (_a = p.maxShownValues) !== null && _a !== void 0 ? _a : defaultMaxShownValues;
     const displayOptions = React__namespace.useMemo(() => {
         if (!p.allowScroll) {
@@ -1012,10 +1053,12 @@ const Autocomplete = (p) => {
             if (direction === -1) {
                 buttonIndex = displayOptions.length - 1;
             }
+            setSelectedResultIndex(buttonIndex);
             return (_a = list.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${buttonMarkerClass}${buttonIndex}`);
         }
         else {
             const nextIndex = fromIndex + direction;
+            setSelectedResultIndex(nextIndex);
             if (nextIndex >= displayOptions.length || nextIndex < 0) {
                 return (_b = input.current) !== null && _b !== void 0 ? _b : undefined;
             }
@@ -1039,6 +1082,7 @@ const Autocomplete = (p) => {
     if (p.round || theme.controls.borderRadius) {
         listBorderRadius = theme.controls.borderRadius || '0.5rem';
     }
+    const id = (_b = p.id) !== null && _b !== void 0 ? _b : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
     const onPickValue = (v) => {
         var _a;
         // the TextInput will not respond to outer value changes if it has focus.
@@ -1086,8 +1130,9 @@ const Autocomplete = (p) => {
                         }
                     }
                     (_c = p.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(p, e);
-                } })),
-            !!displayOptions.length && (React__namespace.createElement(List, { ref: list, className: css.cx(css.css({
+                }, "aria-owns": id, "aria-expanded": !!displayOptions.length, "aria-autocomplete": "both", "aria-describedby": `${id}-aria-description` })),
+            React__namespace.createElement("span", { id: `${id}-aria-description`, className: css.css({ display: "none" }) }, "When autocomplete results are available use up and down arrows to review and enter to select."),
+            !!displayOptions.length && (React__namespace.createElement(List, { id: id, ref: list, role: "listbox", className: css.cx(css.css({
                     position: 'absolute',
                     width: '100%',
                     border: theme.controls.border,
@@ -1110,7 +1155,7 @@ const Autocomplete = (p) => {
                 }), p.listClassName) },
                 displayOptions.map((v, listItemIndex) => {
                     var _a;
-                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName },
+                    return (React__namespace.createElement(ListItem, { key: v, variant: "full", className: p.listItemClassName, role: "option", "aria-selected": selectedResultIndex === listItemIndex },
                         React__namespace.createElement(Button, { title: ((_a = p.showOptionTextAsTitle) !== null && _a !== void 0 ? _a : true) ? v : undefined, onKeyDown: e => {
                                 var _a, _b;
                                 if (e.key === 'ArrowDown') {
@@ -4062,7 +4107,7 @@ const TabHeader = (p) => {
                 buttonContent = tab.name;
             }
             return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
-                React__namespace.createElement(Button, { disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
+                React__namespace.createElement(Button, { "aria-role": "tab", "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
                         const onChange = () => {
                             var _a;
                             setTabIndex(index);

package/package.json

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