add accessbility features and a base readme for the template after initialization (#125)

Author: Jenn

template/README.md

@@ -0,0 +1,92 @@
+# React Native Project Title
+
+One Paragraph of project description goes here
+
+## Table of Contents
+
+- [Getting Started](getting-started)
+  - [Prerequisites](prerequisites)
+  - [Installing](installing)
+- [Develop for Accessibility](develop-for-accessibility)
+- [Running The Tests](running-the-tests)
+  - [E2E Tests](e2e-tests)
+- [Deployment](deployment)
+- [Built With](built-with)
+
+
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the app to the respective app stores.
+
+### Prerequisites
+
+In order to get this project running locally, please make sure you ahve followed the "React Native CLI Quickstart" in the [React Native "Getting Started"](https://facebook.github.io/react-native/docs/getting-started) guide.
+
+### Installing
+
+To get the app running locally, please follow these steps:
+
+1. From the root, install the JavaScript dependencies:
+
+```sh
+yarn install
+```
+
+2. Install the iOS dependencies:
+
+```sh
+cd ios && pod install
+```
+
+2. Start the app on iOS by running:
+
+```sh
+yarn ios
+```
+
+4. Start the app on Android by running (make sure you have a device running on the emulator):
+
+```sh
+yarn android
+```
+
+If all worked correctly, you should have the app running on both the iOS and Android simulators.
+
+
+## Develop for Accessibility
+
+Mobile applications should be developed with accessbility in mind. Some simple steps to take include adding accessbility labels and roles to elements within your screens. Some convience features have been added to the Styled Text and Button component to ensure the ease of use.
+
+
+## Running the tests
+
+We use `jest` for testing business logic and functions. To run the test suites, run:
+
+```sh
+yarn test
+```
+
+
+### E2E Tests
+
+End to End (E2E) tests are for full integration tests, clicks, screen elements, etc. For this we use [Detox](https://github.com/wix/Detox/)
+
+To run tests you must have the applesimutils installed per the [Getting Started on Detox](https://github.com/wix/Detox/blob/master/docs/Introduction.GettingStarted.md). Tests can be run locally for iOS and Android with the following commands:
+
+```sh
+yarn e2e:ios-debug
+yarn e2e:ios
+yarn e2e:android-debug
+yarn e2e:android
+```
+Each of these will test the platform in either release or debug mode as specified.
+
+
+## Deployment
+
+Add additional notes about how to deploy this on a live system
+
+## Built With
+
+- [React Native](https://facebook.github.io/react-native/) - The mobile framework used
+- [TypeScript](https://typescriptlang.org/) - Static typing
+- [styled-system](https://emotion.sh/) - the system we levarage for styling components
+- [Emotion](https://emotion.sh/) - CSS-in-JS (used with `styled-system`)

template/src/components/Button/Button.tsx

@@ -13,10 +13,16 @@ import { Container } from '../Container';
 import { Text } from '../Text';
 import { Touchable } from '../Touchable';
 import { colors } from '../../styles';
+import { AccessbilityRole } from '../../types/AccessibilityRole';
 
 interface ButtonProps {
-  /** accessibility label */
+  /**
+  * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+  * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+  */
   accessibilityLabel: string;
+  /** Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.  */
+  accessbilityRole?: AccessbilityRole;
   /** disabled button state */
   disabled?: boolean;
   /** loading button state */

template/src/components/Login/Login.tsx

@@ -48,13 +48,15 @@ export const Login: FC<ComponentProps> = ({
       </Text>
       <TextInput
         placeholder="Email"
+        accessibilityLabel="Email Address Input"
         icon={<Icon name="envelope" type={'font-awesome'} color={colors.lightGray} />}
         marginTop={2}
         borderRadius={5}
         borderColor={colors.lightGray}
       />
       <TextInput
         placeholder="Password"
+        accessibilityLabel="Password Input"
         icon={<Icon name="key" type={'font-awesome'} color={colors.lightGray} />}
         marginTop={2}
         borderRadius={5}
@@ -66,6 +68,8 @@ export const Login: FC<ComponentProps> = ({
         }}
         fullWidth
         alignItems={'flex-end'}
+        accessibilityLabel="Forgot Password Button"
+        accessbilityRole="button"
       >
         <Text fontSize={1} marginTop={2} color={colors.blue}>
           Forgot Password?
@@ -80,6 +84,7 @@ export const Login: FC<ComponentProps> = ({
         onPress={() => {
           loginPress();
         }}
+        accessibilityLabel="Login Button"
       />
 
       <Container flexDirection={'row'} marginTop={20}>
@@ -100,6 +105,7 @@ export const Login: FC<ComponentProps> = ({
         onPress={() => {
           registrationPress();
         }}
+        accessibilityLabel="Create Account Button"
       />
     </Container>
   );

template/src/components/TextInput/TextInput.tsx

@@ -23,9 +23,15 @@ import { Text } from '../Text';
 import { colors } from '../../styles';
 
 interface TextInputProps extends TextInputBaseProps {
-  /** An optional header label to render about the input */
+  /** An optional header label to render above the input */
   topLabel?: string;
+  //** An option icon to be displayed to the left of the input box */
   icon?: Icon;
+  /**
+  * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+  * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+  */
+   accessibilityLabel?: string;
 }
 
 type ComponentProps = TextInputProps &
@@ -53,6 +59,7 @@ const Input = styled.TextInput`
 export const TextInput: FC<ComponentProps> = ({
   topLabel,
   icon,
+  accessibilityLabel,
   multiline,
   borderColor,
   borderRadius,
@@ -71,6 +78,7 @@ export const TextInput: FC<ComponentProps> = ({
         underlineColorAndroid={colors.transparent}
         selectionColor={colors.primary}
         multiline={multiline}
+        accessibilityLabel={accessibilityLabel}
         {...inputProps}
       />
     </InputContainer>

template/src/types/AccessibilityRole.ts

@@ -0,0 +1,34 @@
+/** 
+ * Accessbility Role communicates the purpose of a component to the user of an assistive technology,
+ * This tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.
+ * values pulled from official react native docs
+ * https://facebook.github.io/react-native/docs/accessibility#accessibilityrole-ios-android
+ */
+export type AccessbilityRole =
+  | 'none' /** Used when the element has no role */
+  | 'button' /** Used when the element should be treated as a button */
+  | 'link' /** Used when the element should be treated as a link */
+  | 'search' /** Used when the text field element should also be treated as a search field */
+  | 'image' /** Used when the element should be treated as an image. Can be combined with button or link, for example */
+  | 'keyboardkey' /** Used when the element acts as a keyboard key */
+  | 'text' /** Used when the element should be treated as static text that cannot change */
+  | 'adjustable' /** Used when an element can be "adjusted" (e.g. a slider) */
+  | 'imagebutton' /** Used when the element should be treated as a button and is also an image. */
+  | 'header' /** Used when an element acts as a header for a content section (e.g. the title of a navigation bar) */
+  | 'summary' /** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches */
+  | 'alert' /** Used when an element contains important text to be presented to the user */
+  | 'checkbox' /** Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state */
+  | 'combobox' /** Used when an element represents a combo box, which allows the user to select among several choices */
+  | 'menu' /** Used when the component is a menu of choices */
+  | 'menubar' /** Used when a component is a container of multiple menus */
+  | 'menuitem' /** Used to represent an item within a menu */
+  | 'progressbar' /** Used to represent a component which indicates progress of a task */
+  | 'radio' /** Used to represent a radio button */
+  | 'radiogroup' /** Used to represent a group of radio buttons */
+  | 'scrollbar' /** Used to represent a scroll bar. */
+  | 'spinbar' /** Used to represent a button which opens a list of choices */
+  | 'switch' /** Used to represent a switch which can be turned on and off */
+  | 'tab' /** Used to represent a tab */
+  | 'tablist' /** Used to represent a list of tabs */
+  | 'timer' /** Used to represent a timer */
+  | 'toolbar' /** Used to represent a tool bar (a container of action buttons or components) */;