Feat/accessibility phase 1

demo/src/screens/componentScreens/CheckboxScreen.js

@@ -8,7 +8,7 @@ class CheckboxScreen extends Component {
     value2: false,
     value3: true,
     value4: true,
-    value5: false,
+    value5: false
   };
 
   render() {

src/components/avatar/index.js

@@ -314,7 +314,9 @@ export default class Avatar extends PureBaseComponent {
         style={[this.getContainerStyle(), containerStyle]}
         testID={testID}
         onPress={onPress}
+        accessible
         accessibilityLabel={'Avatar'}
+        accessibilityRole={onPress ? 'button' : 'image'}
         {...this.extractAccessibilityProps()}
       >
         <View

src/components/checkbox/index.js

@@ -73,11 +73,24 @@ class Checkbox extends BaseComponent {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value) {
-      this.animateCheckbox(this.props.value);
+    const {value} = this.getThemeProps();
+    if (prevProps.value !== value) {
+      this.animateCheckbox(value);
     }
   }
 
+  getAccessibilityProps() {
+    const {accessibilityLabel, disabled, value} = this.getThemeProps();
+    const checkedState = value ? 'checked' : 'unchecked';
+
+    return {
+      accessible: true,
+      accessibilityLabel: accessibilityLabel ? `${accessibilityLabel} ${checkedState}` : `checkbox ${checkedState}`, //TODO: RN60 fix - label and role and convert to accessibilityActions
+      accessibilityRole: 'button',
+      accessibilityStates: disabled ? ['disabled'] : undefined
+    };
+  }
+
   generateStyles() {
     this.styles = createStyles(this.getThemeProps());
   }
@@ -95,6 +108,7 @@ class Checkbox extends BaseComponent {
 
   onPress = () => {
     const {disabled} = this.getThemeProps();
+
     if (!disabled) {
       _.invoke(this.props, 'onValueChange', !this.props.value);
     }
@@ -114,12 +128,10 @@ class Checkbox extends BaseComponent {
   }
 
   render() {
-    const {value, selectedIcon, color, iconColor, disabled, testID, ...others} = this.getThemeProps();
-    const accessibilityLabel = value ? 'checked' : 'unchecked';
-
+    const {selectedIcon, color, iconColor, disabled, testID, ...others} = this.getThemeProps();
     return (
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
+        {...this.getAccessibilityProps()}
         activeOpacity={1}
         testID={testID}
         {...others}

src/components/stepper/index.js

@@ -1,17 +1,17 @@
+import _ from 'lodash';
 import React from 'react';
-import {Text, View} from 'react-native';
+import {AccessibilityInfo, Text, View} from 'react-native';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
-import createStyles from './style';
-import {BaseComponent} from '../../commons';
 import StepperButton from './StepperButton';
+import createStyles from './style';
+import {PureBaseComponent} from '../../commons';
 
 /**
  * @description: Stepper component with increase and decrease buttons
  * @gif: https://media.giphy.com/media/3oFzm47bk0v4WV15O8/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FormScreen.js
  */
-export default class Stepper extends BaseComponent {
+export default class Stepper extends PureBaseComponent {
   static displayName = 'Stepper';
   static propTypes = {
     /**
@@ -48,6 +48,47 @@ export default class Stepper extends BaseComponent {
     };
   }
 
+  getAccessibilityProps() {
+    const {value} = this.state;
+    const {accessibilityLabel} = this.props;
+    const labelSuffix = `value = ${value}`;
+    return {
+      accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, ${labelSuffix}` : `Stepper, ${labelSuffix}`,
+      accessible: true,
+      accessibilityRole: 'adjustable',
+      accessibilityActions: ['decrement', 'increment'],
+      onAccessibilityAction: this.onAccessibilityAction
+    };
+  }
+
+  onAccessibilityAction = event => {
+    const {value} = this.state;
+    const {min, max} = this.props;
+    const eventMsgContext = event.nativeEvent.action === 'decrement' ? 'Minimum' : 'Maximum';
+    const stepperLimitMsg = `${eventMsgContext} stepper value, ${value}, reached`;
+
+    switch (event.nativeEvent.action) {
+      case 'decrement':
+        if (value <= min) {
+          AccessibilityInfo.announceForAccessibility(`${stepperLimitMsg}`);
+        } else {
+          this.updateValue(value - 1);
+          AccessibilityInfo.announceForAccessibility(value - 1);
+        }
+        break;
+      case 'increment':
+        if (value >= max) {
+          AccessibilityInfo.announceForAccessibility(`${stepperLimitMsg}`);
+        } else {
+          this.updateValue(value + 1);
+          AccessibilityInfo.announceForAccessibility(value + 1);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
   generateStyles() {
     this.styles = createStyles(this.props.size);
   }
@@ -80,7 +121,7 @@ export default class Stepper extends BaseComponent {
   render() {
     const {minusDisabled, plusDisabled, testID} = this.getDisabledState();
     return (
-      <View style={[this.styles.container, this.props.containerStyle]}>
+      <View {...this.getAccessibilityProps()} style={[this.styles.container, this.props.containerStyle]}>
         <View style={this.styles.title}>
           <Text testID={`${testID}.label`} style={this.styles.titleText}>
             {this.getLabel()}

src/components/switch/index.js

@@ -73,12 +73,25 @@ class Switch extends BaseComponent {
     this.styles = createStyles(this.getThemeProps());
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.value !== nextProps.value) {
-      this.toggle(nextProps.value);
+  componentDidUpdate(prevProps) {
+    const {value} = this.getThemeProps();
+    if (prevProps.value !== value) {
+      this.toggle(value);
     }
   }
 
+  getAccessibilityProps() {
+    const {accessibilityLabel, disabled, value} = this.getThemeProps();
+    const switchState = value ? 'on' : 'off';
+
+    return {
+      accessible: true,
+      accessibilityLabel: accessibilityLabel ? `${accessibilityLabel} ${switchState}` : `switch ${switchState}`, //TODO: RN60 fix label and role and convert to accessibilityActions
+      accessibilityRole: 'button',
+      accessibilityStates: disabled ? ['disabled'] : undefined
+    };
+  }
+
   toggle(value) {
     const {thumbPosition} = this.state;
 
@@ -140,12 +153,11 @@ class Switch extends BaseComponent {
   }
 
   render() {
-    const {value, ...others} = this.getThemeProps();
-    const accessibilityLabel = value ? 'switchOn' : 'switchOff';
+    const {...others} = this.getThemeProps();
 
     return (
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
+        {...this.getAccessibilityProps()}
         activeOpacity={1}
         {...others}
         style={this.getSwitchStyle()}