fix(pagination): add current page information for screen readers (#6637)

**Related Issue:** #5590 ## Summary Add `aria-current` to provide state information.
Esri · Mar 24, 2023 · 335f947 · 335f947
1 parent b97049e
commit 335f947
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/pagination/pagination.e2e.ts b/src/components/pagination/pagination.e2e.ts
@@ -8,7 +8,8 @@ describe("calcite-pagination", () => {
 
   it("honors hidden attribute", async () => hidden("calcite-pagination"));
 
-  it("is accessible", async () => accessible(`<calcite-pagination></calcite-pagination>`));
+  it("is accessible", async () =>
+    accessible(`<calcite-pagination page-size="10" start-item="50" total-items="100"></calcite-pagination>`));
 
   it("supports translations", () => t9n("calcite-pagination"));
 

diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
@@ -259,12 +259,14 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
     };
 
     const displayedPage = numberStringFormatter.localize(page.toString());
+    const selected = start === this.startItem;
 
     return (
       <button
+        aria-current={selected ? "page" : "false"}
         class={{
           [CSS.page]: true,
-          [CSS.selected]: start === this.startItem
+          [CSS.selected]: selected
         }}
         onClick={() => {
           this.startItem = start;