From 90579f75462fc8472b484752808d9a0714077f79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BD=97=E5=9D=A4?= <luokun199503@qq.com>
Date: Tue, 1 Mar 2022 18:24:15 +0800
Subject: [PATCH] feat: support Accessibility

---
 components/activity-indicator/index.tsx |  5 +--
 components/button/ButtonWave.tsx        | 14 ++++++--
 components/button/index.tsx             |  2 ++
 components/checkbox/Checkbox.tsx        | 24 +++++++------
 components/radio/Radio.tsx              |  5 +++
 components/radio/RadioGroup.tsx         |  6 +++-
 components/switch/PropsType.tsx         |  5 ++-
 components/switch/Switch.tsx            | 45 +++++++++++++++++++------
 components/switch/style/index.tsx       |  8 ++---
 9 files changed, 84 insertions(+), 30 deletions(-)

diff --git a/components/activity-indicator/index.tsx b/components/activity-indicator/index.tsx
index 8e3344b0..5fab8209 100644
--- a/components/activity-indicator/index.tsx
+++ b/components/activity-indicator/index.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import {
   ActivityIndicator,
+  ColorValue,
+  StyleProp,
   Text,
   View,
-  StyleProp,
   ViewStyle,
 } from 'react-native'
 import { WithTheme, WithThemeStyles } from '../style'
@@ -12,7 +13,7 @@ import ActivityIndicatorStyles, { ActivityIndicatorStyle } from './style/index'
 export interface ActivityIndicatorNativeProps
   extends WithThemeStyles<ActivityIndicatorStyle> {
   styles?: { [key: string]: StyleProp<ViewStyle> }
-  color?: string
+  color?: ColorValue
   animating?: boolean
   toast?: boolean
   size?: number | 'large' | 'small'
diff --git a/components/button/ButtonWave.tsx b/components/button/ButtonWave.tsx
index 9384f86f..11813e25 100644
--- a/components/button/ButtonWave.tsx
+++ b/components/button/ButtonWave.tsx
@@ -16,8 +16,13 @@ interface ButtonWaveProps extends TouchableNativeFeedbackProps {
 
 export default (props: ButtonWaveProps) => {
   const { Color, ...restProps } = props
+  const accessibilityState = {
+    disabled: !!props.disabled,
+  }
   return IS_ANDROID ? (
     <TouchableNativeFeedback
+      accessibilityRole="button"
+      accessibilityState={accessibilityState}
       background={
         Platform.Version >= 21
           ? TouchableNativeFeedback.Ripple(Color || '', true, 13)
@@ -25,9 +30,14 @@ export default (props: ButtonWaveProps) => {
       }
       useForeground={true}
       {...restProps}>
-      {props.children}
+      <>{props.children}</>
     </TouchableNativeFeedback>
   ) : (
-    <Pressable {...restProps}>{props.children}</Pressable>
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={accessibilityState}
+      {...restProps}>
+      {props.children}
+    </Pressable>
   )
 }
diff --git a/components/button/index.tsx b/components/button/index.tsx
index e8528f8e..c41aff8d 100644
--- a/components/button/index.tsx
+++ b/components/button/index.tsx
@@ -117,6 +117,8 @@ export default class Button extends React.Component<ButtonProps, any> {
 
           return (
             <TouchableHighlight
+              accessibilityRole="button"
+              accessibilityState={{ disabled: !!disabled }}
               activeOpacity={0.4}
               {...restProps}
               style={wrapperStyle}
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index e7c3b2f0..e7fe47bc 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import useMergedState from 'rc-util/lib/hooks/useMergedState'
 import * as React from 'react'
 import {
+  AccessibilityProps,
   Animated,
   Easing,
   Pressable,
@@ -19,7 +20,8 @@ import CheckboxStyles, { CheckboxStyle } from './style/index'
 
 export interface CheckboxProps
   extends CheckboxPropsType,
-    WithThemeStyles<CheckboxStyle> {
+    WithThemeStyles<CheckboxStyle>,
+    AccessibilityProps {
   style?: StyleProp<ViewStyle>
 }
 //TODO: ref interface
@@ -139,20 +141,22 @@ const InternalCheckbox = (
               ? _styles.checkbox_checked?.borderColor
               : _styles.checkbox?.borderColor
             return (
-              <View style={[_styles[`${prefixCls}_wrapper`], style]}>
+              <View
+                accessibilityRole="checkbox"
+                accessibilityState={{ checked: innerChecked, disabled }}
+                style={[_styles[`${prefixCls}_wrapper`], style]}>
                 <View style={_styles.checkbox_wave}>
                   <ButtonWave
+                    style={antd_checkbox}
                     Color={Color}
                     disabled={disabled}
                     onPress={this.onPress}>
-                    <View style={antd_checkbox}>
-                      <Animated.View
-                        style={[antd_checkbox_inner, transitionOpacity]}
-                      />
-                      <Animated.View
-                        style={[transitionTransform, antd_checkbox_inner_after]}
-                      />
-                    </View>
+                    <Animated.View
+                      style={[antd_checkbox_inner, transitionOpacity]}
+                    />
+                    <Animated.View
+                      style={[transitionTransform, antd_checkbox_inner_after]}
+                    />
                   </ButtonWave>
                 </View>
                 <Pressable disabled={disabled} onPress={this.onPress}>
diff --git a/components/radio/Radio.tsx b/components/radio/Radio.tsx
index 998228f7..3f13ae92 100644
--- a/components/radio/Radio.tsx
+++ b/components/radio/Radio.tsx
@@ -44,6 +44,11 @@ const InternalRadio = (
     <WithTheme themeStyles={RadioStyle} styles={styles}>
       {(_styles) => (
         <Checkbox
+          accessibilityRole="radio"
+          accessibilityState={{
+            checked: restProps.checked,
+            disabled: restProps.disabled,
+          }}
           {...restProps}
           ref={ref}
           indeterminate={false}
diff --git a/components/radio/RadioGroup.tsx b/components/radio/RadioGroup.tsx
index 730bc7e5..889aafa1 100644
--- a/components/radio/RadioGroup.tsx
+++ b/components/radio/RadioGroup.tsx
@@ -75,7 +75,11 @@ const RadioGroup = React.forwardRef<any, RadioGroupProps>(
       }
 
       return (
-        <View style={style} ref={ref}>
+        <View
+          accessibilityRole="radiogroup"
+          accessibilityState={{ checked: value, disabled }}
+          style={style}
+          ref={ref}>
           <RadioGroupContextProvider
             value={{
               onChange: onRadioChange,
diff --git a/components/switch/PropsType.tsx b/components/switch/PropsType.tsx
index 7892a4c0..91fe0173 100644
--- a/components/switch/PropsType.tsx
+++ b/components/switch/PropsType.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleProp, ViewStyle } from 'react-native'
+import { ColorValue, StyleProp, ViewStyle } from 'react-native'
 
 export type SwitchChangeEventHandler = (checked: boolean) => void
 export type SwitchClickEventHandler = SwitchChangeEventHandler
@@ -9,6 +9,9 @@ export interface SwitchPropsType {
   checked?: boolean
   defaultChecked?: boolean
   color?: string
+  trackColor?: { false?: ColorValue; true?: ColorValue }
+  thumbColor?: ColorValue
+  thumbTintColor?: ColorValue
   disabled?: boolean
   loading?: boolean
   styles?: { [key: string]: StyleProp<ViewStyle> }
diff --git a/components/switch/Switch.tsx b/components/switch/Switch.tsx
index b9f1743f..37967488 100644
--- a/components/switch/Switch.tsx
+++ b/components/switch/Switch.tsx
@@ -23,6 +23,9 @@ const AntmSwitch = ({
   unCheckedChildren,
   onPress,
   onChange,
+  trackColor,
+  thumbColor,
+  thumbTintColor,
   ...restProps
 }: SwitchPropsType) => {
   devWarning(
@@ -61,7 +64,7 @@ const AntmSwitch = ({
   const transitionWidth = {
     width: animatedValue2.interpolate({
       inputRange: [0, 1],
-      outputRange: [18, 24],
+      outputRange: [22, 28],
     }),
     left: !innerChecked
       ? animatedValue.interpolate({
@@ -143,16 +146,33 @@ const AntmSwitch = ({
           .map((a) => styles[a])
 
         // color props
-        const SwitchCheckedColor = {
-          backgroundColor: color,
-          borderColor: color,
-        }
         const Color = innerChecked
-          ? color || theme.switch_fill
-          : theme.switch_unchecked
+          ? color || trackColor?.true || theme.switch_fill
+          : trackColor?.false || theme.switch_unchecked
+
+        const SwitchTrackColor = {
+          backgroundColor: Color,
+          borderColor: Color,
+          opacity: Color ? (disabled ? 0.6 : 1) : 1,
+        }
+
+        const SwitchThumbColor = JSON.parse(
+          JSON.stringify({
+            backgroundColor: innerChecked ? thumbTintColor : thumbColor,
+          }),
+        )
+
+        const accessibilityState = {
+          checked: innerChecked,
+          disabled,
+          busy: loading,
+        }
 
         return (
-          <View style={[styles[prefixCls], { padding: 1 }]}>
+          <View
+            accessibilityRole="switch"
+            accessibilityState={accessibilityState}
+            style={[styles[prefixCls], { padding: 1 }]}>
             <ButtonWave
               {...restProps}
               Color={Color}
@@ -163,9 +183,14 @@ const AntmSwitch = ({
               <View
                 style={[
                   ant_switch,
-                  Boolean(color && innerChecked) && SwitchCheckedColor,
+                  Boolean(trackColor || color) && SwitchTrackColor,
                 ]}>
-                <Animated.View style={[ant_switch_handle, transitionWidth]}>
+                <Animated.View
+                  style={[
+                    ant_switch_handle,
+                    SwitchThumbColor,
+                    transitionWidth,
+                  ]}>
                   {loading && (
                     <RNActivityIndicator
                       color={Color}
diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx
index 0cf44e4e..3f95edae 100644
--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@@ -20,8 +20,8 @@ export default (theme: Theme) =>
   StyleSheet.create<SwitchStyle>({
     switch: {
       position: 'relative',
-      minWidth: 44,
-      minHeight: 22,
+      minWidth: 50,
+      minHeight: 25,
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
@@ -34,8 +34,8 @@ export default (theme: Theme) =>
     // handle
     switch_handle: {
       position: 'absolute',
-      width: 18,
-      height: 18,
+      width: 22,
+      height: 22,
       borderRadius: 999,
       backgroundColor: '#ffffff',
     },