fix(a11y)-10: add accessible name to Loader progress indicator when t…

[Sagar-6203620715]

Summary

This PR fixes an accessibility issue by ensuring the Loader progress indicator always has an accessible name.

Related Issue

Partially fixes #4385
Addresses point 10 (ARIA progressbar name)

Changes

• Updated Loader to add an aria-label to CircularProgress
• Added a fallback accessible name ("Loading") when the title prop is empty
• Fixed ARIA progressbar name violation in Storybook

Steps to Test

1. Run npm run frontend:test:a11y
2. Open Storybook and navigate to the Loader → WithEmptyTitle story
3. Verify no ARIA progressbar name violations are reported

Screenshots (if applicable)

N/A

Notes for the Reviewer

• Uses a minimal, standards-compliant ARIA fix

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Sagar-6203620715
Once this PR has been reviewed and has the lgtm label, please assign yolossn for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[Copilot]

Pull request overview

This PR addresses an accessibility violation by ensuring the Loader component's progress indicator always has an accessible name, fixing issue #4385 point 10 (ARIA progressbar name).

Changes:

• Added aria-label attribute to the CircularProgress component with a fallback value of "Loading" when the title prop is empty

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The new aria-label attribute is not covered by tests. The existing test at line 76-85 in Loader.test.tsx only checks the title attribute when it's empty, but doesn't verify that aria-label is set to "Loading" in that case. Consider adding test assertions to verify that aria-label is correctly set to the title value when provided, and to "Loading" when the title is empty.

[illume]

Thanks for this!

To update the snapshots you can run this.

npm run test -- -u

You can check things locally with these commands.

npm run tsc
npm run lint
npm run test
npm run format

Please check the open comments?

[k8s-ci-robot]

PR needs rebase.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[illume]

hey hey.

I'll mark this as draft for now to make it easier on reviewers. If you want to continue it, please mark it as ready to review when you've pushed changes.