Add aria-disabled to inactive pagination buttons (#3862)

* Add `aria-disabled` to inactive pagination buttons (next/previous) * Add changeset
primer · Oct 25, 2023 · 8cd6007 · 8cd6007
1 parent add9689
commit 8cd6007
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/.changeset/grumpy-clocks-sell.md b/.changeset/grumpy-clocks-sell.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Adds `aria-disabled` to inactive pagination buttons.
diff --git a/src/DataTable/Pagination.tsx b/src/DataTable/Pagination.tsx
@@ -226,6 +226,7 @@ export function Pagination({
               className="TablePaginationAction"
               type="button"
               data-has-page={hasPreviousPage ? true : undefined}
+              aria-disabled={!hasPreviousPage ? true : undefined}
               onClick={() => {
                 if (!hasPreviousPage) {
                   return
@@ -306,6 +307,7 @@ export function Pagination({
               className="TablePaginationAction"
               type="button"
               data-has-page={hasNextPage ? true : undefined}
+              aria-disabled={!hasNextPage ? true : undefined}
               onClick={() => {
                 if (!hasNextPage) {
                   return