@artsy/palette-mobile 17.8.0 → 17.9.0

package/dist/elements/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { AccessibilityProps, Insets, TouchableWithoutFeedbackProps } from "react-native";
+import { Insets, TouchableOpacityProps } from "react-native";
 import { FlexProps } from "../Flex";
-export interface CheckboxProps extends Omit<TouchableWithoutFeedbackProps, "hitSlop">, Omit<FlexProps, "hitSlop"> {
+type CheckboxProps = Omit<TouchableOpacityProps, "hitSlop"> & Omit<FlexProps, "hitSlop"> & {
     hitSlop?: Insets;
     checked?: boolean;
     disabled?: boolean;
@@ -9,8 +9,9 @@ export interface CheckboxProps extends Omit<TouchableWithoutFeedbackProps, "hitS
     text?: React.ReactElement | string;
     subtitle?: React.ReactElement | string;
     children?: React.ReactElement | string;
-    checkboxAccessibilityProps?: AccessibilityProps;
-}
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+};
 export declare const Checkbox: React.FC<CheckboxProps>;
 interface CheckMarkProps {
     size: number;

package/dist/elements/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { themeGet } from "@styled-system/theme-get";
 import { useState } from "react";
-import { PixelRatio, StyleSheet, TouchableWithoutFeedback, } from "react-native";
+import { PixelRatio, Pressable, StyleSheet } from "react-native";
 import styled from "styled-components/native";
 import { CssTransition } from "../../animation/CssTransition";
 import { useTheme } from "../../utils/hooks/useTheme";
@@ -10,7 +10,7 @@ import { Flex } from "../Flex";
 import { Text } from "../Text";
 const CHECKBOX_SIZE = 20;
 const DURATION = 250;
-export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtitle, children, checkboxAccessibilityProps, ...restProps }) => {
+export const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtitle, children, accessibilityLabel, accessibilityHint, ...restProps }) => {
     const { color, space } = useTheme();
     const fontScale = PixelRatio.getFontScale();
     const checkboxSize = CHECKBOX_SIZE * fontScale;
@@ -43,15 +43,13 @@ 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");
-    // 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) => {
+    return (_jsx(Pressable, { accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: (event) => {
             if (disabled) {
                 return;
             }
             setChecked(!checked);
             onPress?.(event);
-        }, children: _jsxs(Flex, { flex: 1, ...restProps, children: [_jsxs(Flex, { flexDirection: "row", children: [_jsx(Flex, { mt: "2px", ...checkboxAccessibilityProps, children: _jsx(CssTransition, { style: [
+        }, children: _jsxs(Flex, { flex: 1, ...restProps, children: [_jsxs(Flex, { flexDirection: "row", children: [_jsx(Flex, { mt: "2px", children: _jsx(CssTransition, { style: [
                                     styles(fontScale).container,
                                     text || subtitle || children ? { marginRight: space(1) * fontScale } : {},
                                     checkboxStyle,

package/dist/elements/Checkbox/Checkbox.stories.d.ts

@@ -1,7 +1,17 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./Checkbox").CheckboxProps>;
+    component: import("react").FC<Omit<import("react-native/types").TouchableOpacityProps, "hitSlop"> & Omit<import("..").BoxProps, "hitSlop"> & {
+        hitSlop?: import("react-native/types").Insets | undefined;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        text?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        subtitle?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        children?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        accessibilityLabel?: string | undefined;
+        accessibilityHint?: string | undefined;
+    }>;
 };
 export default _default;
 export declare function Variants(): JSX.Element;

package/dist/elements/Radio/RadioButton.d.ts

@@ -6,6 +6,7 @@ export interface RadioButtonProps extends Omit<TouchableWithoutFeedbackProps, "h
     accessibilityState?: {
         checked: boolean;
     };
+    accessibilityLabel?: string;
     block?: boolean;
     disabled?: boolean;
     error?: boolean;

package/dist/elements/Radio/RadioButton.js

@@ -8,7 +8,7 @@ import { Flex } from "../Flex";
 import { Text } from "../Text";
 const RADIOBUTTON_SIZE = 20;
 const DURATION = 150;
-export const RadioButton = ({ accessibilityState, block, disabled, error, onPress, selected, subtitle, text, textVariant = "sm-display", ...restProps }) => {
+export const RadioButton = ({ accessibilityState, accessibilityLabel, block, disabled, error, onPress, selected, subtitle, text, textVariant = "sm-display", ...restProps }) => {
     const { color, space } = useTheme();
     const fontScale = PixelRatio.getFontScale();
     const radioButtonSize = RADIOBUTTON_SIZE * fontScale;
@@ -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, { accessibilityRole: "radio", accessibilityState: accessibilityState, onPress: (event) => {
+    return (_jsx(TouchableWithoutFeedback, { accessibilityRole: "radio", accessibilityLabel: accessibilityLabel, accessibilityState: accessibilityState, onPress: (event) => {
             if (disabled) {
                 return;
             }

package/dist/elements/Text/LinkText.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "./Text";
-export const LinkText = ({ style, ...props }) => (_jsx(Text, { color: "mono100", ...props, style: [style, { textDecorationLine: "underline" }] }));
+export const LinkText = ({ style, ...props }) => (_jsx(Text, { accessibilityRole: "link", color: "mono100", ...props, style: [style, { textDecorationLine: "underline" }] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.8.0",
+  "version": "17.9.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",