Terra-core: [terra-overlay] Add aria screenreader a11y to loading overlay
Bug Report
Description
Loading Overlay currently can have text to support a visual loading indicator, but text is not required. Need to uplift loading-overlay to have proper aria-live, description, etc. for screenreader AT when present on screen, such that all users have awareness/understanding of the loading state.
neilpfeiffer
All 5 comments
@neilpfeiffer @mmalaker
What is the behavior that is expected when there are multiple components having the 'Loading Overlay' on a page? For now, I was simply hoping to add aria-live="assertive" here which helps the screen-reader read out "Loading" in the 'Loading Overlay' example.
Should there be custom messages involved to convey that the Loading Overlay is open now and it has disappeared etc?
nramamurth
on 29 Jul 2019
@neilpfeiffer
I'd like to follow-up on whether there need to be custom messages involved as part of this fix.
nramamurth
on 7 Aug 2019
Talked about not wanting to announce multiple loading messages if page is loading multiple containers.
Some ideas we talked about were making a loadingMessage prop to populate a visually-hidden content. Default to translated loading string. Need to talk through this some more to firm up a solution.
bjankord
on 22 Aug 2019
In order to not announce multiple loading messages, it seems like aria-live="polite" is the better way to go.
Plus, in a Stack Overflow article I was reading on the subject, I saw some concerning information on the assertive attribute:
User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs.
This tells me that if you've got a warning alert in the queue and an assertive loading overlay hits the browser, the queued warning would likely get wiped out, which would be a safety issue. Polite overlays would go to the bottom of the queue and wouldn't be announced until after any other higher priority items.
jeremyfuksa
on 1 Oct 2019
Thanks, @jeremyfuksa!
Need to talk through this some more to firm up a solution.
@neilpfeiffer @bjankord Has there been further discussion around adding a loadingMessage prop?
nramamurth
on 3 Oct 2019
Related issues
noahbenham
路
4Comments
saisanthosh225
路
5Comments
FloraChenCerner
路
4Comments
noahbenham
路
5Comments
juliacalandro
路
3Comments
Most helpful comment
In order to not announce multiple loading messages, it seems like
aria-live="polite"is the better way to go.Plus, in a Stack Overflow article I was reading on the subject, I saw some concerning information on the
assertiveattribute:This tells me that if you've got a warning alert in the queue and an assertive loading overlay hits the browser, the queued warning would likely get wiped out, which would be a safety issue. Polite overlays would go to the bottom of the queue and wouldn't be announced until after any other higher priority items.