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 <pfrazee@gmail.com>
2023-05-01 18:38:47 -07:00
parent c75c888de2
commit 83959c595d
86 changed files with 2479 additions and 1827 deletions
@@ -195,7 +195,10 @@ const ChooseAccountForm = ({
          testID={`chooseAccountBtn-${account.handle}`}
          key={account.did}
          style={[pal.view, pal.border, styles.account]}
-          onPress={() => onTryAccount(account)}>
+          onPress={() => onTryAccount(account)}
+          accessibilityRole="button"
+          accessibilityLabel={`Sign in as ${account.handle}`}
+          accessibilityHint="Double tap to sign in">
          <View
            style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}>
            <View style={s.p10}>
@@ -220,7 +223,10 @@ const ChooseAccountForm = ({
      <TouchableOpacity
        testID="chooseNewAccountBtn"
        style={[pal.view, pal.border, styles.account, styles.accountLast]}
-        onPress={() => onSelectAccount(undefined)}>
+        onPress={() => onSelectAccount(undefined)}
+        accessibilityRole="button"
+        accessibilityLabel="Login to account that is not listed"
+        accessibilityHint="">
        <View style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}>
          <Text style={[styles.accountText, styles.accountTextOther]}>
            <Text type="lg" style={pal.text}>
@@ -235,7 +241,11 @@ const ChooseAccountForm = ({
        </View>
      </TouchableOpacity>
      <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
-        <TouchableOpacity onPress={onPressBack}>
+        <TouchableOpacity
+          onPress={onPressBack}
+          accessibilityRole="button"
+          accessibilityLabel="Go back"
+          accessibilityHint="Navigates to the previous screen">
          <Text type="xl" style={[pal.link, s.pl5]}>
            Back
          </Text>
@@ -351,7 +361,10 @@ const LoginForm = ({
          <TouchableOpacity
            testID="loginSelectServiceButton"
            style={styles.textBtn}
-            onPress={onPressSelectService}>
+            onPress={onPressSelectService}
+            accessibilityRole="button"
+            accessibilityLabel="Select service"
+            accessibilityHint="Sets server for the Bluesky client">
            <Text type="xl" style={[pal.text, styles.textBtnLabel]}>
              {toNiceDomain(serviceUrl)}
            </Text>
@@ -386,6 +399,8 @@ const LoginForm = ({
            value={identifier}
            onChangeText={str => setIdentifier((str || '').toLowerCase())}
            editable={!isProcessing}
+            accessibilityLabel="Username or email address"
+            accessibilityHint="Input the username or email address you used at signup"
          />
        </View>
        <View style={[pal.borderDark, styles.groupContent]}>
@@ -402,14 +417,28 @@ const LoginForm = ({
            autoCorrect={false}
            keyboardAppearance={theme.colorScheme}
            secureTextEntry
+            // HACK
+            // mitigates a known issue where the secure password prompt interferes
+            // https://github.com/facebook/react-native/issues/21911
+            // prf
+            textContentType="oneTimeCode"
            value={password}
            onChangeText={setPassword}
            editable={!isProcessing}
+            accessibilityLabel="Password"
+            accessibilityHint={
+              identifier === ''
+                ? 'Input your password'
+                : `Input the password tied to ${identifier}`
+            }
          />
          <TouchableOpacity
            testID="forgotPasswordButton"
            style={styles.textInputInnerBtn}
-            onPress={onPressForgotPassword}>
+            onPress={onPressForgotPassword}
+            accessibilityRole="button"
+            accessibilityLabel="Forgot password"
+            accessibilityHint="Opens password reset form">
            <Text style={pal.link}>Forgot</Text>
          </TouchableOpacity>
        </View>
@@ -425,7 +454,11 @@ const LoginForm = ({
        </View>
      ) : undefined}
      <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
-        <TouchableOpacity onPress={onPressBack}>
+        <TouchableOpacity
+          onPress={onPressBack}
+          accessibilityRole="button"
+          accessibilityLabel="Go back"
+          accessibilityHint="Navigates to the previous screen">
          <Text type="xl" style={[pal.link, s.pl5]}>
            Back
          </Text>
@@ -434,7 +467,10 @@ const LoginForm = ({
        {!serviceDescription && error ? (
          <TouchableOpacity
            testID="loginRetryButton"
-            onPress={onPressRetryConnect}>
+            onPress={onPressRetryConnect}
+            accessibilityRole="button"
+            accessibilityLabel="Retry"
+            accessibilityHint="Retries login">
            <Text type="xl-bold" style={[pal.link, s.pr5]}>
              Retry
            </Text>
@@ -449,7 +485,12 @@ const LoginForm = ({
        ) : isProcessing ? (
          <ActivityIndicator />
        ) : isReady ? (
-          <TouchableOpacity testID="loginNextButton" onPress={onPressNext}>
+          <TouchableOpacity
+            testID="loginNextButton"
+            onPress={onPressNext}
+            accessibilityRole="button"
+            accessibilityLabel="Go to next"
+            accessibilityHint="Navigates to the next screen">
            <Text type="xl-bold" style={[pal.link, s.pr5]}>
              Next
            </Text>
@@ -539,7 +580,10 @@ const ForgotPasswordForm = ({
          <TouchableOpacity
            testID="forgotPasswordSelectServiceButton"
            style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}
-            onPress={onPressSelectService}>
+            onPress={onPressSelectService}
+            accessibilityRole="button"
+            accessibilityLabel="Hosting provider"
+            accessibilityHint="Sets hosting provider for password reset">
            <FontAwesomeIcon
              icon="globe"
              style={[pal.textLight, styles.groupContentIcon]}
@@ -572,6 +616,8 @@ const ForgotPasswordForm = ({
              value={email}
              onChangeText={setEmail}
              editable={!isProcessing}
+              accessibilityLabel="Email"
+              accessibilityHint="Sets email for password reset"
            />
          </View>
        </View>
@@ -586,7 +632,11 @@ const ForgotPasswordForm = ({
          </View>
        ) : undefined}
        <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
-          <TouchableOpacity onPress={onPressBack}>
+          <TouchableOpacity
+            onPress={onPressBack}
+            accessibilityRole="button"
+            accessibilityLabel="Go back"
+            accessibilityHint="Navigates to the previous screen">
            <Text type="xl" style={[pal.link, s.pl5]}>
              Back
            </Text>
@@ -599,7 +649,12 @@ const ForgotPasswordForm = ({
              Next
            </Text>
          ) : (
-            <TouchableOpacity testID="newPasswordButton" onPress={onPressNext}>
+            <TouchableOpacity
+              testID="newPasswordButton"
+              onPress={onPressNext}
+              accessibilityRole="button"
+              accessibilityLabel="Go to next"
+              accessibilityHint="Navigates to the next screen">
              <Text type="xl-bold" style={[pal.link, s.pr5]}>
                Next
              </Text>
@@ -699,6 +754,9 @@ const SetNewPasswordForm = ({
              value={resetCode}
              onChangeText={setResetCode}
              editable={!isProcessing}
+              accessible={true}
+              accessibilityLabel="Reset code"
+              accessibilityHint="Input code sent to your email for password reset"
            />
          </View>
          <View style={[pal.borderDark, styles.groupContent]}>
@@ -718,6 +776,9 @@ const SetNewPasswordForm = ({
              value={password}
              onChangeText={setPassword}
              editable={!isProcessing}
+              accessible={true}
+              accessibilityLabel="Password"
+              accessibilityHint="Input new password"
            />
          </View>
        </View>
@@ -732,7 +793,11 @@ const SetNewPasswordForm = ({
          </View>
        ) : undefined}
        <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
-          <TouchableOpacity onPress={onPressBack}>
+          <TouchableOpacity
+            onPress={onPressBack}
+            accessibilityRole="button"
+            accessibilityLabel="Go back"
+            accessibilityHint="Navigates to the previous screen">
            <Text type="xl" style={[pal.link, s.pl5]}>
              Back
            </Text>
@@ -747,7 +812,10 @@ const SetNewPasswordForm = ({
          ) : (
            <TouchableOpacity
              testID="setNewPasswordButton"
-              onPress={onPressNext}>
+              onPress={onPressNext}
+              accessibilityRole="button"
+              accessibilityLabel="Go to next"
+              accessibilityHint="Navigates to the next screen">
              <Text type="xl-bold" style={[pal.link, s.pr5]}>
                Next
              </Text>
@@ -783,7 +851,11 @@ const PasswordUpdatedForm = ({onPressNext}: {onPressNext: () => void}) => {
        </Text>
        <View style={[s.flexRow, s.alignCenter, s.pl20, s.pr20]}>
          <View style={s.flex1} />
-          <TouchableOpacity onPress={onPressNext}>
+          <TouchableOpacity
+            onPress={onPressNext}
+            accessibilityRole="button"
+            accessibilityLabel="Close alert"
+            accessibilityHint="Closes password update alert">
            <Text type="xl-bold" style={[pal.link, s.pr5]}>
              Okay
            </Text>