[Bug]: Combobox does not have `aria-invalid` attr

[Thomas-Neuhauser]

Package

react

Package version

8.120.5

React version

16.14.0

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
    Memory: 16.51 GB / 31.72 GB
  Browsers:
    Edge: Chromium (127.0.2651.86)
    Internet Explorer: 11.0.22621.3527

Current Behavior

We are facing accessibility issues using the ComboBox control.
This control is not setting an aria-invalid attribute corresponding to the presence of an error message set via errorMessage.
You can check the render output and behavior here:
https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox

If you check the same for a DropDown or TextField you can see, that these controls always set an aria-invalid attribute to either false or true:
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield

Expected Behavior

All controls should consistently use the combination of aria-describedby, role="alert" and aria-invalid in order to let screen readers correctly react to error situations.
For the ComboBox we built a workaround using autofill for setting aria-invalid at the inner input field depending on the presence of an error message for the time being.

Reproduction

https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox

Steps to reproduce

1. Open https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox
2. In the page search for "ComboBox with static error message"
3. Open the debugger and check the render output for the input field part of the ComboBox
4. Notice that there is no aria-invalid="false" attribute
5. Open https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
6. In the page search for "Dropdown with error message"
7. Open the debugger and check the render output for the span part of the DropDown
8. Switch the error on and off, notice that there is an aria-invalid attribute switched between true / false correspondingly

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

Combobox

Dropdown

Looks like a bug, but I will let @smhigley to check 🐱

[Thomas-Neuhauser]

I don't think this makes sense. If there is an error, there should be an aria-invalid indicating this.
At least we get the feedback from our ACC testers that the current behavior doesn't work for them.
If they enter something invalid in a ComboBox and tab out of the field, the screenreader does not react to the error situation and read out the error.

[layershifter]

@Thomas-Neuhauser yes, sorry I noticed it already. I updated my message 👍

[Thomas-Neuhauser]

Ok I'm sorry now if my response doesn't fit exactly to what you wrote, since you finally now state "Looks like a bug..."
I responded to your original comment which I got notified about via mail but I see you edited it, so sorry if this is confusing now ;-)

[smhigley]

Oh yeah, that's definitely a bug, thanks for finding it! Looks like the v8 Dropdown is actually also not setting aria-invalid correctly -- it should go on the element with role=combobox, it does nothing on the <span> that currently has it 😅.

I'll make a PR that fixes both. Thanks again!