[a11y]: Loading- Notifying Screen Reader Users when "loading" is completed

[2nikhiltom]

Package

@carbon/react

Browser

No response

Operating System

No response

Package version

v1.56.0

React version

18.02

Automated testing tool and ruleset

Manual QA

Assistive technology

JAWS

Description

When the active prop is false, Visually loading symbol disappears but SR still announcing as "Loading".

Screen.Recording.2024-05-10.at.12.32.33.mov

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-loading--playground

Recommend Fix

below are two approaches

• The loader should have aria-busy set to false when it is set as false
• For screen reader users, it's helpful to provide an "Loading complete" aria-status message when the spinning wheel disappears. This notifies them when the page is ready, saving them from continuously checking its status.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

The second approach could be something like this

carbon/packages/react/src/components/TextArea/TextArea.tsx

Lines 461 to 463 in f0d89db

	<span className={`${prefix}--text-area__counter-alert`} role="alert">
	{ariaAnnouncement}
	</span>