diff options
Diffstat (limited to 'src/view/com/auth/create')
-rw-r--r-- | src/view/com/auth/create/CreateAccount.tsx | 20 | ||||
-rw-r--r-- | src/view/com/auth/create/Step1.tsx | 14 | ||||
-rw-r--r-- | src/view/com/auth/create/Step2.tsx | 33 | ||||
-rw-r--r-- | src/view/com/auth/create/Step3.tsx | 3 |
4 files changed, 59 insertions, 11 deletions
diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx index 467b87948..ac03081df 100644 --- a/src/view/com/auth/create/CreateAccount.tsx +++ b/src/view/com/auth/create/CreateAccount.tsx @@ -72,14 +72,24 @@ export const CreateAccount = observer( {model.step === 3 && <Step3 model={model} />} </View> <View style={[s.flexRow, s.pl20, s.pr20]}> - <TouchableOpacity onPress={onPressBackInner} testID="backBtn"> + <TouchableOpacity + onPress={onPressBackInner} + testID="backBtn" + accessibilityRole="button" + accessibilityLabel="Go back" + accessibilityHint="Navigates to the previous screen"> <Text type="xl" style={pal.link}> Back </Text> </TouchableOpacity> <View style={s.flex1} /> {model.canNext ? ( - <TouchableOpacity testID="nextBtn" onPress={onPressNext}> + <TouchableOpacity + testID="nextBtn" + onPress={onPressNext} + accessibilityRole="button" + accessibilityLabel="Go to next" + accessibilityHint="Navigates to the next screen"> {model.isProcessing ? ( <ActivityIndicator /> ) : ( @@ -91,7 +101,11 @@ export const CreateAccount = observer( ) : model.didServiceDescriptionFetchFail ? ( <TouchableOpacity testID="retryConnectBtn" - onPress={onPressRetryConnect}> + onPress={onPressRetryConnect} + accessibilityRole="button" + accessibilityLabel="Retry" + accessibilityHint="Retries account creation" + accessibilityLiveRegion="polite"> <Text type="xl-bold" style={[pal.link, s.pr5]}> Retry </Text> diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx index ca964ede2..ac0d706d7 100644 --- a/src/view/com/auth/create/Step1.tsx +++ b/src/view/com/auth/create/Step1.tsx @@ -57,7 +57,7 @@ export const Step1 = observer(({model}: {model: CreateAccountModel}) => { <View> <StepHeader step="1" title="Your hosting provider" /> <Text style={[pal.text, s.mb10]}> - This is the company that keeps you online. + This is the service that keeps you online. </Text> <Option testID="blueskyServerBtn" @@ -72,7 +72,7 @@ export const Step1 = observer(({model}: {model: CreateAccountModel}) => { label="Other" onPress={onPressOther}> <View style={styles.otherForm}> - <Text style={[pal.text, s.mb5]}> + <Text nativeID="addressProvider" style={[pal.text, s.mb5]}> Enter the address of your provider: </Text> <TextInput @@ -82,6 +82,9 @@ export const Step1 = observer(({model}: {model: CreateAccountModel}) => { value={model.serviceUrl} editable onChange={onChangeServiceUrl} + accessibilityHint="Input hosting provider address" + accessibilityLabel="Hosting provider address" + accessibilityLabelledBy="addressProvider" /> {LOGIN_INCLUDE_DEV_SERVERS && ( <View style={[s.flexRow, s.mt10]}> @@ -136,7 +139,12 @@ function Option({ return ( <View style={[styles.option, pal.border]}> - <TouchableWithoutFeedback onPress={onPress} testID={testID}> + <TouchableWithoutFeedback + onPress={onPress} + testID={testID} + accessibilityRole="button" + accessibilityLabel={label} + accessibilityHint={`Sets hosting provider to ${label}`}> <View style={styles.optionHeading}> <View style={[styles.circle, pal.border]}> {isSelected ? ( diff --git a/src/view/com/auth/create/Step2.tsx b/src/view/com/auth/create/Step2.tsx index 375f80796..eceee50d3 100644 --- a/src/view/com/auth/create/Step2.tsx +++ b/src/view/com/auth/create/Step2.tsx @@ -41,6 +41,9 @@ export const Step2 = observer(({model}: {model: CreateAccountModel}) => { value={model.inviteCode} editable onChange={model.setInviteCode} + accessibilityRole="button" + accessibilityLabel="Invite code" + accessibilityHint="Input invite code to proceed" /> </View> )} @@ -48,7 +51,11 @@ export const Step2 = observer(({model}: {model: CreateAccountModel}) => { {!model.inviteCode && model.isInviteCodeRequired ? ( <Text style={[s.alignBaseline, pal.text]}> Don't have an invite code?{' '} - <TouchableWithoutFeedback onPress={onPressWaitlist}> + <TouchableWithoutFeedback + onPress={onPressWaitlist} + accessibilityRole="button" + accessibilityLabel="Waitlist" + accessibilityHint="Opens Bluesky waitlist form"> <Text style={pal.link}>Join the waitlist</Text> </TouchableWithoutFeedback>{' '} to try the beta before it's publicly available. @@ -56,7 +63,7 @@ export const Step2 = observer(({model}: {model: CreateAccountModel}) => { ) : ( <> <View style={s.pb20}> - <Text type="md-medium" style={[pal.text, s.mb2]}> + <Text type="md-medium" style={[pal.text, s.mb2]} nativeID="email"> Email address </Text> <TextInput @@ -66,11 +73,17 @@ export const Step2 = observer(({model}: {model: CreateAccountModel}) => { value={model.email} editable onChange={model.setEmail} + accessibilityLabel="Email" + accessibilityHint="Input email for Bluesky waitlist" + accessibilityLabelledBy="email" /> </View> <View style={s.pb20}> - <Text type="md-medium" style={[pal.text, s.mb2]}> + <Text + type="md-medium" + style={[pal.text, s.mb2]} + nativeID="password"> Password </Text> <TextInput @@ -81,17 +94,27 @@ export const Step2 = observer(({model}: {model: CreateAccountModel}) => { editable secureTextEntry onChange={model.setPassword} + accessibilityLabel="Password" + accessibilityHint="Set password" + accessibilityLabelledBy="password" /> </View> <View style={s.pb20}> - <Text type="md-medium" style={[pal.text, s.mb2]}> + <Text + type="md-medium" + style={[pal.text, s.mb2]} + nativeID="legalCheck"> Legal check </Text> <TouchableOpacity testID="is13Input" style={[styles.toggleBtn, pal.border]} - onPress={() => model.setIs13(!model.is13)}> + onPress={() => model.setIs13(!model.is13)} + accessibilityRole="checkbox" + accessibilityLabel="Verify age" + accessibilityHint="Verifies that I am at least 13 years of age" + accessibilityLabelledBy="legalCheck"> <View style={[pal.borderDark, styles.checkbox]}> {model.is13 && ( <FontAwesomeIcon icon="check" style={s.blue3} size={16} /> diff --git a/src/view/com/auth/create/Step3.tsx b/src/view/com/auth/create/Step3.tsx index 13ab39a10..3d9d47628 100644 --- a/src/view/com/auth/create/Step3.tsx +++ b/src/view/com/auth/create/Step3.tsx @@ -23,6 +23,9 @@ export const Step3 = observer(({model}: {model: CreateAccountModel}) => { value={model.handle} editable onChange={model.setHandle} + // TODO: Add explicit text label + accessibilityLabel="User handle" + accessibilityHint="Input your user handle" /> <Text type="lg" style={[pal.text, s.pl5, s.pt10]}> Your full handle will be{' '} |