Screen reader: Inconsistent reading of validation errors across field types

[v-kusudh]

Screen Reader: Narrator

Repro Link : https://codepen.io/Sudheesh_Kumar/pen/XWmoqXq?editors=1010

Browser Details: ​
OS: Windows 10 (Version 1909, Build: 18363.778)
Microsoft Edge Dev Version 84.0.495.2 (Official build) dev (64-bit)
Office-ui-fabric-react : "~6.162.1"

Repro Steps: ​

1. Start Narrator/NVDA. Hit URL: https://codepen.io/Sudheesh_Kumar/pen/XWmoqXq?editors=1010.
2. Tab to ComboBox 1-->Select Option B --> Press Enter
3. Verify if Narrator/NVDA is not reading all the error instructions that are coming for required fields

Actual Result: ​
Narrator/NVDA is not reading all the error instructions that are coming for required errors, instead just reading only one error for twice

Expected Result: ​
Narrator/NVDA should read all the error instructions that are coming for required fields

[aneeshack4]

@v-kusudh This doesn't repro - as you can see in the output below, Narrator says "Alert B is not an allowed option" You might try turning scan mode off (scan mode has known problems)

[v-kusudh]

Hi @aneeshack4 , Thank you for the reply. The bug is in the above screen, we can see couple of error i.e.
"Oh no! This Combo box 1 has an error!"
"Oh no! This Combo box 2 has an error!"
"B is not an allowed option"

Actual behavior:
It only reads/captures the Text-box error message not the Combo Box error message.
i.e. "B is not an allowed option" not reading other 2 errors.

Expected behavior:
Ideally, narrator/NVDA should read/capture all the error.

[aneeshack4]

@v-kusudh @ecraig12345 The "Oh no..." part does get read out when the down arrow is pressed...

[ecraig12345]

The difference here is that the TextField error is read immediately, but the ComboBox error is only read on down arrow. This is because of implementation differences between the two error messages:

TextField reads it as an alert, which is why you hear it right away:
(also uses this region as the aria-describedby of the main field, but screen readers are inconsistent about if/when they read that)

fluentui/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx

Lines 236 to 243 in 387865b

	{errorMessage && (
	<div role="alert">
	<DelayedRender>
	<p className={this._classNames.errorMessage}>
	<span data-automation-id="error-message">{errorMessage}</span>
	</p>
	</DelayedRender>
	</div>

ComboBox reads as aria-live="polite":
(also uses as aria-describedby similar to TextField)

fluentui/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx

Lines 491 to 499 in 387865b

	<div
	role="region"
	aria-live="polite"
	aria-atomic="true"
	id={errorMessageId}
	className={hasErrorMessage ? this._classNames.errorMessage : ''}
	>
	{errorMessage !== undefined ? errorMessage : ''}
	</div>

For reference, Dropdown is similar to TextField in this respect, reading as an alert:
(also uses as aria-describedby)

fluentui/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx

Lines 352 to 355 in 387865b

	{hasErrorMessage && (
	<div role="alert" id={errorMessageId} className={this._classNames.errorMessage}>
	{errorMessage}
	</div>

I'm not sure which behavior is correct, but definitely all three of these controls ought to use the same behavior for reading errors. (Of our form fields, these are the only ones I found which can display error messages currently.)

[ecraig12345]

@joschect suggested trying aria-errormessage, though it's not totally clear how that would work with controls (such as TextField) which may validate on focus out and need to read an error message after focus has moved on. https://www.w3.org/TR/wai-aria/#aria-errormessage

[brandonthomas]

Had a partner ping about issues around this lately stating that error messages weren't read with TextField. I'm able to repro those issues with both NVDA and Narrator in the error example here: https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield. Are there still known issues here? Scan/browse mode I can get to them but they are not read out otherwise.

[naksenzh]

Hi team, @ecraig12345 could you please share so ETA for this bug, it's impacting our Marketing app compliance.

[msft-fluent-ui-bot]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.