fix(loader): add aria attributes for screen reader accessibility

[msmps]

Description

• Add role="status" and aria-label="Loading" to the Loader SVG component
• Resolves WCAG 2.1 SC 4.1.3 (Status Messages - Level AA) violation

Problem

The Loader component renders an SVG spinner without any accessibility attributes, making it completely invisible to screen readers. When used as a loading indicator (e.g., in buttons, page transitions, async operations), assistive technology users receive no indication that content is loading.

Screen readers skip over the Loader entirely - users hear nothing.

Solution

Add two ARIA attributes to the SVG element:

• role="status" - Indicates this is a live region for status updates
• aria-label="Loading" - Provides the accessible name announced by screen readers

Screen readers announce "Loading, status" when the Loader is present.

Testing

Verified with VoiceOver on macOS:

1. Enable VoiceOver (Cmd + F5)
2. Navigate to a Loader component (Ctrl + Option + →)
3. Confirm announcement: "Loading, status"

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@46

commit: 58d5b47

[github-actions]

Docs Preview

View docs preview

Commit: 58d5b47

[github-actions]

Visual Regression Report

2 screenshot(s) with visual changes:

Loader / Loader Basic

47 px (0.05%) changed

Before	After	Diff

Loader / Loader Custom Size

71 px (0.07%) changed

Before	After	Diff

---

Generated by Kumo Visual Regression

[stritt]

/bonk please update code based on this comment className={className}
style={{ height: sizeValue, width: sizeValue }}
role="status"
aria-label="Loading"
Member
@mattrothenberg
mattrothenberg
on Feb 26
Can we make this a prop with a default value of "loading" so that we can ultimately pass a translated string down where we consume this?

afterwards review code and provide feedback

[ask-bonk]

Thanks for this accessibility improvement! Adding role="status" is definitely the right approach for WCAG 4.1.3 compliance.

I agree with @mattrothenberg's suggestion about making aria-label a prop with a default value of "Loading". This would allow consumers to pass translated strings for internationalization support, which is important for a design system component.

Suggested approach:

export interface LoaderProps {
  /** Accessible label for screen readers. @default "Loading" */
  'aria-label'?: string;
  // ... existing props
}

export const Loader = ({
  className,
  size = KUMO_LOADER_DEFAULT_VARIANTS.size,
  'aria-label': ariaLabel = 'Loading',
}: LoaderProps) => {
  // ...
  <svg
    role="status"
    aria-label={ariaLabel}
    // ...
  >

This maintains backward compatibility while enabling i18n. Once that's addressed, this should be good to merge!

[ask-bonk]

✅ Review submitted for PR #46

The review acknowledges this is a valuable accessibility improvement for WCAG 2.1 compliance. I agreed with @mattrothenberg's existing feedback about making aria-label a configurable prop to support internationalization. The suggestion shows how to implement this while maintaining backward compatibility by using a default value of "Loading".

Summary of feedback:

• ✅ role="status" is correctly added for live region announcements
• ✅ The changeset is properly formatted
• 💡 Suggested making aria-label a prop with default value for i18n support

Once the author addresses the i18n suggestion, this PR should be ready to merge.

github run