diff --git a/.eslintrc.js b/.eslintrc.js index 93348b0d03..2d59d36dd5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { root: true, - extends: '@react-native-community', + extends: ['@react-native-community', 'plugin:react-native-a11y/ios'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint', 'detox'], ignorePatterns: [ diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 28b92958ef..d3d76ad0a9 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -57,8 +57,9 @@ } }*/ + /* OLLIE: TODO -- this is not accessible */ /* Remove focus state on inputs */ - *:focus { + input:focus { outline: 0; } /* Remove default link styling */ diff --git a/package.json b/package.json index d35bd0efdf..92077f4a1b 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "await-lock": "^2.2.2", "base64-js": "^1.5.1", "email-validator": "^2.0.4", + "eslint-plugin-react-native-a11y": "^3.3.0", "expo": "~48.0.15", "expo-application": "~5.1.1", "expo-build-properties": "~0.5.1", diff --git a/src/lib/strings/display-names.ts b/src/lib/strings/display-names.ts index 5b58dec3d0..555151b553 100644 --- a/src/lib/strings/display-names.ts +++ b/src/lib/strings/display-names.ts @@ -6,7 +6,7 @@ const CHECK_MARKS_RE = /[\u2705\u2713\u2714\u2611]/gu export function sanitizeDisplayName(str: string): string { if (typeof str === 'string') { - return str.replace(CHECK_MARKS_RE, '') + return str.replace(CHECK_MARKS_RE, '').trim() } return '' } diff --git a/src/lib/styles.ts b/src/lib/styles.ts index 37d1696794..1ff2d520d2 100644 --- a/src/lib/styles.ts +++ b/src/lib/styles.ts @@ -118,6 +118,7 @@ export const s = StyleSheet.create({ mr2: {marginRight: 2}, mr5: {marginRight: 5}, mr10: {marginRight: 10}, + mr20: {marginRight: 20}, ml2: {marginLeft: 2}, ml5: {marginLeft: 5}, ml10: {marginLeft: 10}, @@ -149,6 +150,7 @@ export const s = StyleSheet.create({ pb5: {paddingBottom: 5}, pb10: {paddingBottom: 10}, pb20: {paddingBottom: 20}, + px5: {paddingHorizontal: 5}, // flex flexRow: {flexDirection: 'row'}, diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index f98bed1203..41787bb5fc 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -28,7 +28,10 @@ export const SplashScreen = ({ + onPress={onPressCreateAccount} + accessibilityRole="button" + accessibilityLabel="Create new account" + accessibilityHint="Opens flow to create a new Bluesky account"> Create a new account @@ -36,7 +39,10 @@ export const SplashScreen = ({ + onPress={onPressSignin} + accessibilityRole="button" + accessibilityLabel="Sign in" + accessibilityHint="Opens flow to sign into your existing Bluesky account"> Sign in diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index 7fac5a8c0d..9236968c43 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -43,7 +43,9 @@ export const SplashScreen = ({ + onPress={onPressCreateAccount} + // TODO: web accessibility + accessibilityRole="button"> Create a new account @@ -51,7 +53,9 @@ export const SplashScreen = ({ + onPress={onPressSignin} + // TODO: web accessibility + accessibilityRole="button"> Sign in @@ -60,7 +64,10 @@ export const SplashScreen = ({ style={[styles.notice, pal.textLight]} lineHeight={1.3}> Bluesky will launch soon.{' '} - + Join the waitlist diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx index 467b879487..ac03081dff 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 && } - + Back {model.canNext ? ( - + {model.isProcessing ? ( ) : ( @@ -91,7 +101,11 @@ export const CreateAccount = observer( ) : model.didServiceDescriptionFetchFail ? ( + onPress={onPressRetryConnect} + accessibilityRole="button" + accessibilityLabel="Retry" + accessibilityHint="Retries account creation" + accessibilityLiveRegion="polite"> Retry diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx index ca964ede2b..ac0d706d74 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}) => { - This is the company that keeps you online. + This is the service that keeps you online.