@artsy/palette-mobile 17.6.0 → 17.8.0

package/dist/elements/BackButton/BackButton.js

@@ -7,5 +7,5 @@ export const BackButton = ({ color = "onBackgroundHigh", hitSlop = DEFAULT_HIT_S
     return (_jsx(TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? (_jsx(CloseIcon, { fill: color, width: iconSize, height: iconSize })) : (_jsx(ChevronIcon, { direction: "left", fill: color, height: iconSize, width: iconSize })) }));
 };
 export const BackButtonWithBackground = ({ color = "onBackgroundHigh", hitSlop = DEFAULT_HIT_SLOP, onPress, showX = false, style, }) => {
-    return (_jsx(TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, children: _jsx(Flex, { backgroundColor: "background", width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? (_jsx(CloseIcon, { fill: color, width: 26, height: 26 })) : (_jsx(ChevronIcon, { fill: color, direction: "left" })) }) }));
+    return (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Back", accessibilityHint: showX ? "Closes the modal" : "Navigates to the previous screen", onPress: onPress, hitSlop: hitSlop, children: _jsx(Flex, { backgroundColor: "background", width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? (_jsx(CloseIcon, { fill: color, width: 26, height: 26 })) : (_jsx(ChevronIcon, { fill: color, direction: "left" })) }) }));
 };

package/dist/elements/Banner/Banner.js

@@ -19,7 +19,7 @@ export const Banner = ({ text, onClose, dismissable = false, variant = "defaultL
         });
         onClose?.();
     };
-    return (_jsx(Animated.View, { style: {
+    return (_jsx(Animated.View, { accessibilityLabel: "Banner", style: {
             height: tempHeight,
             transform: [
                 {
@@ -29,7 +29,7 @@ export const Banner = ({ text, onClose, dismissable = false, variant = "defaultL
                     }),
                 },
             ],
-        }, children: _jsx(Flex, { backgroundColor: BANNER_VARIANTS[variant].backgroundColor, ...restProps, children: _jsxs(Flex, { px: 2, py: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [text ? (_jsx(Flex, { flex: 1, alignItems: "center", children: _jsx(Text, { textAlign: "center", variant: "xs", color: BANNER_VARIANTS[variant].color, children: text }) })) : (_jsx(Flex, { flex: 1, children: children })), !!dismissable && (_jsx(Flex, { children: _jsx(TouchableOpacity, { testID: "banner-close-button", onPress: handleClose, hitSlop: DEFAULT_HIT_SLOP, children: _jsx(CloseIcon, { fill: BANNER_VARIANTS[variant].color }) }) }))] }) }) }));
+        }, children: _jsx(Flex, { backgroundColor: BANNER_VARIANTS[variant].backgroundColor, ...restProps, children: _jsxs(Flex, { px: 2, py: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [text ? (_jsx(Flex, { flex: 1, alignItems: "center", children: _jsx(Text, { textAlign: "center", variant: "xs", color: BANNER_VARIANTS[variant].color, children: text }) })) : (_jsx(Flex, { flex: 1, children: children })), !!dismissable && (_jsx(Flex, { children: _jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Close", accessibilityHint: "Dismiss banner", testID: "banner-close-button", onPress: handleClose, hitSlop: DEFAULT_HIT_SLOP, children: _jsx(CloseIcon, { fill: BANNER_VARIANTS[variant].color }) }) }))] }) }) }));
 };
 const BANNER_VARIANTS = {
     defaultLight: {

package/dist/elements/Button/Button.js

@@ -69,7 +69,9 @@ export const Button = ({ children, disabled, haptic, icon, iconPosition = "left"
     };
     const containerSize = getSize();
     const to = useStyleForVariantAndState(variant, testOnly_state ?? displayState);
-    return (_jsx(Spring, { native: true, to: to, config: config.stiff, children: (springProps) => (_jsx(Pressable, { hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: () => {
+    return (_jsx(Spring, { native: true, to: to, config: config.stiff, children: (springProps) => (_jsx(Pressable, { accessibilityLabel: rest.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
+                disabled,
+            }, hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: () => {
                 if (displayState === DisplayState.Loading) {
                     return;
                 }

package/dist/elements/Button/LinkButton.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "../Text";
 import { Touchable } from "../Touchable";
-export const LinkButton = (props) => (_jsx(Touchable, { onPress: props.onPress, children: _jsx(Text, { underline: true, ...props }) }));
+export const LinkButton = (props) => (_jsx(Touchable, { accessibilityRole: "link", onPress: props.onPress, children: _jsx(Text, { underline: true, ...props }) }));

package/dist/elements/ButtonNew/Button.js

@@ -73,7 +73,9 @@ export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPos
             textDecorationLine: pressAnimationProgress.get() > 0 ? "underline" : "none",
         };
     });
-    return (_jsx(Pressable, { disabled: disabled, onPressIn: () => {
+    return (_jsx(Pressable, { accessibilityLabel: restProps.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
+            disabled,
+        }, disabled: disabled, onPressIn: () => {
             if (loading) {
                 return;
             }

package/dist/elements/ButtonNew/LinkButton.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "../Text";
 import { Touchable } from "../Touchable";
-export const LinkButton = (props) => (_jsx(Touchable, { onPress: props.onPress, children: _jsx(Text, { underline: true, ...props }) }));
+export const LinkButton = (props) => (_jsx(Touchable, { accessibilityRole: "link", onPress: props.onPress, children: _jsx(Text, { underline: true, ...props }) }));

package/dist/elements/Checkbox/Checkbox.js

@@ -43,7 +43,9 @@ export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text,
         : checkboxStyles[error ? "error" : "default"][isChecked ? "checked" : "unchecked"];
     const textColor = error ? color("red100") : disabled ? color("mono30") : color("mono100");
     const subtitleColor = error ? color("red100") : disabled ? color("mono30") : color("mono60");
-    return (_jsx(TouchableWithoutFeedback, { onPress: (event) => {
+    // TODO: migrate away from using this checkbox implementation and
+    // use the one from the community solutions - reasoning - this is an inaccessible component
+    return (_jsx(TouchableWithoutFeedback, { accessibilityRole: "checkbox", onPress: (event) => {
             if (disabled) {
                 return;
             }

package/dist/elements/Chip/Chip.js

@@ -18,7 +18,7 @@ export const Chip = ({ image, title, subtitle, onPress }) => {
     const handleOnPressOut = () => {
         animatedState.transitionTo("to");
     };
-    return (_jsx(Touchable, { onPress: onPress, onPressIn: handleOnPressIn, onPressOut: handleOnPressOut, noFeedback: true, children: _jsxs(Flex, { flexDirection: "row", minWidth: 200, height: 70, overflow: "hidden", borderRadius: 5, children: [!!image && _jsx(Image, { src: image, width: 70, height: 70 }), _jsxs(View, { state: animatedState, style: {
+    return (_jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: title, onPress: onPress, onPressIn: handleOnPressIn, onPressOut: handleOnPressOut, noFeedback: true, children: _jsxs(Flex, { flexDirection: "row", minWidth: 200, height: 70, overflow: "hidden", borderRadius: 5, children: [!!image && _jsx(Image, { src: image, width: 70, height: 70 }), _jsxs(View, { state: animatedState, style: {
                         flex: 1,
                         padding: space(1),
                         justifyContent: "center",

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js

@@ -36,7 +36,7 @@ export const CollapsibleMenuItem = forwardRef(({ children, overtitle, title, isE
             });
         },
     }), [isOpen]);
-    return (_jsxs(Flex, { ref: componentRef, collapsable: false, children: [_jsxs(Touchable, { onPress: () => {
+    return (_jsxs(Flex, { ref: componentRef, collapsable: false, children: [_jsxs(Touchable, { accessibilityRole: "button", accessibilityLabel: "Collapsible Element", accessibilityState: { disabled }, accessibilityHint: "Tap to " + (isOpen ? "collapse" : "expand"), onPress: () => {
                     setIsOpen(!isOpen);
                     isOpen ? onCollapse?.() : onExpand?.();
                 }, disabled: disabled, children: [!!overtitle && (_jsx(Text, { variant: "sm", color: disabled ? "mono30" : "mono100", children: overtitle })), _jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { variant: "lg", color: disabled ? "mono30" : "mono100", style: { maxWidth: "90%" }, children: title }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && (_jsx(CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), _jsx(ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "mono30" : "mono60" })] })] })] }), _jsx(Collapse, { opened: isOpen, children: children })] }));

package/dist/elements/Dialog/Dialog.js

@@ -44,7 +44,7 @@ export const Dialog = (props) => {
             StyleSheet.absoluteFillObject,
             { opacity: value, backgroundColor: "rgba(194,194,194,0.5)" },
         ] }));
-    return (_jsxs(Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? (_jsx(TouchableWithoutFeedback, { testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), _jsx(SafeAreaView, { pointerEvents: "box-none", style: {
+    return (_jsxs(Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? (_jsx(TouchableWithoutFeedback, { accessibilityRole: "button", accessibilityLabel: "Dismiss", accessibilityHint: "Dismisses the dialog", testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), _jsx(SafeAreaView, { pointerEvents: "box-none", style: {
                     flex: 1,
                     justifyContent: "center",
                     alignItems: "center",

package/dist/elements/Input/Input.js

@@ -206,7 +206,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                 }, children: [unit && (_jsx(Text, { color: disabled ? "mono30" : "mono60", variant: "sm-display", children: unit })), icon] }));
         }
         if (onSelectTap) {
-            return (_jsx(TouchableOpacity, { onPress: onSelectTap, style: [
+            return (_jsx(TouchableOpacity, { accessibilityRole: "button", onPress: onSelectTap, style: [
                     leftComponentSharedStyles,
                     {
                         width: selectComponentWidth,
@@ -248,7 +248,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                     } }) }));
         }
         if (enableClearButton && value) {
-            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: "impactMedium", onPress: handleClear, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityLabel: "Clear input button", testID: "clear-input-button", children: _jsx(XCircleIcon, { fill: "mono30" }) }) }));
+            return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: "impactMedium", onPress: handleClear, hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, accessibilityRole: "button", accessibilityHint: "Clears the input", accessibilityLabel: "Clear", testID: "clear-input-button", children: _jsx(XCircleIcon, { fill: "mono30" }) }) }));
         }
         if (secureTextEntry) {
             return (_jsx(Flex, { justifyContent: "center", position: "absolute", right: `${HORIZONTAL_PADDING}px`, top: hasTitle ? LABEL_HEIGHT : 0, height: INPUT_MIN_HEIGHT, zIndex: 100, ref: rightComponentRef, children: _jsx(Touchable, { haptic: true, onPress: () => {
@@ -257,7 +257,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
                             duration: 200,
                         });
                         setShowPassword(!showPassword);
-                    }, accessibilityLabel: showPassword ? "hide password button" : "show password button", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? _jsx(EyeClosedIcon, { fill: "mono30" }) : _jsx(EyeOpenedIcon, { fill: "mono60" }) }) }));
+                    }, accessibilityRole: "button", accessibilityLabel: showPassword ? "hide password icon" : "show password icon", accessibilityHint: showPassword ? "Hides the password" : "Shows the password", hitSlop: { bottom: 40, right: 40, left: 0, top: 40 }, children: !showPassword ? _jsx(EyeClosedIcon, { fill: "mono30" }) : _jsx(EyeOpenedIcon, { fill: "mono60" }) }) }));
         }
         return null;
     }, [
@@ -287,7 +287,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
         return (_jsx(Flex, { style: {
                 alignItems: "flex-end",
                 top: space(2),
-            }, children: _jsx(Touchable, { onPress: props.onHintPress, haptic: "impactLight", hitSlop: {
+            }, children: _jsx(Touchable, { accessibilityRole: "button", accessibilityHint: "hint", onPress: props.onHintPress, haptic: "impactLight", hitSlop: {
                     top: 5,
                     right: 10,
                     bottom: 5,
@@ -332,7 +332,7 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
         if (!props.title) {
             return null;
         }
-        return (_jsx(Flex, { flexDirection: "row", zIndex: 100, pointerEvents: "none", height: LABEL_HEIGHT, children: _jsxs(AnimatedText, { style: [labelStyles, labelAnimatedStyles], numberOfLines: 1, children: [" ", props.title, " "] }) }));
+        return (_jsx(Flex, { flexDirection: "row", zIndex: 100, pointerEvents: "none", height: LABEL_HEIGHT, children: _jsxs(AnimatedText, { style: [labelStyles, labelAnimatedStyles], numberOfLines: 1, accessibilityLabel: "input label", children: [" ", props.title, " "] }) }));
     }, [labelStyles, labelAnimatedStyles, props.title]);
     const renderAndroidPlaceholderMeasuringHack = useCallback(() => {
         if (Platform.OS === "ios" || !isArray(placeholder)) {

package/dist/elements/Input/Input.tests.js

@@ -24,21 +24,21 @@ describe("Input", () => {
     it("should render the clear button when input is not empty and pressing it should clear the input", async () => {
         renderWithWrappers(_jsx(Input, { testID: testID, placeholder: "USD", enableClearButton: true }));
         fireEvent(screen.getByTestId(testID), "onChangeText", "Banksy");
-        await screen.findByLabelText("Clear input button");
-        fireEvent.press(screen.getByLabelText("Clear input button"));
+        await screen.findByLabelText("Clear");
+        fireEvent.press(screen.getByLabelText("Clear"));
         expect(screen.queryByDisplayValue("Banksy")).toBeFalsy();
     });
     it("should show the correct show/hide password icon", () => {
         renderWithWrappers(_jsx(Input, { placeholder: "password", secureTextEntry: true }));
         screen.getByPlaceholderText("password");
-        screen.getByLabelText("show password button");
+        screen.getByLabelText("show password icon");
         fireEvent(screen.getByPlaceholderText("password"), "onChangeText", "123456");
-        fireEvent.press(screen.getByLabelText("show password button"));
-        expect(screen.queryByLabelText("show password button")).toBeFalsy();
-        screen.getByLabelText("hide password button");
-        fireEvent.press(screen.getByLabelText("hide password button"));
-        expect(screen.queryByLabelText("hide password button")).toBeFalsy();
-        screen.getByLabelText("show password button");
+        fireEvent.press(screen.getByLabelText("show password icon"));
+        expect(screen.queryByLabelText("show password icon")).toBeFalsy();
+        screen.getByLabelText("hide password icon");
+        fireEvent.press(screen.getByLabelText("hide password icon"));
+        expect(screen.queryByLabelText("hide password icon")).toBeFalsy();
+        screen.getByLabelText("show password icon");
     });
     it("enables scrolling when multiline is true", () => {
         renderWithWrappers(_jsx(Input, { testID: testID, multiline: true }));

package/dist/elements/LegacyScreen/LegacyScreen.js

@@ -46,7 +46,7 @@ const NAVBAR_HEIGHT = 44;
 export const Header = ({ onBack, title, onSkip }) => {
     useUpdateScreenContext({ header: "regular" });
     const insets = useSafeAreaInsets();
-    return (_jsxs(Flex, { mt: `${insets.top}px`, height: NAVBAR_HEIGHT, flexDirection: "row", alignItems: "center", justifyContent: "space-between", px: SCREEN_HORIZONTAL_PADDING, children: [_jsx(Flex, { children: !!onBack && (_jsx(BackButton, { onPress: onBack, style: { flex: 1, justifyContent: "center" }, hitSlop: { left: 20, right: 20 } })) }), !!title && _jsx(Text, { children: title }), !!onSkip && (_jsx(Touchable, { haptic: "impactLight", onPress: onSkip, children: _jsx(Flex, { height: "100%", justifyContent: "center", children: _jsx(Text, { textAlign: "right", variant: "xs", children: "Skip" }) }) }))] }));
+    return (_jsxs(Flex, { mt: `${insets.top}px`, height: NAVBAR_HEIGHT, flexDirection: "row", alignItems: "center", justifyContent: "space-between", px: SCREEN_HORIZONTAL_PADDING, children: [_jsx(Flex, { children: !!onBack && (_jsx(BackButton, { onPress: onBack, style: { flex: 1, justifyContent: "center" }, hitSlop: { left: 20, right: 20 } })) }), !!title && _jsx(Text, { children: title }), !!onSkip && (_jsx(Touchable, { accessibilityRole: "button", haptic: "impactLight", onPress: onSkip, children: _jsx(Flex, { height: "100%", justifyContent: "center", children: _jsx(Text, { textAlign: "right", variant: "xs", children: "Skip" }) }) }))] }));
 };
 /**
  * @deprecated Use `Screen.Header` instead.

package/dist/elements/LegacyTabs/StepTabs.js

@@ -20,7 +20,7 @@ export const StepTabs = ({ onTabPress, activeTab, tabs }) => {
         onTabPress(label, index);
     };
     return (_jsx(TabBarContainer, { scrollEnabled: false, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label, completed }, index) => {
-            return (_jsx(TouchableOpacity, { onPress: () => onTabSelect(label, index), children: _jsxs(Box, { width: tabWidth, justifyContent: "space-between", flexDirection: "row", alignItems: "center", onLayout: (e) => {
+            return (_jsx(TouchableOpacity, { accessibilityRole: "button", onPress: () => onTabSelect(label, index), children: _jsxs(Box, { width: tabWidth, justifyContent: "space-between", flexDirection: "row", alignItems: "center", onLayout: (e) => {
                         const layout = e.nativeEvent.layout;
                         setTabLayouts((layouts) => {
                             const result = layouts.slice(0);

package/dist/elements/LegacyTabs/Tab.js

@@ -4,7 +4,7 @@ import { useColor } from "../../utils/hooks";
 import { Text } from "../Text";
 export const TabV3 = ({ label, superscript, active, onLayout, onPress, style }) => {
     const color = useColor();
-    return (_jsx(Pressable, { onPress: onPress, children: ({ pressed }) => (_jsxs(View, { onLayout: onLayout, style: {
+    return (_jsx(Pressable, { accessibilityRole: "button", onPress: onPress, children: ({ pressed }) => (_jsxs(View, { onLayout: onLayout, style: {
                 alignItems: "center",
                 justifyContent: "center",
                 paddingHorizontal: 15,

package/dist/elements/MenuItem/MenuItem.js

@@ -6,5 +6,5 @@ import { Text } from "../Text";
 import { Touchable } from "../Touchable";
 export const MenuItem = ({ title, text, value, onPress, disabled = false, chevron = _jsx(ChevronIcon, { direction: "right", fill: "mono60" }), }) => {
     const color = useColor();
-    return (_jsx(Touchable, { onPress: onPress, underlayColor: color("mono5"), disabled: disabled, children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: 2, px: 2, pr: "15px", children: [_jsx(Flex, { flexDirection: "row", mr: 2, children: _jsx(Text, { variant: "md", color: "onBackgroundHigh", children: title }) }), !!value && (_jsx(Flex, { flex: 1, children: _jsx(Text, { variant: "md", color: "mono60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && _jsx(Flex, { ml: 1, children: chevron }), !!text && (_jsx(Text, { variant: "md", color: color("mono60"), children: text }))] }) }));
+    return (_jsx(Touchable, { accessibilityRole: "button", accessibilityState: { disabled }, accessibilityLabel: "Menu item ${title}", onPress: onPress, underlayColor: color("mono5"), disabled: disabled, children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: 2, px: 2, pr: "15px", children: [_jsx(Flex, { flexDirection: "row", mr: 2, children: _jsx(Text, { variant: "md", color: "onBackgroundHigh", children: title }) }), !!value && (_jsx(Flex, { flex: 1, children: _jsx(Text, { variant: "md", color: "mono60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && _jsx(Flex, { ml: 1, children: chevron }), !!text && (_jsx(Text, { variant: "md", color: color("mono60"), children: text }))] }) }));
 };

package/dist/elements/Message/Message.js

@@ -30,7 +30,7 @@ export const Message = ({ bodyTextStyle, children, containerStyle, IconComponent
                     }),
                 },
             ],
-        }, children: _jsxs(Flex, { px: 2, backgroundColor: color(colors[variant].background), ...containerStyle, children: [_jsxs(Flex, { py: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Flex, { flex: 1, children: [_jsxs(Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && (_jsx(Flex, { mr: 1, testID: "icon-component-left", children: _jsx(IconComponent, {}) })), !!title && (_jsx(Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title }))] }), !!text && (_jsx(Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text })), children] }), !!IconComponent && iconPosition === "right" && (_jsx(Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", testID: "icon-component-right", children: _jsx(IconComponent, {}) })), !!showCloseButton && (_jsx(Flex, { style: { marginTop: 2 }, children: _jsx(TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: _jsx(CloseIcon, { fill: colors[variant].icon }) }) }))] }), !!IconComponent && iconPosition === "bottom" && (_jsx(Flex, { mb: 1, justifyContent: "center", testID: "icon-component-bottom", children: _jsx(IconComponent, {}) }))] }) }));
+        }, children: _jsxs(Flex, { px: 2, backgroundColor: color(colors[variant].background), ...containerStyle, children: [_jsxs(Flex, { py: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Flex, { flex: 1, children: [_jsxs(Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && (_jsx(Flex, { mr: 1, testID: "icon-component-left", children: _jsx(IconComponent, {}) })), !!title && (_jsx(Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title }))] }), !!text && (_jsx(Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text })), children] }), !!IconComponent && iconPosition === "right" && (_jsx(Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", testID: "icon-component-right", children: _jsx(IconComponent, {}) })), !!showCloseButton && (_jsx(Flex, { style: { marginTop: 2 }, children: _jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityHint: "Dismiss message", testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: _jsx(CloseIcon, { fill: colors[variant].icon }) }) }))] }), !!IconComponent && iconPosition === "bottom" && (_jsx(Flex, { mb: 1, justifyContent: "center", testID: "icon-component-bottom", children: _jsx(IconComponent, {}) }))] }) }));
 };
 const colors = {
     default: {

package/dist/elements/Radio/RadioButton.js

@@ -45,7 +45,7 @@ export const RadioButton = ({ accessibilityState, block, disabled, error, onPres
                 radioButtonStyle,
             ], animate: ["borderColor"], duration: DURATION, children: !!selected &&
                 (!!disabled ? (_jsx(DisabledDot, { size: radioButtonSize })) : (_jsx(RadioDot, { size: radioButtonSize }))) }) }));
-    return (_jsx(TouchableWithoutFeedback, { accessibilityState: accessibilityState, onPress: (event) => {
+    return (_jsx(TouchableWithoutFeedback, { accessibilityRole: "radio", accessibilityState: accessibilityState, onPress: (event) => {
             if (disabled) {
                 return;
             }

package/dist/elements/Screen/Header.js

@@ -47,5 +47,5 @@ const Center = ({ animated, hideTitle, title }) => {
 const Left = ({ hideLeftElements, leftElements, onBack }) => {
     if (hideLeftElements)
         return null;
-    return (_jsx(_Fragment, { children: leftElements || (_jsx(Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: DEFAULT_HIT_SLOP, children: _jsx(ArrowLeftIcon, { fill: "onBackgroundHigh" }) })) }));
+    return (_jsx(_Fragment, { children: leftElements || (_jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: "Back", accessibilityHint: "Navigates to the previous screen", onPress: onBack, underlayColor: "transparent", hitSlop: DEFAULT_HIT_SLOP, children: _jsx(ArrowLeftIcon, { fill: "onBackgroundHigh" }) })) }));
 };

package/dist/elements/SearchInput/RoundSearchInput.js

@@ -84,7 +84,7 @@ export const RoundSearchInput = ({ value, placeholder, onLeftIconPress, ...rest
                     rest.onFocus?.(e);
                 }, enterKeyHint: "search", returnKeyType: "search" }), _jsx(Flex, { position: "absolute", height: SEARCH_INPUT_CONTAINER_HEIGHT, justifyContent: "center", alignItems: "center", style: {
                     paddingHorizontal: CONTAINER_HORIZONTAL_PADDING,
-                }, children: _jsx(Touchable, { onPress: () => {
+                }, children: _jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: `${isFocused ? "Back" : "Search"}`, onPress: () => {
                         ref.current?.blur();
                         setIsFocused(false);
                         onLeftIconPress?.();

package/dist/elements/Tabs/TabsContainer.js

@@ -14,7 +14,7 @@ const TAB_BAR_HEIGHT = 50;
 const PillTabItem = ({ focusedTab: focusedTabProp, ...props }) => {
     const [focusedTab, setFocusedTab] = useState(focusedTabProp.value);
     // We want to debounce the focusedTab value to avoid showing two pills at once
-    const debouncedFocusedTab = debounce(setFocusedTab, 30);
+    const debouncedFocusedTab = debounce(setFocusedTab, 50);
     useAnimatedReaction(() => focusedTabProp.value, (value) => {
         runOnJS(debouncedFocusedTab)(value);
     });

package/dist/elements/ToolTip/ToolTipFlyout.js

@@ -40,7 +40,7 @@ export const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onC
             handleClose();
         }
     };
-    return (_jsx(TouchableWithoutFeedback, { onPress: onPress, testID: testID, children: _jsx(Animated.View, { style: [
+    return (_jsx(TouchableWithoutFeedback, { accessibilityLabel: "Tooltip", accessibilityHint: "Tap to dismiss", onPress: onPress, testID: testID, children: _jsx(Animated.View, { style: [
                 {
                     backgroundColor: color("mono100"),
                     position: "absolute",

package/dist/elements/Touchable/Touchable.stories.js

@@ -8,4 +8,4 @@ export default {
     title: "Touchable",
     component: Touchable,
 };
-export const Examples = () => (_jsxs(List, { children: [_jsx(Touchable, { children: _jsx(Text, { children: "This is a text wrapped in a `Touchable`." }) }), _jsx(Touchable, { children: _jsxs(Flex, { width: 200, alignItems: "center", borderColor: "red", borderWidth: 1, children: [_jsx(TrashIcon, {}), _jsx(Text, { children: "This is a cell with an icon and a text, wrapped in a `Touchable`." })] }) })] }));
+export const Examples = () => (_jsxs(List, { children: [_jsx(Touchable, { accessibilityRole: "button", children: _jsx(Text, { children: "This is a text wrapped in a `Touchable`." }) }), _jsx(Touchable, { accessibilityRole: "button", children: _jsxs(Flex, { width: 200, alignItems: "center", borderColor: "red", borderWidth: 1, children: [_jsx(TrashIcon, {}), _jsx(Text, { children: "This is a cell with an icon and a text, wrapped in a `Touchable`." })] }) })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.6.0",
+  "version": "17.8.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",
@@ -107,6 +107,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-native-a11y": "^3.5.1",
     "eslint-plugin-storybook": "0.6.10",
     "eslint-plugin-testing-library": "6.4.0",
     "husky": "^8.0.3",