From 1b83fb1164c7731025ae73cb6849a2d7a24f3145 Mon Sep 17 00:00:00 2001
From: Wim Selles <wim@wswebcreation.nl>
Date: Sun, 9 Sep 2018 08:01:21 +0200
Subject: [PATCH 1/2] feature: add new button to support accessibility

- add testproperties method
- add accessibility to the screens
---
 js/components/Button.js     | 134 ++++++++++++++++++++++++++++++++++++
 js/components/LoginForm.js  |  23 ++++---
 js/config/TestProperties.js |  22 ++++++
 js/screens/Forms.js         |   6 +-
 js/screens/Home.js          |   6 +-
 js/screens/Login.js         |   6 +-
 js/screens/Swipe.js         |   6 +-
 7 files changed, 188 insertions(+), 15 deletions(-)
 create mode 100644 js/components/Button.js
 create mode 100644 js/config/TestProperties.js

diff --git a/js/components/Button.js b/js/components/Button.js
new file mode 100644
index 0000000..96c4797
--- /dev/null
+++ b/js/components/Button.js
@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewPropTypes
+} from 'react-native';
+import PropTypes from 'prop-types';
+import { testProperties } from '../config/TestProperties';
+
+class Button extends Component {
+  static propTypes = {
+    backgroundColor: PropTypes.string,
+    containerStyle: ViewPropTypes.style,
+    disabled: PropTypes.bool,
+    loading: PropTypes.bool,
+    onPress: PropTypes.func.isRequired,
+    testID: PropTypes.string,
+    text: PropTypes.string,
+    textStyle: Text.propTypes.style,
+  };
+
+  static defaultProps = {
+    backgroundColor: 'transparent',
+    containerStyle: null,
+    disabled: false,
+    loading: false,
+    testID: null,
+    text: null,
+    textStyle: null,
+  };
+
+  onButtonPress = () => {
+    const { onPress, loading } = this.props;
+
+    if (loading) return;
+
+    return onPress();
+  };
+
+  get textStyle() {
+    const { icon, loading, textStyle, disabled } = this.props;
+    const style = [styles.text];
+
+    if (icon || loading) {
+      style.push(styles.textOffset);
+    }
+
+    style.push(textStyle);
+
+    if (disabled) {
+      style.push(styles.disabledText);
+    }
+
+    return style;
+  }
+
+  renderText = () => {
+    const { text } = this.props;
+
+    if (this.props.loading) {
+      return null;
+    }
+
+    if (text) {
+      return <Text style={this.textStyle}>{text}</Text>;
+    }
+
+    return null;
+  };
+
+  renderIcon = () => {
+    if (this.props.loading) {
+      return <ActivityIndicator size="small" />;
+    }
+
+    return this.props.icon;
+  };
+
+  render() {
+    const {
+      text,
+      disabled,
+      testID,
+      backgroundColor,
+      containerStyle,
+    } = this.props;
+
+    return (
+      <TouchableOpacity
+        style={[styles.container, containerStyle]}
+        onPress={this.onButtonPress}
+        activeOpacity={disabled ? 1 : undefined}
+        {...testProperties(`button-${text||testID}`, true)}
+      >
+        <View style={[styles.content, disabled ? styles.disabledContent : { backgroundColor }]}>
+          {this.renderIcon()}
+          {this.renderText()}
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 40,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingHorizontal: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disabledContent: {
+    backgroundColor: '#E0E6E8',
+  },
+  text: {
+    textAlign: 'center',
+    color: '#000',
+    alignSelf: 'center',
+  },
+  textOffset: {
+    marginLeft: 5,
+  },
+  disabledText: {
+    color: '#252525',
+  },
+});
+
+export default Button;
diff --git a/js/components/LoginForm.js b/js/components/LoginForm.js
index ba512ce..e6005cb 100644
--- a/js/components/LoginForm.js
+++ b/js/components/LoginForm.js
@@ -13,9 +13,11 @@ import {
   KeyboardAvoidingView,
   Alert,
 } from 'react-native';
-import { Input, Button } from 'react-native-elements'
+import { Input } from 'react-native-elements'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { WINDOW_WIDTH } from '../config/Constants';
+import { testProperties } from '../config/TestProperties';
+import Button from './Button';
 import TitleDivider from './TitleDivider';
 
 // Enable LayoutAnimation on Android
@@ -134,18 +136,16 @@ class LoginForm extends Component {
           <TitleDivider text='Login / Sign up Form'/>
           <View style={styles.categoryContainer}>
             <Button
-              clear
               onPress={() => this.selectCategory(0)}
               containerStyle={{ flex: 1 }}
-              titleStyle={[styles.categoryText, isLoginPage && styles.selectedCategoryText]}
-              title={'Login'}
+              textStyle={[styles.categoryText, isLoginPage && styles.selectedCategoryText]}
+              text={'Login'}
             />
             <Button
-              clear
               onPress={() => this.selectCategory(1)}
               containerStyle={{ flex: 1 }}
-              titleStyle={[styles.categoryText, isSignUpPage && styles.selectedCategoryText]}
-              title={'Sign up'}
+              textStyle={[styles.categoryText, isSignUpPage && styles.selectedCategoryText]}
+              text={'Sign up'}
             />
           </View>
           <View style={styles.rowSelector}>
@@ -230,11 +230,10 @@ class LoginForm extends Component {
               errorMessage={isConfirmationValid ? null : 'Please enter the same password'}
             />}
             <Button
-              buttonStyle={styles.button}
-              containerStyle={{ marginTop: 32, flex: 0 }}
-              title={isLoginPage ? 'LOGIN' : 'SIGN UP'}
+              containerStyle={styles.button}
               onPress={isLoginPage ? this.login : this.signUp}
-              titleStyle={styles.buttonText}
+              text={isLoginPage ? 'LOGIN' : 'SIGN UP'}
+              textStyle={styles.buttonText}
               loading={isLoading}
               disabled={isLoading}
             />
@@ -321,6 +320,8 @@ const styles = StyleSheet.create({
     backgroundColor: '#000',
     borderColor: '#ea5906',
     borderWidth: 5,
+    marginTop: 32,
+    flex: 0
   },
 });
 
diff --git a/js/config/TestProperties.js b/js/config/TestProperties.js
new file mode 100644
index 0000000..cef55e5
--- /dev/null
+++ b/js/config/TestProperties.js
@@ -0,0 +1,22 @@
+/**
+ * Add a unique test id for iOS and Android
+ *
+ * @param {string} id
+ * @param {boolean} disableAccessible All touchable elements are accessible, meaning that it
+ * groups its children into a single selectable component, sometimes this is not needed for testing
+ *
+ * @return {object}
+ */
+import { IS_IOS } from './Constants';
+
+function testProperties(id, disableAccessible = false) {
+  const disableAccessibility = disableAccessible ? { accessible: false } : {};
+
+  if (IS_IOS) {
+    return { ...disableAccessibility, testID: id };
+  }
+
+  return { ...disableAccessibility, accessibilityLabel: id };
+}
+
+export { testProperties };
diff --git a/js/screens/Forms.js b/js/screens/Forms.js
index ed14cad..c1896ed 100644
--- a/js/screens/Forms.js
+++ b/js/screens/Forms.js
@@ -5,12 +5,16 @@ import {
 } from 'react-native';
 import FormComponents from '../components/FormComponents';
 import { STATUS_BAR_HEIGHT } from '../components/StatusBar';
+import { testProperties } from '../config/TestProperties';
 
 class FormsScreen extends Component {
 
   render() {
     return (
-      <ScrollView style={styles.container}>
+      <ScrollView
+        style={styles.container}
+        {...testProperties('Forms-screen')}
+      >
         <FormComponents/>
       </ScrollView>
     );
diff --git a/js/screens/Home.js b/js/screens/Home.js
index 000a394..b99489c 100644
--- a/js/screens/Home.js
+++ b/js/screens/Home.js
@@ -2,11 +2,15 @@ import React, { Component } from 'react';
 import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { STATUS_BAR_HEIGHT } from '../components/StatusBar';
+import { testProperties } from '../config/TestProperties';
 
 class HomeScreen extends Component {
   render() {
     return (
-      <ScrollView style={styles.container}>
+      <ScrollView
+        style={styles.container}
+        {...testProperties('Home-screen')}
+      >
         <View style={styles.contentContainer}>
           <Image
             style={styles.logo}
diff --git a/js/screens/Login.js b/js/screens/Login.js
index fca217b..a7d0013 100644
--- a/js/screens/Login.js
+++ b/js/screens/Login.js
@@ -2,12 +2,16 @@ import React, { Component } from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 import LoginForm from '../components/LoginForm';
 import { STATUS_BAR_HEIGHT } from '../components/StatusBar';
+import { testProperties } from '../config/TestProperties';
 
 class LoginScreen extends Component {
 
   render() {
     return (
-      <ScrollView style={styles.container}>
+      <ScrollView
+        style={styles.container}
+        {...testProperties('Login-screen')}
+      >
         <LoginForm/>
       </ScrollView>
     );
diff --git a/js/screens/Swipe.js b/js/screens/Swipe.js
index 5e7a3b0..fffbecf 100644
--- a/js/screens/Swipe.js
+++ b/js/screens/Swipe.js
@@ -11,6 +11,7 @@ import TitleDivider from '../components/TitleDivider';
 import Carousel, { Pagination } from 'react-native-snap-carousel';
 import SliderEntry, { SLIDE_WIDTH } from '../components/SliderEntry';
 import { WINDOW_WIDTH } from '../config/Constants';
+import { testProperties } from '../config/TestProperties';
 
 const ENTRIES1 = [
   {
@@ -71,7 +72,10 @@ class SwipeScreen extends Component {
     const { slider1ActiveSlide } = this.state;
 
     return (
-      <View style={styles.container}>
+      <View
+        style={styles.container}
+        {...testProperties('Swipe-screen')}
+      >
         <TitleDivider text='Swipe horizontal'/>
         <View>
           <Carousel

From f8f6fa49d64fcbc588aa16c78c22cb334f490c83 Mon Sep 17 00:00:00 2001
From: Wim Selles <wim@wswebcreation.nl>
Date: Mon, 17 Sep 2018 06:41:58 +0200
Subject: [PATCH 2/2] feature: add accessibility labels

---
 index.js                        |  3 ++
 js/components/Button.js         | 11 ++++--
 js/components/FormComponents.js | 69 +++++++++++++++++++++++----------
 js/components/LoginForm.js      |  5 +++
 js/components/SliderEntry.js    |  2 +
 js/screens/Swipe.js             |  2 +-
 package.json                    |  1 +
 7 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/index.js b/index.js
index a6660bc..29dc2eb 100644
--- a/index.js
+++ b/index.js
@@ -4,4 +4,7 @@ import {AppRegistry} from 'react-native';
 import App from './js/App';
 import {name as appName} from './app.json';
 
+// Disable the yellow box
+console.disableYellowBox = true;
+
 AppRegistry.registerComponent(appName, () => App);
diff --git a/js/components/Button.js b/js/components/Button.js
index 96c4797..dbdc5c2 100644
--- a/js/components/Button.js
+++ b/js/components/Button.js
@@ -30,13 +30,18 @@ class Button extends Component {
     testID: null,
     text: null,
     textStyle: null,
+    onDisabledPress: () => {},
   };
 
   onButtonPress = () => {
-    const { onPress, loading } = this.props;
+    const { disabled, onDisabledPress, onPress, loading } = this.props;
 
     if (loading) return;
 
+    if (disabled) {
+      return onDisabledPress();
+    }
+
     return onPress();
   };
 
@@ -73,7 +78,7 @@ class Button extends Component {
 
   renderIcon = () => {
     if (this.props.loading) {
-      return <ActivityIndicator size="small" />;
+      return <ActivityIndicator size="small"/>;
     }
 
     return this.props.icon;
@@ -93,7 +98,7 @@ class Button extends Component {
         style={[styles.container, containerStyle]}
         onPress={this.onButtonPress}
         activeOpacity={disabled ? 1 : undefined}
-        {...testProperties(`button-${text||testID}`, true)}
+        {...testProperties(`button-${testID || text}`, true)}
       >
         <View style={[styles.content, disabled ? styles.disabledContent : { backgroundColor }]}>
           {this.renderIcon()}
diff --git a/js/components/FormComponents.js b/js/components/FormComponents.js
index 0cbe960..1dc209c 100644
--- a/js/components/FormComponents.js
+++ b/js/components/FormComponents.js
@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
-import { Alert, StyleSheet, Text, View } from 'react-native';
+import { Alert, CheckBox, StyleSheet, Switch, Text, View } from 'react-native';
 import SelectInput from '@tele2/react-native-select-input/src/SelectInput';
-import { Button, CheckBox, Input } from 'react-native-elements';
+import { Input } from 'react-native-elements';
 import { WINDOW_WIDTH } from '../config/Constants';
+import { testProperties } from '../config/TestProperties';
+import Button from './Button';
 import TitleDivider from './TitleDivider';
 
 const options = [
@@ -23,7 +25,7 @@ class FormComponents extends Component {
     super();
 
     this.state = {
-      isCheckBoxActive: true,
+      isSwitchActive: false,
       inputText: '',
     };
   }
@@ -42,7 +44,7 @@ class FormComponents extends Component {
   }
 
   render() {
-    const { isCheckBoxActive } = this.state;
+    const { isSwitchActive } = this.state;
 
     return (
       <View style={styles.container}>
@@ -63,19 +65,29 @@ class FormComponents extends Component {
               inputStyle={styles.inputStyle}
               maxLength={30}
               multiline={false}
+              {...testProperties('text-input')}
             />
             <Text style={styles.inputTextLabel}>You have typed:</Text>
-            <Text style={styles.inputText}>{this.state.inputText}</Text>
+            <Text
+              style={styles.inputText}
+              {...testProperties('input-text-result')}
+            >{this.state.inputText}</Text>
+          </View>
+          <Text style={styles.labelText}>Switch</Text>
+          <View style={styles.switchContainer}>
+            <Switch
+              value={this.state.isSwitchActive}
+              onValueChange={() => this.setState({ isSwitchActive: !isSwitchActive })}
+              style={styles.switch}
+              tintColor={'#FF5C06'}
+              onTintColor={'#FF5C06'}
+              thumbTintColor={'#e3e3e3'}
+              {...testProperties('switch')}
+            />
+            <Text {...testProperties('switch-text')}>
+              {`Click to turn the switch ${this.state.isSwitchActive ? 'OFF' : 'ON'}`}
+            </Text>
           </View>
-          <Text style={styles.labelText}>Checkbox</Text>
-          <CheckBox
-            title={`Click here to ${isCheckBoxActive ? 'un' : ''}check me`}
-            checked={this.state.isCheckBoxActive}
-            onPress={() => this.setState({ isCheckBoxActive: !isCheckBoxActive })}
-            containerStyle={styles.checkBoxContainer}
-            textStyle={styles.checkBoxText}
-            checkedColor='#ea5906'
-          />
           <SelectInput
             label='Dropdown'
             placeholder='Select a value here'
@@ -83,21 +95,22 @@ class FormComponents extends Component {
             containerStyle={styles.selectInput}
             labelStyle={styles.selectInputLabel}
             innerContainerStyle={styles.selectInputInnerContainer}
+            testProperty='Dropdown'
           />
           <View>
             <Text style={styles.labelText}>Buttons</Text>
             <View style={styles.buttonContainer}>
               <Button
-                buttonStyle={styles.button}
-                title='Active'
+                containerStyle={styles.button}
+                text='Active'
                 onPress={this.showAlert}
-                titleStyle={styles.buttonText}
+                textStyle={styles.buttonText}
                 disabled={false}
               />
               <Button
-                buttonStyle={[styles.button, { marginLeft: 10 }]}
-                title='Inactive'
-                titleStyle={styles.buttonText}
+                containerStyle={[styles.button, { marginLeft: 10 }]}
+                text='Inactive'
+                textStyle={styles.buttonText}
                 disabled={true}
               />
             </View>
@@ -122,7 +135,7 @@ const styles = StyleSheet.create({
     borderColor: '#ea5906',
     borderWidth: 5,
   },
-  labelText:{
+  labelText: {
     fontSize: 16,
     marginLeft: 20,
   },
@@ -170,6 +183,20 @@ const styles = StyleSheet.create({
     borderColor: '#e3e3e3',
     margin: 20
   },
+  switchContainer: {
+    flex: 1,
+    paddingLeft: 10,
+    borderBottomColor: '#ea5906',
+    borderBottomWidth: 1,
+    marginLeft: 10,
+    marginRight: 10,
+    paddingBottom: 10,
+    alignItems: 'flex-start',
+  },
+  switch: {
+    marginTop: 10,
+    marginBottom: 10,
+  },
   selectInput: {
     paddingLeft: 10,
     paddingRight: 10,
diff --git a/js/components/LoginForm.js b/js/components/LoginForm.js
index e6005cb..cce3466 100644
--- a/js/components/LoginForm.js
+++ b/js/components/LoginForm.js
@@ -140,12 +140,14 @@ class LoginForm extends Component {
               containerStyle={{ flex: 1 }}
               textStyle={[styles.categoryText, isLoginPage && styles.selectedCategoryText]}
               text={'Login'}
+              testID={'login-container'}
             />
             <Button
               onPress={() => this.selectCategory(1)}
               containerStyle={{ flex: 1 }}
               textStyle={[styles.categoryText, isSignUpPage && styles.selectedCategoryText]}
               text={'Sign up'}
+              testID={'sign-up-container'}
             />
           </View>
           <View style={styles.rowSelector}>
@@ -176,6 +178,7 @@ class LoginForm extends Component {
               onSubmitEditing={() => this.passwordInput.focus()}
               onChangeText={email => this.setState({ email })}
               errorMessage={isEmailValid ? null : 'Please enter a valid email address'}
+              {...testProperties('input-email')}
             />
             <Input
               leftIcon={
@@ -201,6 +204,7 @@ class LoginForm extends Component {
               onSubmitEditing={() => isSignUpPage ? this.confirmationInput.focus() : this.login()}
               onChangeText={(password) => this.setState({ password })}
               errorMessage={isPasswordValid ? null : 'Please enter at least 8 characters'}
+              {...testProperties('input-password')}
             />
             {isSignUpPage &&
             <Input
@@ -228,6 +232,7 @@ class LoginForm extends Component {
               onSubmitEditing={this.signUp}
               onChangeText={passwordConfirmation => this.setState({ passwordConfirmation })}
               errorMessage={isConfirmationValid ? null : 'Please enter the same password'}
+              {...testProperties('input-repeat-password')}
             />}
             <Button
               containerStyle={styles.button}
diff --git a/js/components/SliderEntry.js b/js/components/SliderEntry.js
index 74d7258..dd6c8e5 100644
--- a/js/components/SliderEntry.js
+++ b/js/components/SliderEntry.js
@@ -9,6 +9,7 @@ import { Linking, View, Text, StyleSheet, TouchableOpacity } from 'react-native'
 import PropTypes from 'prop-types';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { IS_IOS, WINDOW_HEIGHT, WINDOW_WIDTH } from '../config/Constants';
+import { testProperties } from '../config/TestProperties';
 
 const itemHorizontalMargin = Math.round(WINDOW_WIDTH * 0.02);
 export const SLIDE_WIDTH = Math.round(WINDOW_WIDTH * 0.75) + itemHorizontalMargin * 2;
@@ -26,6 +27,7 @@ class SliderEntry extends Component {
         activeOpacity={1}
         style={styles.slideInnerContainer}
         onPress={() => Linking.openURL(link)}
+        {...testProperties('card', true)}
       >
         <View style={styles.slideIconContainer}>
           <Icon name={icon} size={150} style={styles.slideIcon}/>
diff --git a/js/screens/Swipe.js b/js/screens/Swipe.js
index fffbecf..f748c2e 100644
--- a/js/screens/Swipe.js
+++ b/js/screens/Swipe.js
@@ -77,7 +77,7 @@ class SwipeScreen extends Component {
         {...testProperties('Swipe-screen')}
       >
         <TitleDivider text='Swipe horizontal'/>
-        <View>
+        <View {...testProperties('Carousel')}>
           <Carousel
             ref={c => this._slider1Ref = c}
             data={ENTRIES1}
diff --git a/package.json b/package.json
index ebb325a..7961b11 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "build.clear.cache": "watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro* && rm -rf $TMPDIR/haste-*",
+    "android": "react-native run-android",
     "android.clear.build": "npm run build.clear.cache && rm -rf android/app/build",
     "android": "react-native run-android",
     "android.build.js": "react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug",