[MM-18385] Force screen reader to read whole aria-live section on multiselect option change

[devinbinnie]

Summary

Firefox was not correctly reading the aria-live region of the multiselect component, instead it was reading bits and pieces as the text field was updated. This PR adds the aria-atomic label, which ensures the entire option is read correctly.

NOTE: Microsoft Edge continues to have issues with JAWS and NVDA. See: FreedomScientific/standards-support#266
Hopefully this will be fixed soon.

Tested on Firefox 69.0 and JAWS 2019.1907.42

Ticket Link

https://mattermost.atlassian.net/browse/MM-18385

[hmhealey]

I'm not sure if I understand what aria-atomic does, but why is it necessary here? Without it, it sounds like the screen reader will read out anything that changes in the label, but with it, it would read the entire label if any part of it changes?

Also, is it a problem that the outer .multi-select__wrapper div has an aria-live while the label nested inside it also has an aria-live?

[srkgupta]

Hi @devinbinnie
Will this also fix the other issue reported in the ticket, i.e.
Reader does not reads 'no results found' in the Direct messages Modal

Can you please check and confirm. If not, can you please fix this issue too.

[jespino]

LGTM

[devinbinnie]

@hmhealey aria-atomic forces the screen reader to read the label as a whole rather than individual text updates. My guess as to what was happening here was that the label was being read before the entire text string was interested, and it was reading each bit as it was inserted.

It seems really odd for it to be doing that, as I would assume the entire string would be inserted as a whole, but it appears to be the case as aria-atomic forced the reader to stop doing that. A11y standards are not consistently implemented across browsers as we can see.

[devinbinnie]

@hmhealey @srkgupta Well, it seems like my fix might not have done anything, as I can't get it to read properly with JAWS anymore. NVDA seems to read aria-live, but sometimes it reads multiple times...might be related to the above bug where Firefox read output multiple times.

JAWS refuses to read aria-live tags in Firefox. I'm sensing there's a bug in either the browser or JAWS, I don't think this is an issue with our software anymore.

[devinbinnie]

@asaadmahmood Do you recall adding any aria-hidden or any sort of tags that would hinder this from being read? That's the only thing I can think of having an issue with our software.

[asaadmahmood]

@devinbinnie Don't think so.

[devinbinnie]

Okay after further investigation I've identified this issue as an issue between JAWS and Firefox. See the JIRA ticket for more information.

We can still merge this as a fix for the Direct Messages modal reading individual pieces of the names, as the reading still works with Firefox using NVDA.

[devinbinnie]

@amyblais can this go into v5.16? I think it should as we should be supporting NVDA as much as possible.

[amyblais]

Sounds good,