Screen Reader: Many Pages: The error message is not associated with the field

[nbhardwaj-del]

Action Performed:

1. Using JAWS + Chrome, open the page https://new.expensify.com/
2. Navigate using TAB to the phone or email input field.
3. Trigger an error message, then press Tab/Shift+Tab key to focus the field with an error.
4. Note how the field is announced.

Other Occurrences:

1. On Settings - Save the world - I know a teacher
2. On Settings - Save the world - Intro your school principal
3. On Settings - Security - Close account
4. On Settings - Security - Two-factor authentication (step 2 of 2)
5. On Settings - Profile - Display name
6. On Settings - Profile - DOB
7. On Settings - Profile - Phone number
8. On Settings - Profile - Legal name
9. On Settings - Profile - Address
10. On Workspaces - Duplicate Workspaces
11. On Workspaces - Overview - Workspace Name
12. On Workspace - Categories - Add Category
13. On Workspace - Expensify Card - Bank info
14. On Workspace - Create Workspace - Confirm Workspace
15. On Create Report - Add payment card

Expected Result:

The error message should be associated with the form control, so that it is announced upon focusing the control.

Actual Result:

The error message is not associated with the form control and is not announced upon focusing the control.

HTML:

Please enter an email or phone number

"

Area issue was found in:

Landing Page

Failed WCAG checkpoints

WCAG 1.3.1 Info and Relationships
https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships

User impact:

Users with different disabilities employ assistive technology to adapt content according to their specific needs. For example, users who are blind (using a screen reader) benefit when information conveyed through color is also available in text (including text alternatives for images that use color to convey information), and users who are deaf-blind and use braille (text) refreshable displays may be unable to access color-dependent information.

Suggested resolution:

Use the aria-describedby to associate the error message with the form control.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby

Environment(s)

Windows Windows 10 - Chrome

Screenshots/Videos

Bug6997302_1762539559698.Error_message_not_announced.mp4

Version Number: NA
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36605/community-issues/6997302
Issue reported by: NA
Slack conversation: NA

Issue Owner

Current Issue Owner: @rushatgabhane

Issue Owner

Current Issue Owner: @rushatgabhane

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[marufsharifi]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a form field has a validation error (e.g., Sign In email/phone), the error text is visible but not associated with the input on web, so JAWS doesn’t announce the error when the user focuses the field.

What is the root cause of that problem?

The error text is rendered in FormHelpMessage without a stable DOM id, and the input does not set aria-describedby (or aria-errormessage) to point to that error element. As a result, the screen reader has nothing to announce when the input receives focus.

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Lines 395 to 452 in 9618ba6

	<InputComponent
	ref={(element: HTMLFormElement | AnimatedTextInputRef | AnimatedMarkdownTextInputRef | null): void => {
	const baseTextInputRef = element as BaseTextInputRef | null;
	if (typeof ref === 'function') {
	ref(baseTextInputRef);
	} else if (ref && 'current' in ref) {
	// eslint-disable-next-line no-param-reassign
	ref.current = baseTextInputRef;
	}
	input.current = element as HTMLInputElement | null;
	}}
	// eslint-disable-next-line
	{...inputProps}
	autoCorrect={inputProps.secureTextEntry ? false : autoCorrect}
	placeholder={newPlaceholder}
	placeholderTextColor={placeholderTextColor ?? theme.placeholderText}
	underlineColorAndroid="transparent"
	style={[
	styles.flex1,
	styles.w100,
	inputStyle,
	(!hasLabel || isMultiline) && styles.pv0,
	inputPaddingLeft,
	inputPaddingRight,
	inputProps.secureTextEntry && styles.secureInput,
	// Explicitly change boxSizing attribute for mobile chrome in order to apply line-height
	// for the issue mentioned here https://github.com/Expensify/App/issues/26735
	// Set overflow property to enable the parent flexbox to shrink its size
	// (See https://github.com/Expensify/App/issues/41766)
	!isMultiline && isMobileChrome() && {boxSizing: 'content-box', height: undefined, ...styles.overflowAuto},
	// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
	...(autoGrowHeight && !isAutoGrowHeightMarkdown
	? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
	: []),
	isAutoGrowHeightMarkdown ? [StyleUtils.getMarkdownMaxHeight(maxAutoGrowHeight), styles.verticalAlignTop] : undefined,
	// Add disabled color theme when field is not editable.
	inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabled,
	styles.pointerEventsAuto,
	]}
	multiline={isMultiline}
	maxLength={maxLength}
	onFocus={onFocus}
	onBlur={onBlur}
	onChangeText={setValue}
	secureTextEntry={passwordHidden}
	onPressOut={inputProps.onPress}
	showSoftInputOnFocus={!disableKeyboard}
	inputMode={inputMode}
	value={uncontrolled ? undefined : value}
	selection={inputProps.selection}
	readOnly={isReadOnly}
	defaultValue={defaultValue}
	markdownStyle={markdownStyle}
	accessibilityLabel={inputProps.accessibilityLabel}
	/>

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Lines 395 to 452 in 9618ba6

	<InputComponent
	ref={(element: HTMLFormElement | AnimatedTextInputRef | AnimatedMarkdownTextInputRef | null): void => {
	const baseTextInputRef = element as BaseTextInputRef | null;
	if (typeof ref === 'function') {
	ref(baseTextInputRef);
	} else if (ref && 'current' in ref) {
	// eslint-disable-next-line no-param-reassign
	ref.current = baseTextInputRef;
	}
	input.current = element as HTMLInputElement | null;
	}}
	// eslint-disable-next-line
	{...inputProps}
	autoCorrect={inputProps.secureTextEntry ? false : autoCorrect}
	placeholder={newPlaceholder}
	placeholderTextColor={placeholderTextColor ?? theme.placeholderText}
	underlineColorAndroid="transparent"
	style={[
	styles.flex1,
	styles.w100,
	inputStyle,
	(!hasLabel || isMultiline) && styles.pv0,
	inputPaddingLeft,
	inputPaddingRight,
	inputProps.secureTextEntry && styles.secureInput,
	// Explicitly change boxSizing attribute for mobile chrome in order to apply line-height
	// for the issue mentioned here https://github.com/Expensify/App/issues/26735
	// Set overflow property to enable the parent flexbox to shrink its size
	// (See https://github.com/Expensify/App/issues/41766)
	!isMultiline && isMobileChrome() && {boxSizing: 'content-box', height: undefined, ...styles.overflowAuto},
	// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
	...(autoGrowHeight && !isAutoGrowHeightMarkdown
	? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
	: []),
	isAutoGrowHeightMarkdown ? [StyleUtils.getMarkdownMaxHeight(maxAutoGrowHeight), styles.verticalAlignTop] : undefined,
	// Add disabled color theme when field is not editable.
	inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabled,
	styles.pointerEventsAuto,
	]}
	multiline={isMultiline}
	maxLength={maxLength}
	onFocus={onFocus}
	onBlur={onBlur}
	onChangeText={setValue}
	secureTextEntry={passwordHidden}
	onPressOut={inputProps.onPress}
	showSoftInputOnFocus={!disableKeyboard}
	inputMode={inputMode}
	value={uncontrolled ? undefined : value}
	selection={inputProps.selection}
	readOnly={isReadOnly}
	defaultValue={defaultValue}
	markdownStyle={markdownStyle}
	accessibilityLabel={inputProps.accessibilityLabel}
	/>

App/src/components/FormHelpMessage.tsx

Lines 75 to 77 in 9618ba6

	<View style={[styles.flex1, isError && shouldShowRedDotIndicator ? styles.ml2 : {}]}>
	{children ?? (shouldRenderMessageAsHTML ? <RenderHTML html={HTMLMessage} /> : <Text style={[isError ? styles.formError : styles.formHelp, styles.mb0]}>{message}</Text>)}
	</View>

What changes do you think we should make in order to solve the problem?

Add a stable ID for the error message and connect it to the input using aria-describedby/aria-errormessage on web. Also set aria-invalid when an error exists so SRs announce the field is invalid.

---

App/src/components/FormHelpMessage.tsx

Lines 75 to 77 in 9618ba6

	<View style={[styles.flex1, isError && shouldShowRedDotIndicator ? styles.ml2 : {}]}>
	{children ?? (shouldRenderMessageAsHTML ? <RenderHTML html={HTMLMessage} /> : <Text style={[isError ? styles.formError : styles.formHelp, styles.mb0]}>{message}</Text>)}
	</View>

 type FormHelpMessageProps = {
     isError: boolean;
     message: string | null;
+    messageID?: string;
 };

-<View style={[styles.flexRow, styles.mt1]}>
-    <View style={styles.flex1}>
+<View style={[styles.flexRow, styles.mt1]}>
+    <View style={styles.flex1} nativeID={messageID}>
         <Text style={[isError ? styles.formError : styles.formHelp, styles.mb0]}>
             {message}
         </Text>
     </View>
 </View>

---

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Lines 395 to 452 in 9618ba6

	<InputComponent
	ref={(element: HTMLFormElement | AnimatedTextInputRef | AnimatedMarkdownTextInputRef | null): void => {
	const baseTextInputRef = element as BaseTextInputRef | null;
	if (typeof ref === 'function') {
	ref(baseTextInputRef);
	} else if (ref && 'current' in ref) {
	// eslint-disable-next-line no-param-reassign
	ref.current = baseTextInputRef;
	}
	input.current = element as HTMLInputElement | null;
	}}
	// eslint-disable-next-line
	{...inputProps}
	autoCorrect={inputProps.secureTextEntry ? false : autoCorrect}
	placeholder={newPlaceholder}
	placeholderTextColor={placeholderTextColor ?? theme.placeholderText}
	underlineColorAndroid="transparent"
	style={[
	styles.flex1,
	styles.w100,
	inputStyle,
	(!hasLabel || isMultiline) && styles.pv0,
	inputPaddingLeft,
	inputPaddingRight,
	inputProps.secureTextEntry && styles.secureInput,
	// Explicitly change boxSizing attribute for mobile chrome in order to apply line-height
	// for the issue mentioned here https://github.com/Expensify/App/issues/26735
	// Set overflow property to enable the parent flexbox to shrink its size
	// (See https://github.com/Expensify/App/issues/41766)
	!isMultiline && isMobileChrome() && {boxSizing: 'content-box', height: undefined, ...styles.overflowAuto},
	// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
	...(autoGrowHeight && !isAutoGrowHeightMarkdown
	? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
	: []),
	isAutoGrowHeightMarkdown ? [StyleUtils.getMarkdownMaxHeight(maxAutoGrowHeight), styles.verticalAlignTop] : undefined,
	// Add disabled color theme when field is not editable.
	inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabled,
	styles.pointerEventsAuto,
	]}
	multiline={isMultiline}
	maxLength={maxLength}
	onFocus={onFocus}
	onBlur={onBlur}
	onChangeText={setValue}
	secureTextEntry={passwordHidden}
	onPressOut={inputProps.onPress}
	showSoftInputOnFocus={!disableKeyboard}
	inputMode={inputMode}
	value={uncontrolled ? undefined : value}
	selection={inputProps.selection}
	readOnly={isReadOnly}
	defaultValue={defaultValue}
	markdownStyle={markdownStyle}
	accessibilityLabel={inputProps.accessibilityLabel}
	/>

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Lines 395 to 452 in 9618ba6

	<InputComponent
	ref={(element: HTMLFormElement | AnimatedTextInputRef | AnimatedMarkdownTextInputRef | null): void => {
	const baseTextInputRef = element as BaseTextInputRef | null;
	if (typeof ref === 'function') {
	ref(baseTextInputRef);
	} else if (ref && 'current' in ref) {
	// eslint-disable-next-line no-param-reassign
	ref.current = baseTextInputRef;
	}
	input.current = element as HTMLInputElement | null;
	}}
	// eslint-disable-next-line
	{...inputProps}
	autoCorrect={inputProps.secureTextEntry ? false : autoCorrect}
	placeholder={newPlaceholder}
	placeholderTextColor={placeholderTextColor ?? theme.placeholderText}
	underlineColorAndroid="transparent"
	style={[
	styles.flex1,
	styles.w100,
	inputStyle,
	(!hasLabel || isMultiline) && styles.pv0,
	inputPaddingLeft,
	inputPaddingRight,
	inputProps.secureTextEntry && styles.secureInput,
	// Explicitly change boxSizing attribute for mobile chrome in order to apply line-height
	// for the issue mentioned here https://github.com/Expensify/App/issues/26735
	// Set overflow property to enable the parent flexbox to shrink its size
	// (See https://github.com/Expensify/App/issues/41766)
	!isMultiline && isMobileChrome() && {boxSizing: 'content-box', height: undefined, ...styles.overflowAuto},
	// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
	...(autoGrowHeight && !isAutoGrowHeightMarkdown
	? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
	: []),
	isAutoGrowHeightMarkdown ? [StyleUtils.getMarkdownMaxHeight(maxAutoGrowHeight), styles.verticalAlignTop] : undefined,
	// Add disabled color theme when field is not editable.
	inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabled,
	styles.pointerEventsAuto,
	]}
	multiline={isMultiline}
	maxLength={maxLength}
	onFocus={onFocus}
	onBlur={onBlur}
	onChangeText={setValue}
	secureTextEntry={passwordHidden}
	onPressOut={inputProps.onPress}
	showSoftInputOnFocus={!disableKeyboard}
	inputMode={inputMode}
	value={uncontrolled ? undefined : value}
	selection={inputProps.selection}
	readOnly={isReadOnly}
	defaultValue={defaultValue}
	markdownStyle={markdownStyle}
	accessibilityLabel={inputProps.accessibilityLabel}
	/>

-import {StyleSheet, View} from 'react-native';
+import {Platform, StyleSheet, View} from 'react-native';

+const inputNativeID = inputProps.nativeID ?? inputProps.id ?? inputID;
+const errorMessageID = errorText && inputNativeID ? `${inputNativeID}-error` : undefined;
+const webDescribedByProps =
+    Platform.OS === 'web' && errorMessageID
+        ? {
+              'aria-describedby': errorMessageID,
+              'aria-errormessage': errorMessageID,
+              'aria-invalid': true,
+          }
+        : {};

 <InputComponent
     {...inputProps}
+    {...webDescribedByProps}
+    nativeID={inputNativeID}
 />

-<TextInputLabel for={inputProps.nativeID} ... />
+<TextInputLabel for={inputNativeID} ... />

 <FormHelpMessage
     isError={!!errorText}
     message={errorText}
+    messageID={errorMessageID}
 />

---

Video demo of the fix:

login-input-error-announcment.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[melvin-bot]

@suneox 12 days overdue now... This issue's end is nigh!

[suneox]

This issue still depends on #77572, and we’re still working on that PR.