feat: support Accessibility

ant-design · Mar 1, 2022 · 90579f7 · 1uokun · Mar 7, 2022 · 90579f7
1 parent 3c13f53
commit 90579f7
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 30 deletions.
diff --git 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
@@ -16,18 +16,28 @@ 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)
           : TouchableNativeFeedback.SelectableBackground()
       }
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',
     },