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

[msmps]

Description

• Wrap pagination controls in <nav aria-label="Pagination">
• Add role="status" and aria-live="polite" to "Showing X-Y of Z" text for page change announcements
• Resolves WCAG 2.1 SC 1.3.1 (Info and Relationships) and SC 4.1.3 (Status Messages) violations

Problem

1. Controls were wrapped in a generic <div>
2. The "Showing X-Y of Z" status text wasn't announced when pages changed

Solution

Add semantic HTML and ARIA attributes:

• <nav aria-label="Pagination">
• role="status" - Identifies the "Showing X-Y of Z" text as a status region
• aria-live="polite" - Announces page range changes without interrupting user

Testing

Verified with VoiceOver on macOS:

1. Enable VoiceOver (Cmd + F5)
2. Use rotor (Ctrl + Option + U) to open landmarks menu
3. Confirm "Pagination, navigation" appears in the list
4. Navigate between pages and confirm "Showing X-Y of Z" is announced

Question: Are we aligned on using <nav> over <div role="navigation">?

[pkg-pr-new]

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

commit: 6a06ca0

[mattrothenberg]

@msmps small merge conflict in this one FYI

[github-actions]

Docs Preview

View docs preview

Commit: 6a06ca0

[github-actions]

Visual Regression Report

9 screenshot(s) with visual changes:

Button / Variants

Before	After

Button / Loading State

Before	After

Dialog / Basic Dialog

Before	After

Dialog / Confirmation Dialog (Alert)

Before	After

Dialog / With Actions

Before	After

Dialog (Open)

Before	After

Select / Select

Before	After

Select / Select.Option

Before	After

Select (Open)

Before	After

4 screenshot(s) unchanged

• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State

---

Generated by Kumo Visual Regression

[geoquant]

// instead of:
<div role="status" aria-live="polite" className="...">

// use:
<div aria-live="polite" aria-atomic="true" className="...">