Handling accessibility in Combobox's requests status (loading, error)

[GustavoHenriqueP]

I'm creating a SearchBar using the Combobox component and I had questions about how to deal with the status of requests.

My initial idea was:

• If you are loading the results list for the first time (and it is taking some time): Instead of opening the Popover with a ListBox without results, show a Popover with a ProgressBar configured with isInderteminate and a loading message
• If an error occurred in a request: Show a Popover with a div with role="alert" with the error message and a button to retry the request.

I would like some help to know if this treatment of request states is in agreement from an accessibility point of view and how I could do this, as I had two problems:

• NVDA did not announce that the list was loading when opening the Combobox content
• The error message was announced, but I cannot focus the retry button.

Any help would be appreciated. Thanks!

[snowystinger]

I'm not sure what the retry button is, if it's an interactive child of the empty popover, that's not allowed. The only thing in the popover can be the listbox so that virtual focus management works. Otherwise you cannot keyboard navigate to the retry button.

Does https://react-spectrum.adobe.com/react-aria/ComboBox.html#asynchronous-loading meet your needs?

What version of our libraries are you on? it looks like we had a recent fix for something related #8708

[GustavoHenriqueP]

Hey, @snowystinger! Thanks for the response.

I'm on the latest version of RAC, from the October 2nd release. I checked #8708, and it's not related to this case.

About the retry button, it was indeed an interactive child, which would retry a failed request. I removed it from the Popover for now. Maybe the best place to put it, is in the ComboBox's input group?

The async loading docs helped me to implement an infinite scrolling list, but I don't know if the ListBoxLoadMoreItem would help to indicate a "first" loading status when opening the Popover, as it also doesn't announce the loading status via the screen reader.

Here is a minimal setup simulating the user flow of what I'm trying to handle: https://codesandbox.io/p/devbox/6pdzzy.

1. Activate the screen reader
2. Click on the SearchBar, it will open the Popover with a loading message, simulating a user's bad internet connection when loading the suggestions list
3. Wait for an instant, the Popover will now indicate that the request failed

The main problem I'm facing is: The screen reader (Windows's NVDA on Chrome) is not announcing the initial loading status, while it successful announces the error status.
Maybe I should let the loading message visible only in the Popover, but implement a hidden loading message on the Input Group? Or maybe this status handling I'm making is not the ideal?

[snowystinger]

Hmm the sandbox appears to announce the error well with VO + Safari. One gotcha with aria-live regions is that they only announce changes. They do not announce on initial mount. This is just a known thing with the way they work. So if you have initial content you want it to announce, you need to delay adding it to the live region for a frame. That's probably why it isn't announcing the loading message but is announcing the error.

[GustavoHenriqueP]

I tried to invert the order of the events to try this behavior on aria-live regions: First the error appears on mount (In my case the screen reader is inconsistent, sometimes announcing it, sometimes not), and then, after 15s, the loading message appears, but NVDA + Chrome still doesn't announce it.

By any chance, do you have any success testing this with VO + Safari?

[snowystinger]

This announces both of them for me https://codesandbox.io/p/devbox/rac-combobox-requests-status-forked-58xc3q?file=%2Fsrc%2Fcomponents%2FSearchBarList.tsx%3A26%2C28
But only when I have VO hints turned off, those seem to take some level of precedence over the live announcements sometimes, but not always.

Btw, you don't need both live=polite and role=alert, a role=alert is already live=assertive, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role

If things still aren't announcing, try again to render whatever the live region is, THEN, after some delay, add the message (like I do in the codesandbox). If you need to show the message within a shorter window, you can do something to change the dom after that delay such that the live region reads it. For instance, you could change a whitespace character or something.

I think there is also a conflict maybe happening with the search announcing how many options are available, because every now and again that message comes through.

This is all very tricky and it's not just you, but given that the error announces consistently and well for me. You could announce the loading as part of the control's label before you even open it. For instance, you could kick off loading like so https://reactspectrum.blob.core.windows.net/reactspectrum/a22a0aed3e97d0a23b9883679798b85eed68413d/storybook/index.html?path=/story/picker--loading&providerSwitcher-express=false

[GustavoHenriqueP]

Hmm, it also works on NVDA! I think I got it now and will be testing some of these solutions you presented. Thank you very much for your help! I learned a lot with it 😊.