Android: Error state change (text inputs)

[amarlette]

Description

Error text not supported.

Errors for form fields, while they can be displayed visually in many unique ways, need to have a strong association with the problematic field itself for accessibility. Otherwise, any users who can't visually see the relation of the error to the field won't necessarily know which field is the problem.

This issue requires #30848 to be implemented first, and may get solved as part of that implementation.

React Native version:

v0.63

Expected Behavior

On focus of a form field with an error, the error will be announced by the screen reader after the field contents. Upon changing a field and putting it into an error state, the error will immediately be announced by the screen reader.

Android Details

On Android, this behavior is dictated by the "error" property of TextView. It can be set with the setError(errorString) method, which will both visually display the error, as well as set up the right properties for accessibility.

https://developer.android.com/reference/android/widget/TextView#setError(java.lang.CharSequence)

On the accessibility side, what is technically happening is that the "error" and "contentInvalid" properties of the AccessibilityNodeInfo is being set, and an accessibility event is being fired when the component goes into this error state. Code pointer for the Android implementation here:

AccessibilityNodeInfo properties:
https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/android/widget/TextView.java;l=11887-11888?q=setError

Accessibility event firing: https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/android/widget/TextView.java;l=7284?q=setError

[blavalla]

@kacieb , just a heads up as it looks like you're working on #30848. This can likely be solved as part of that task (at least on Android), as this behavior should work automatically if you set the error prop on the TextView class.

For iOS this may require making a custom VoiceOver announcement when we get into an error state, and will likely require setting the error text in something like the AccessibilityValue to get it to read it upon focus of the input.

cc @gioneill for iOS specifics

[fabOnReact]

I'm working on this issue #30848 (comment)

[fabOnReact]

iOS - announce lastChar (not entire text) onChangeText and avoid multiple announcements (Fabric)

Commit fabOnReact@b53ed9d fixes the following issues on iOS Fabric (apply solution from Paper)

1)The error is announced, but not with the character onChangeText
2)The error is announced multiple times

Related fabOnReact/react-native-notes#12 (comment) fabOnReact/react-native-notes#12 (comment)

sourcecode

function AccessibilityErrorWithButtons(): React.Node {
  const [text, setText] = React.useState('');
  const [error, setError] = React.useState(null);
  const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
  return (
    <View>
      <RNTesterBlock>
        <TextInput
          accessibilityErrorMessage={error}
          accessibilityInvalid={accessibilityInvalid}
          onChangeText={newText => {
            if (newText === 'Error') {
              setError('this is the error');
              setAccessibilityInvalid(true);
            } else {
              setError('');
              setAccessibilityInvalid(false);
            }
            setText(newText);
          }}
          value={text}
          style={styles.default}
        />
        <Button
          onPress={() => {
            setError('This error is set with Button onPress callback');
          }}
          title="Press to set an accessibilityErrorMessage to a non-empty value"
        />
        <Button
          onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
          title={`Press to set accessibilityInvalid to ${
            accessibilityInvalid ? 'false' : 'true'
          }`}
        />
        <Button
          onPress={() => setError('')}
          title={`Press to set an empty error message`}
        />
      </RNTesterBlock>
    </View>
  );
}

low_quality.mp4

[fabOnReact]

iOS - announces or does not announce the accessibilityError through Button onPress (not onChangeText) (Fabric)

sourcecode

function AccessibilityErrorWithButtons(): React.Node {
  const [text, setText] = React.useState('');
  const [error, setError] = React.useState(null);
  const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
  return (
    <View>
      <RNTesterBlock>
        <TextInput
          accessibilityErrorMessage={error}
          accessibilityInvalid={accessibilityInvalid}
          onChangeText={newText => {
            if (newText === 'Error') {
              setError('this is the error');
              setAccessibilityInvalid(true);
            } else {
              setError('');
              setAccessibilityInvalid(false);
            }
            setText(newText);
          }}
          value={text}
          style={styles.default}
        />
        <Button
          onPress={() => {
            setError('This error is set with Button onPress callback');
          }}
          title="Press to set an accessibilityErrorMessage to a non-empty value"
        />
        <Button
          onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
          title={`Press to set accessibilityInvalid to ${
            accessibilityInvalid ? 'false' : 'true'
          }`}
        />
        <Button
          onPress={() => setError('')}
          title={`Press to set an empty error message`}
        />
      </RNTesterBlock>
    </View>
  );
}

first_low.mp4

[fabOnReact]

iOS - the error is announced with accessibilityInvalid true and does not clear after typing text (onChangeText) (Fabric)

sourcecode

function AccessibilityErrorDoesNotClear(): React.Node {
  const [text, setText] = React.useState('');
  const [error, setError] = React.useState('');
  const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
  return (
    <View>
      <RNTesterBlock title="TextView without label">
        <Text>Set an error, change textinput value and then announce it.</Text>
        <TextInput
          accessibilityErrorMessage={error}
          accessibilityInvalid={accessibilityInvalid}
          value={text}
          onChangeText={newText => setText(newText)}
          style={styles.default}
        />
        <Text>
          The value of the accessibilityErrorMessage prop is{' '}
          {error.length > 0 ? error : 'empty error'}
        </Text>
        <Button
          onPress={() => {
            setError('This is an error');
          }}
          title="sets accessibilityErrorMessage to 'This is an error'"
        />
        <Button
          onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
          title={`Press to set accessibilityInvalid to ${
            accessibilityInvalid ? 'false' : 'true'
          }`}
        />
      </RNTesterBlock>
    </View>
  );
}

second_low.mp4

[fabOnReact]

iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Paper)

Sourcecode of example

function AccessibilityErrorWithButtons(): React.Node {
  const [text, setText] = React.useState('');
  const [error, setError] = React.useState(null);
  const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
  return (
    <View>
      <RNTesterBlock>
        <TextInput
          accessibilityErrorMessage={error}
          accessibilityInvalid={accessibilityInvalid}
          onChangeText={newText => {
            setText(newText);
            if (newText === 'Error') {
              setError('the newText is: ' + newText);
              setAccessibilityInvalid(true);
            } else if (newText === 'null') {
              setAccessibilityInvalid(false);
            }
          }}
          value={text}
          style={styles.default}
        />
        <Button
          onPress={() => {
            setError('This error is set with Button onPress callback');
          }}
          title="Press to set an accessibilityErrorMessage to a non-empty value"
        />
        <Button
          onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
          title={`Press to set accessibilityInvalid to ${
            accessibilityInvalid ? 'false' : 'true'
          }`}
        />
        <Button
          onPress={() => setError('')}
          title={`Press to set an empty error message`}
        />
      </RNTesterBlock>
    </View>
  );
}

https://drive.google.com/file/d/1k8ex9CVOrAYyLKv3k5ZzTokerhVGnvbo/view?usp=sharing

[fabOnReact]

Android - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event

Sourcecode of example

function AccessibilityErrorWithButtons(): React.Node {
  const [text, setText] = React.useState('');
  const [error, setError] = React.useState(null);
  const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
  return (
    <View>
      <RNTesterBlock>
        <TextInput
          accessibilityErrorMessage={error}
          accessibilityInvalid={accessibilityInvalid}
          onChangeText={newText => {
            setText(newText);
            if (newText === 'Error') {
              setError('the newText is: ' + newText);
              setAccessibilityInvalid(true);
            } else if (newText === 'null') {
              setAccessibilityInvalid(false);
            }
          }}
          value={text}
          style={styles.default}
        />
        <Button
          onPress={() => {
            setError('This error is set with Button onPress callback');
          }}
          title="Press to set an accessibilityErrorMessage to a non-empty value"
        />
        <Button
          onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
          title={`Press to set accessibilityInvalid to ${
            accessibilityInvalid ? 'false' : 'true'
          }`}
        />
        <Button
          onPress={() => setError('')}
          title={`Press to set an empty error message`}
        />
      </RNTesterBlock>
    </View>
  );
}

https://drive.google.com/file/d/1kAHHrYKXP6tRFf7w1_rcxOFp3cCa2L_C/view?usp=sharing

[fabOnReact]

iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Fabric)

Sourcecode of example

function AccessibilityErrorWithButtons(): React.Node {
  const [text, setText] = React.useState('');
  const [error, setError] = React.useState(null);
  const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
  return (
    <View>
      <RNTesterBlock>
        <TextInput
          accessibilityErrorMessage={error}
          accessibilityInvalid={accessibilityInvalid}
          onChangeText={newText => {
            setText(newText);
            if (newText === 'Error') {
              setError('the newText is: ' + newText);
              setAccessibilityInvalid(true);
            } else if (newText === 'null') {
              setAccessibilityInvalid(false);
            }
          }}
          value={text}
          style={styles.default}
        />
        <Button
          onPress={() => {
            setError('This error is set with Button onPress callback');
          }}
          title="Press to set an accessibilityErrorMessage to a non-empty value"
        />
        <Button
          onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
          title={`Press to set accessibilityInvalid to ${
            accessibilityInvalid ? 'false' : 'true'
          }`}
        />
        <Button
          onPress={() => setError('')}
          title={`Press to set an empty error message`}
        />
      </RNTesterBlock>
    </View>
  );
}

https://drive.google.com/file/d/1kDFzd_YKUUTQAjzZAOnyum4dIa-Z5UT7/view?usp=sharing

[fabOnReact]

I moved PR #33468 Ready for Review.
I remain available for any improvement. Thanks

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[fabOnReact]

PR was not merged. Could add this task to my todo