Skip to content

Commit 4acca66

Browse files
author
Michael Jordan
committed
fix(accessibility): improve announcement of error message for a just blurred field
1. Improves announcement of validation error for just blurred field, by including accessible name in announcement for context. 2. Forgo announcement when the field receiving focus already has a validation error. It can be too much information. 3. Add alt text, "(valid)," to validationIcon, and include it in the `aria-describedby` for input for TextFieldBase. 4. fix tests after adding alt text to validationIcon
1 parent 9462223 commit 4acca66

File tree

14 files changed

+147
-52
lines changed

14 files changed

+147
-52
lines changed

‎packages/@react-aria/form/intl/en-US.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"invalidValue": "Invalid value.",
3+
"reviewField": "Please review {accessibleName} field: {validationMessage}"
4+
}

‎packages/@react-aria/form/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,14 @@
2626
"url": "https://github.com/adobe/react-spectrum"
2727
},
2828
"dependencies": {
29+
"@react-aria/i18n": "^3.12.9",
2930
"@react-aria/interactions": "^3.25.1",
3031
"@react-aria/live-announcer": "^3.4.3",
3132
"@react-aria/utils": "^3.29.0",
3233
"@react-stately/form": "^3.1.4",
3334
"@react-types/shared": "^3.29.1",
34-
"@swc/helpers": "^0.5.0"
35+
"@swc/helpers": "^0.5.0",
36+
"dom-accessibility-api": "^0.7.0"
3537
},
3638
"peerDependencies": {
3739
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",

‎packages/@react-aria/form/src/useFormValidation.ts

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,24 @@
1111
*/
1212

1313
import {announce} from '@react-aria/live-announcer';
14+
import {computeAccessibleName} from 'dom-accessibility-api';
1415
import {FormValidationState} from '@react-stately/form';
1516
import {getActiveElement, getOwnerDocument, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
17+
// @ts-ignore
18+
import intlMessages from '../intl/*.json';
1619
import {RefObject, Validation, ValidationResult} from '@react-types/shared';
1720
import {setInteractionModality} from '@react-aria/interactions';
1821
import {useEffect, useRef} from 'react';
22+
import {useLocalizedStringFormatter} from '@react-aria/i18n';
1923

2024
type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
2125

26+
function isValidatableElement(element: Element): boolean {
27+
return element instanceof HTMLInputElement ||
28+
element instanceof HTMLTextAreaElement ||
29+
element instanceof HTMLSelectElement;
30+
}
31+
2232
interface FormValidationProps<T> extends Validation<T> {
2333
focus?: () => void
2434
}
@@ -33,9 +43,7 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
3343
clearTimeout(timeoutIdRef.current);
3444
timeoutIdRef.current = null;
3545
}
36-
if (ref?.current &&
37-
errorMessage !== '' &&
38-
(
46+
if (ref && ref.current && errorMessage !== '' && (
3947
ref.current.contains(getActiveElement(getOwnerDocument(ref.current))) ||
4048
justBlurredRef.current
4149
)
@@ -44,10 +52,15 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
4452
}
4553
}
4654

55+
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/form');
56+
4757
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
4858
useLayoutEffect(() => {
4959
if (validationBehavior === 'native' && ref?.current && !ref.current.disabled) {
50-
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';
60+
let errorMessage =
61+
state.realtimeValidation.isInvalid ?
62+
(state.realtimeValidation.validationErrors?.join(' ') || stringFormatter.format('invalidValue') || '') :
63+
'';
5164
ref.current.setCustomValidity(errorMessage);
5265

5366
// Prevent default tooltip for validation message.
@@ -100,10 +113,35 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
100113
state.commitValidation();
101114
});
102115

103-
let onBlur = useEffectEvent(() => {
116+
let onBlur = useEffectEvent((event: Event) => {
117+
const input = ref?.current;
118+
const relatedTarget = (event as FocusEvent).relatedTarget as Element | null;
119+
if (
120+
(!input || !input.validationMessage) ||
121+
(relatedTarget && isValidatableElement(relatedTarget) && (relatedTarget as ValidatableElement).validationMessage)
122+
) {
123+
// If the input has no validation message,
124+
// or the relatedTarget has a validation message, don't announce the error message.
125+
// This prevents announcing the error message when the user is navigating
126+
// between inputs that may already have an error message.
127+
return;
128+
}
104129
justBlurredRef.current = true;
130+
const isRadioOrCheckbox = input.type === 'radio' || input.type === 'checkbox';
131+
const groupElement = isRadioOrCheckbox ? input.closest('[role="group"][aria-labelledby], [role=\'group\'][aria-label], fieldset') : undefined;
105132
// Announce the current error message
106-
announceErrorMessage(ref?.current?.validationMessage || '');
133+
const accessibleName = computeAccessibleName(groupElement || input);
134+
const validationMessage = input.validationMessage;
135+
announceErrorMessage(
136+
accessibleName && validationMessage ?
137+
stringFormatter.format(
138+
'reviewField',
139+
{
140+
accessibleName,
141+
validationMessage
142+
}) :
143+
validationMessage
144+
);
107145
justBlurredRef.current = false;
108146
});
109147

@@ -132,7 +170,7 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
132170
}, [justBlurredRef, onBlur, onChange, onInvalid, onReset, ref, validationBehavior]);
133171
}
134172

135-
function getValidity(input: ValidatableElement) {
173+
function getValidity(input: ValidatableElement): ValidityState {
136174
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
137175
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
138176
let validity = input.validity;

‎packages/@react-spectrum/autocomplete/intl/en-US.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
"loading": "Loading...",
33
"noResults": "No results",
44
"clear": "Clear",
5-
"invalid": "(invalid)"
5+
"invalid": "(invalid)",
6+
"valid": "(valid)"
67
}

‎packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,9 +207,10 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
207207
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/autocomplete');
208208
let valueId = useId();
209209
let invalidId = useId();
210+
let validId = useId();
210211
let validationIcon = validationState === 'invalid'
211212
? <AlertMedium id={invalidId} aria-label={stringFormatter.format('invalid')} />
212-
: <CheckmarkMedium />;
213+
: <CheckmarkMedium id={validId} aria-label={stringFormatter.format('valid')} />;
213214

214215
if (icon) {
215216
icon = React.cloneElement(icon, {
@@ -262,7 +263,8 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
262263
props['aria-labelledby'],
263264
props['aria-label'] && !props['aria-labelledby'] ? props.id : null,
264265
valueId,
265-
validationState === 'invalid' ? invalidId : null
266+
validationState === 'invalid' ? invalidId : null,
267+
validationState === 'valid' ? validId : null
266268
].filter(Boolean).join(' '),
267269
elementType: 'div'
268270
}, ref);

‎packages/@react-spectrum/combobox/intl/en-US.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
"loading": "Loading...",
33
"noResults": "No results",
44
"clear": "Clear",
5-
"invalid": "(invalid)"
5+
"invalid": "(invalid)",
6+
"valid": "(valid)"
67
}

‎packages/@react-spectrum/combobox/src/MobileComboBox.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,9 +179,10 @@ export const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: Co
179179
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');
180180
let valueId = useId();
181181
let invalidId = useId();
182+
let validId = useId();
182183
let validationIcon = validationState === 'invalid'
183184
? <AlertMedium id={invalidId} aria-label={stringFormatter.format('invalid')} />
184-
: <CheckmarkMedium />;
185+
: <CheckmarkMedium id={validId} aria-label={stringFormatter.format('valid')} />;
185186

186187
let validation = React.cloneElement(validationIcon, {
187188
UNSAFE_className: classNames(
@@ -202,7 +203,8 @@ export const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: Co
202203
props['aria-labelledby'],
203204
props['aria-label'] && !props['aria-labelledby'] ? props.id : null,
204205
valueId,
205-
validationState === 'invalid' ? invalidId : null
206+
validationState === 'invalid' ? invalidId : null,
207+
validationState === 'valid' ? validId : null
206208
].filter(Boolean).join(' '),
207209
elementType: 'div'
208210
}, objRef);

‎packages/@react-spectrum/datepicker/intl/en-US.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"time": "Time",
33
"startTime": "Start time",
4-
"endTime": "End time"
4+
"endTime": "End time",
5+
"valid": "(valid)"
56
}

‎packages/@react-spectrum/datepicker/src/Input.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@ import Alert from '@spectrum-icons/ui/AlertMedium';
1414
import Checkmark from '@spectrum-icons/ui/CheckmarkMedium';
1515
import {classNames, useValueEffect} from '@react-spectrum/utils';
1616
import datepickerStyles from './styles.css';
17+
// @ts-ignore
18+
import intlMessages from '../intl/*.json';
1719
import {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
1820
import React, {ReactElement, useCallback, useRef} from 'react';
1921
import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
2022
import {useFocusRing} from '@react-aria/focus';
23+
import {useLocalizedStringFormatter} from '@react-aria/i18n';
2124

2225
export const Input = React.forwardRef(function Input(props: any, ref: any) {
2326
let inputRef = useRef<HTMLInputElement | null>(null);
@@ -114,11 +117,13 @@ export const Input = React.forwardRef(function Input(props: any, ref: any) {
114117
'spectrum-Textfield-validationIcon'
115118
);
116119

120+
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/datepicker');
121+
let validId = fieldProps?.id ? `${fieldProps.id}-valid-icon` : undefined;
117122
let validationIcon: ReactElement | null = null;
118123
if (validationState === 'invalid' && !isDisabled) {
119124
validationIcon = <Alert data-testid="invalid-icon" UNSAFE_className={iconClass} />;
120125
} else if (validationState === 'valid' && !isDisabled) {
121-
validationIcon = <Checkmark data-testid="valid-icon" UNSAFE_className={iconClass} />;
126+
validationIcon = <Checkmark id={validId} aria-label={stringFormatter.format('valid')} data-testid="valid-icon" UNSAFE_className={iconClass} />;
122127
}
123128

124129
return (

‎packages/@react-spectrum/textfield/intl/en-US.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"valid": "(valid)"
3+
}

0 commit comments

Comments
 (0)