Added accessibility features

Also standardized prop ordering

1 files changed, 69 insertions, 47 deletions

diff --git a/App.tsx b/App.tsx
index 242ca47c..68f325ca 100644
--- a/App.tsx
+++ b/App.tsx
@@ -45,41 +45,63 @@ const App = () => {
         barStyle='light-content'
       />
       <View style={styles.container}>
-        <LinearGradient colors={['#8F00FF', '#6EE7E7']} style={styles.linearGradient} useAngle={true} angle={154.72} angleCenter={{x:0.5,y:0.5}}>
-          <Image
-            source={require('./src/assets/sign_in_logo.png')}
-            style={styles.logo}
-          />
-          <TextInput
-            style={styles.credentials}
-            placeholder="Username"
-            placeholderTextColor='#FFFFFF'
-            returnKeyType='next'
-            onSubmitEditing={() => {passwordInput.current.focus()}}
-            blurOnSubmit={false}
-            autoCompleteType='username'
-            textContentType='username'
-            keyboardType='ascii-capable'
-          />
-          <TextInput
-            ref={passwordInput}
-            style={styles.credentials}
-            placeholder="Password"
-            placeholderTextColor='#FFFFFF'
-            secureTextEntry={true}
-            autoCompleteType='password'
-            textContentType='password'
-            returnKeyType='go'
-          />
-          <TouchableOpacity style={styles.forgotPassword} onPress={() => Alert.alert("tagg! You're it!")} accessibilityLabel="Forgot password button">
-            <Text style={styles.forgotPasswordText}>Forgot password</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={styles.start} onPress={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}>
-            <Text style={styles.startText}>Let's Start!</Text>
-          </TouchableOpacity>
-          <Text style={styles.newUser}>
-            New to tagg? <Text style={styles.getStarted} onPress={() => Alert.alert("I get the tagg flip it and tumble it.")}>Get started!</Text>
-          </Text>
+        <LinearGradient
+          colors={['#8F00FF', '#6EE7E7']}
+          style={styles.linearGradient}
+          useAngle={true}
+          angle={154.72}
+          angleCenter={{x:0.5,y:0.5}}>
+            <Image
+              source={require('./src/assets/sign_in_logo.png')}
+              style={styles.logo}
+            />
+            <TextInput
+              accessible={true}
+              accessibilityLabel="Username text entry box"
+              accessibilityHint="Enter your tagg username here"
+              style={styles.credentials}
+              placeholder="Username"
+              placeholderTextColor='#FFFFFF'
+              autoCompleteType='username'
+              textContentType='username'
+              returnKeyType='next'
+              keyboardType='ascii-capable'
+              onSubmitEditing={() => {passwordInput.current.focus()}}
+              blurOnSubmit={false}
+            />
+            <TextInput
+              accessible={true}
+              accessibilityLabel="Password text entry box"
+              accessibilityHint="Enter your tagg password here"
+              style={styles.credentials}
+              placeholder="Password"
+              placeholderTextColor='#FFFFFF'
+              autoCompleteType='password'
+              textContentType='password'
+              returnKeyType='go'
+              onSubmitEditing={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}
+              ref={passwordInput}
+              secureTextEntry={true}
+            />
+            <TouchableOpacity
+              accessible={true}
+              accessibilityLabel="Forgot password button"
+              accessibilityHint="Select this if you forgot your tagg password"
+              style={styles.forgotPassword}
+              onPress={() => Alert.alert("tagg! You're it!")}>
+                <Text style={styles.forgotPasswordText}>Forgot password</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              accessible={true}
+              accessibilityLabel="Let's start button"
+              accessibilityHint="Select this after entering your tagg username and password"
+              style={styles.start}
+              onPress={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}>
+                <Text style={styles.startText}>Let's Start!</Text>
+            </TouchableOpacity>
+            <Text accessible={true} accessibilityLabel="New to tagg?" style={styles.newUser}>
+              New to tagg? <Text accessible={true} accessibilityLabel="Get started" accessibilityHint="Select this if you do not have a tagg account" style={styles.getStarted} onPress={() => Alert.alert("I get the tagg flip it and tumble it.")}>Get started!</Text>
+            </Text>
         </LinearGradient>
       </View>
     </>
@@ -89,7 +111,7 @@ const App = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
   linearGradient: {
     flex: 1,
@@ -98,50 +120,50 @@ const styles = StyleSheet.create({
   logo: {
     top: 165,
     width: 215,
-    height: 149
+    height: 149,
   },
   credentials: {
     top: 215,
+    width: 248,
+    height: 40,
+    fontSize: 20,
+    color: '#FFFFFF',
     borderColor: '#FFFDFD',
     borderWidth: 2,
     borderRadius: 20,
-    width: 248,
-    height: 40,
     paddingLeft: 13,
     marginVertical: 15,
-    fontSize: 15,
-    color: '#FFFFFF'
   },
   forgotPassword: {
-    top: 205,
-    left: -45,
+    top: 215,
+    left: -60,
   },
   forgotPasswordText: {
+    fontSize: 15,
     color: '#FFFFFF',
     textDecorationLine: 'underline',
-    fontSize: 20
   },
   start: {
     top: 220,
-    backgroundColor: '#FFFFFF',
     width: 144,
     height: 36,
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#FFFFFF',
     borderRadius: 20,
     marginTop: 15
   },
   startText: {
+    fontSize: 15,
     color: '#78A0EF',
     fontWeight: 'bold',
-    fontSize: 15
   },
   getStarted: {
     color: '#FFFFFF',
     textDecorationLine: 'underline'
   },
   newUser: {
-    top: 230,
+    top: 235,
     color: '#F4DDFF',
   }
 });