feat: change acccessibilityStates to accessibilityState (#1938)

Author: pan-pawel

src/components/BottomNavigation.tsx

@@ -865,7 +865,7 @@ class BottomNavigation extends React.Component<Props, State> {
                     : 'button',
                   accessibilityComponentType: 'button',
                   accessibilityRole: 'button',
-                  accessibilityStates: ['selected'],
+                  accessibilityState: { selected: true },
                   style: styles.item,
                   children: (
                     <View pointerEvents="none">

src/components/Button.tsx

@@ -274,7 +274,7 @@ class Button extends React.Component<Props, State> {
           accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
           accessibilityComponentType="button"
           accessibilityRole="button"
-          accessibilityStates={disabled ? ['disabled'] : []}
+          accessibilityState={{ disabled }}
           disabled={disabled}
           rippleColor={rippleColor}
           style={touchableStyle}

src/components/Checkbox/CheckboxAndroid.tsx

@@ -135,7 +135,7 @@ class CheckboxAndroid extends React.Component<Props, State> {
         accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
         accessibilityComponentType="button"
         accessibilityRole="button"
-        accessibilityStates={disabled ? ['disabled'] : []}
+        accessibilityState={{ disabled }}
         accessibilityLiveRegion="polite"
         style={styles.container}
       >

src/components/Checkbox/CheckboxIOS.tsx

@@ -82,7 +82,7 @@ class CheckboxIOS extends React.Component<Props> {
         accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
         accessibilityComponentType="button"
         accessibilityRole="button"
-        accessibilityStates={disabled ? ['disabled'] : []}
+        accessibilityState={{ disabled }}
         accessibilityLiveRegion="polite"
         style={styles.container}
       >

src/components/Chip.tsx

@@ -209,16 +209,17 @@ class Chip extends React.Component<Props, State> {
       : selectedBackgroundColor;
 
     const accessibilityTraits: AccessibilityTrait[] = ['button'];
-    const accessibilityState: AccessibilityState = {};
+    const accessibilityState: AccessibilityState = {
+      selected,
+      disabled,
+    };
 
     if (selected) {
       accessibilityTraits.push('selected');
-      accessibilityState.selected = true;
     }
 
     if (disabled) {
       accessibilityTraits.push('disabled');
-      accessibilityState.disabled = true;
     }
 
     return (

src/components/Drawer/DrawerItem.tsx

@@ -107,7 +107,7 @@ class DrawerItem extends React.Component<Props> {
           accessibilityTraits={active ? ['button', 'selected'] : 'button'}
           accessibilityComponentType="button"
           accessibilityRole="button"
-          accessibilityStates={active ? ['selected'] : []}
+          accessibilityState={{ selected: active }}
           accessibilityLabel={accessibilityLabel}
         >
           <View style={styles.wrapper}>

src/components/FAB/FAB.tsx

@@ -207,7 +207,7 @@ class FAB extends React.Component<Props, State> {
           accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
           accessibilityComponentType="button"
           accessibilityRole="button"
-          accessibilityStates={disabled ? ['disabled'] : []}
+          accessibilityState={{ disabled }}
           style={styles.touchable}
           testID={testID}
         >

src/components/IconButton.tsx

@@ -121,7 +121,7 @@ const IconButton = ({
       accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
       accessibilityComponentType="button"
       accessibilityRole="button"
-      accessibilityStates={disabled ? ['disabled'] : []}
+      accessibilityState={{ disabled }}
       disabled={disabled}
       hitSlop={
         // @ts-ignore - this should be fixed in react-theme-providersince withTheme() is not forwarding static property types

src/components/RadioButton/RadioButtonAndroid.tsx

@@ -147,7 +147,7 @@ class RadioButtonAndroid extends React.Component<Props, State> {
                 checked ? 'radiobutton_checked' : 'radiobutton_unchecked'
               }
               accessibilityRole="button"
-              accessibilityStates={disabled ? ['disabled'] : []}
+              accessibilityState={{ disabled }}
               accessibilityLiveRegion="polite"
               style={styles.container}
             >

src/components/RadioButton/RadioButtonIOS.tsx

@@ -105,7 +105,7 @@ class RadioButtonIOS extends React.Component<Props> {
                 checked ? 'radiobutton_checked' : 'radiobutton_unchecked'
               }
               accessibilityRole="button"
-              accessibilityStates={disabled ? ['disabled'] : []}
+              accessibilityState={{ disabled }}
               accessibilityLiveRegion="polite"
               style={styles.container}
             >