From 83959c595d52ceb7aa4e3f68441c5ac41c389ebc Mon Sep 17 00:00:00 2001 From: Ollie H Date: Mon, 1 May 2023 18:38:47 -0700 Subject: [PATCH] React Native accessibility (#539) * 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 --- .eslintrc.js | 2 +- bskyweb/templates/base.html | 3 +- package.json | 1 + src/lib/strings/display-names.ts | 2 +- src/lib/styles.ts | 2 + src/view/com/auth/SplashScreen.tsx | 10 +- src/view/com/auth/SplashScreen.web.tsx | 13 +- src/view/com/auth/create/CreateAccount.tsx | 20 +- src/view/com/auth/create/Step1.tsx | 14 +- src/view/com/auth/create/Step2.tsx | 33 +- src/view/com/auth/create/Step3.tsx | 3 + src/view/com/auth/login/Login.tsx | 100 +- src/view/com/auth/util/TextInput.tsx | 25 +- src/view/com/composer/Composer.tsx | 286 +- src/view/com/composer/ExternalEmbed.tsx | 8 +- src/view/com/composer/Prompt.tsx | 5 +- src/view/com/composer/photos/Gallery.tsx | 11 + .../com/composer/photos/OpenCameraBtn.tsx | 16 +- .../com/composer/photos/SelectPhotoBtn.tsx | 16 +- .../com/composer/text-input/TextInput.tsx | 41 +- .../com/composer/text-input/TextInput.web.tsx | 4 +- .../text-input/mobile/Autocomplete.tsx | 4 +- .../components/ImageDefaultHeader.tsx | 6 +- .../components/ImageItem/ImageItem.ios.tsx | 3 +- src/view/com/lightbox/ImageViewing/index.tsx | 7 +- src/view/com/lightbox/Lightbox.web.tsx | 23 +- src/view/com/modals/AddAppPasswords.tsx | 8 +- src/view/com/modals/AltImage.tsx | 19 +- src/view/com/modals/AltImageRead.tsx | 7 +- src/view/com/modals/ChangeHandle.tsx | 37 +- src/view/com/modals/Confirm.tsx | 7 +- .../com/modals/ContentFilteringSettings.tsx | 47 +- src/view/com/modals/DeleteAccount.tsx | 36 +- src/view/com/modals/EditProfile.tsx | 17 +- src/view/com/modals/InviteCodes.tsx | 10 +- src/view/com/modals/Modal.web.tsx | 3 + src/view/com/modals/ReportAccount.tsx | 5 +- src/view/com/modals/ReportPost.tsx | 5 +- src/view/com/modals/Repost.tsx | 19 +- src/view/com/modals/ServerInput.tsx | 25 +- src/view/com/modals/Waitlist.tsx | 16 +- .../com/modals/crop-image/CropImage.web.tsx | 35 +- src/view/com/notifications/FeedItem.tsx | 83 +- src/view/com/pager/FeedsTabBarMobile.tsx | 5 +- src/view/com/post-thread/PostThread.tsx | 12 +- src/view/com/post-thread/PostThreadItem.tsx | 13 +- src/view/com/profile/ProfileHeader.tsx | 48 +- src/view/com/search/HeaderWithInput.tsx | 21 +- .../com/util/BottomSheetCustomBackdrop.tsx | 14 +- src/view/com/util/Link.tsx | 34 +- src/view/com/util/Picker.tsx | 157 -- src/view/com/util/PostCtrls.tsx | 159 +- src/view/com/util/Selector.tsx | 6 +- src/view/com/util/UserAvatar.tsx | 7 +- src/view/com/util/UserBanner.tsx | 8 +- src/view/com/util/ViewHeader.tsx | 13 +- src/view/com/util/ViewSelector.tsx | 7 +- src/view/com/util/error/ErrorMessage.tsx | 5 +- src/view/com/util/error/ErrorScreen.tsx | 4 +- src/view/com/util/fab/FABInner.tsx | 18 +- src/view/com/util/forms/Button.tsx | 4 +- src/view/com/util/forms/DropdownButton.tsx | 62 +- src/view/com/util/images/AutoSizedImage.tsx | 9 +- src/view/com/util/images/Gallery.tsx | 13 +- src/view/com/util/images/Image.tsx | 4 +- src/view/com/util/images/ImageHorzList.tsx | 22 +- .../util/load-latest/LoadLatestBtn.web.tsx | 5 +- .../util/load-latest/LoadLatestBtnMobile.tsx | 5 +- src/view/com/util/moderation/ContentHider.tsx | 9 +- src/view/com/util/moderation/PostHider.tsx | 3 +- src/view/com/util/post-embeds/index.tsx | 5 +- src/view/screens/AppPasswords.tsx | 6 +- src/view/screens/Home.tsx | 3 + src/view/screens/Log.tsx | 4 +- src/view/screens/SearchMobile.tsx | 4 +- src/view/screens/Settings.tsx | 39 +- src/view/shell/Composer.tsx | 5 +- src/view/shell/Composer.web.tsx | 2 +- src/view/shell/Drawer.tsx | 71 +- src/view/shell/bottom-bar/BottomBar.tsx | 35 +- src/view/shell/desktop/LeftNav.tsx | 62 +- src/view/shell/desktop/RightNav.tsx | 20 +- src/view/shell/desktop/Search.tsx | 8 +- src/view/shell/index.web.tsx | 4 +- web/index.html | 12 +- yarn.lock | 2322 +++++++++-------- 86 files changed, 2479 insertions(+), 1827 deletions(-) delete mode 100644 src/view/com/util/Picker.tsx 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.