zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

React Native accessibility (#539)

Browse source 
* React Native accessibility

* First round of changes

* Latest update

* Checkpoint

* Wrap up

* Lint

* Remove unhelpful image hints

* Fix navigation

* Fix rebase and lint

* Mitigate an known issue with the password entry in login

* Fix composer dismiss

* Remove focus on input elements for web

* Remove i and npm

* pls work

* Remove stray declaration

* Regenerate yarn.lock

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
This commit is contained in:
Ollie H 2023-05-01 18:38:47 -07:00 • committed by GitHub
parent c75c888de2
commit 83959c595d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
86 changed files with 2479 additions and 1827 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/view/com/auth/create/Step2.tsx
View file

@ -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} />