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

.changeset/eleven-radios-work.md

@@ -0,0 +1,9 @@
+---
+"@cloudflare/kumo": patch
+---
+
+fix(pagination): add ARIA attributes for screen reader accessibility
+
+- Wrap pagination controls in `<nav>` for proper landmark navigation
+- Add `aria-live="polite"` and `aria-atomic="true"` to status text for page change announcements
+- Add `navigation` to `PaginationLabels` for i18n customization of the nav aria-label

packages/kumo/src/components/pagination/pagination.tsx

@@ -35,6 +35,8 @@ const clamp = (value: number, min: number, max: number) =>
  * `label` prop on `Pagination.PageSize`.
  */
 export interface PaginationLabels {
+  /** Aria label for the navigation landmark. @default "Pagination" */
+  navigation?: string;
   /** Aria label for the first page button. @default "First page" */
   firstPage?: string;
   /** Aria label for the previous page button. @default "Previous page" */
@@ -50,6 +52,7 @@ export interface PaginationLabels {
 }
 
 const DEFAULT_LABELS: Required<PaginationLabels> = {
+  navigation: "Pagination",
   firstPage: "First page",
   previousPage: "Previous page",
   nextPage: "Next page",
@@ -247,7 +250,7 @@ function PaginationControls({
       data-slot="pagination-controls"
       className={cn("grow flex flex-col items-end", className)}
     >
-      <div>
+      <nav aria-label={labels.navigation}>
         <InputGroup focusMode="individual">
           {controls === "full" && (
             <InputGroup.Button
@@ -346,7 +349,7 @@ function PaginationControls({
             </InputGroup.Button>
           )}
         </InputGroup>
-      </div>
+      </nav>
     </div>
   );
 }
@@ -596,6 +599,8 @@ function PaginationRoot(props: PaginationProps) {
         className={cn("flex items-center gap-2 w-full", className)}
       >
         <div
+          aria-live="polite"
+          aria-atomic="true"
           data-slot="pagination-info"
           className="grow text-sm text-kumo-strong"
         >