[EuiLoadingChart][SCREENREADER]: Consider updating the loading indicators' role to "status" and adding aria-busy attribute

1Copenut commented 2 years ago

Summary

@cchaos has improved the EuiLoadingChart component by adding a role and aria-label. This changeset also included the other loading indicators.

I'd like to explore adding an aria-busy attribute to a wrapper, and/or changing the role to "status" for the loading indicators. The goal of this changeset will be to have screen readers announce the loading indicator without having to take keyboard focus. My comment from the original PR:

I agree with this iterative approach. Adding the role="progressbar" and aria-label="Loading" give clues that content is being fetched async. This technique assumes screen reader users are navigating node to node, using the virtual/browse mode. Users navigating by focus with the TAB key will not land on the loading indicator. Users who are listening for cues via live regions will also never hear this information.

I'm going to open a spike ticket to explore this concept in a future breaking change. I'd like to see us use the aria-busy attribute and move to a role="status" for these loading indicators. That way screen readers will announce changes as a live region without requiring us to manage focus or users to seek them out.

Our loading indicators are a good example of a WCAG 2.1 SC 4.1.3 status message, example #5:

An application displays a progressbar to indicate the status of an upgrade. The element is assigned a suitable role. The screen reader provides intermittent announcements of the progress.

Tasks

[ ] Develop proof-of-concept code that works across major screen readers (NVDA, JAWS, VoiceOver)
[ ] Test code with subject matter experts in a11y and UX
[ ] Add code with a breaking change PR

Success criteria

Zero axe-core (browser and CI) violations reported
Screen readers announce the Loading indicator without requiring keyboard focus OR
Content currently being loaded is hidden from users

Related issues

https://github.com/elastic/eui/issues/4814

Guidance

https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html

github-actions[bot] commented 2 years ago

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

cee-chen commented 1 year ago

NB: once https://github.com/elastic/eui/pull/6562 lands, we can reuse the <EuiSkeletonLoading> wrapper to automatically handle this behavior the same way the new EuiSkeleton components do

github-actions[bot] commented 1 year ago

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

github-actions[bot] commented 7 months ago

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.

cee-chen commented 7 months ago

@1Copenut would this issue be something you're interested in picking up / taking on instead of letting it close out?

elastic / eui