Fluentui: 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)
https://github.com/microsoft/fluentui/blob/387865b75c5a33a576800a15cd663f767964165a/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx#L236-L243

ComboBox reads as aria-live="polite":
(also uses as aria-describedby similar to TextField)
https://github.com/microsoft/fluentui/blob/387865b75c5a33a576800a15cd663f767964165a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx#L491-L499

For reference, Dropdown is similar to TextField in this respect, reading as an alert:
(also uses as aria-describedby)
https://github.com/microsoft/fluentui/blob/387865b75c5a33a576800a15cd663f767964165a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx#L352-L355

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