From 4cbb09dc7d9c1785991b76173d02f593300c2e53 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 24 May 2024 12:45:14 -0600
Subject: [PATCH 1/4] fix: [Table] Pagination input label's 'for' property 
 needs to align with the input id

---
 src/components/Pagination/Pagination.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 1ace0094..bb4166af 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -96,14 +96,14 @@ const PaginationInput = ({
   return (
     <Label
       className='m-pagination_label'
-      htmlFor='m-pagination_current-page'
+      htmlFor='pagination_current-page'
       inline
     >
       Page
       <span className='u-visually-hidden'>number {page} out</span>
       <input
         className='m-pagination_current-page'
-        id='m-pagination_current-page-default'
+        id='pagination_current-page'
         name='page'
         type='number'
         min='1'

From 2a1eb6cf1cfd0faa1fdeb1b3475ae388c2b8df5c Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 24 May 2024 15:25:43 -0600
Subject: [PATCH 2/4] fix: [Table, Pagination] - Uniquely identify pagination
 <input> elements - Correctly associate pagination <input> labels with the
 input id

---
 src/components/Pagination/Pagination.tsx | 16 ++++++++++------
 src/components/Table/Table.tsx           |  7 ++++++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index bb4166af..85eefb01 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -8,6 +8,8 @@ import './pagination.less';
 import { MIN_PAGE } from './paginationConstants';
 
 export interface PaginationProperties {
+  /** Identifier of the table this element controls */
+  tableId: string;
   /** Currently displayed page number  */
   page: number;
   /** Total number of available pages */
@@ -79,12 +81,14 @@ const PaginationNavButton = ({
 };
 
 interface PaginationInputProperties {
+  tableId: string;
   page: number;
   pageCount: number;
   onChange: (value: number) => void;
 }
 
 const PaginationInput = ({
+  tableId,
   page,
   pageCount,
   onChange
@@ -93,17 +97,15 @@ const PaginationInput = ({
     onChange(Number.parseInt(event.currentTarget.value, 10));
   };
 
+  const inputId = `${tableId}-pagination_current-page`;
+
   return (
-    <Label
-      className='m-pagination_label'
-      htmlFor='pagination_current-page'
-      inline
-    >
+    <Label className='m-pagination_label' htmlFor={inputId} inline>
       Page
       <span className='u-visually-hidden'>number {page} out</span>
       <input
         className='m-pagination_current-page'
-        id='pagination_current-page'
+        id={inputId}
         name='page'
         type='number'
         min='1'
@@ -124,6 +126,7 @@ const PaginationInput = ({
  * Source: https://cfpb.github.io/design-system/components/pagination
  */
 export const Pagination = ({
+  tableId,
   page,
   pageCount,
   onClickPrevious = noOp,
@@ -168,6 +171,7 @@ export const Pagination = ({
         onSubmit={onSubmit}
       >
         <PaginationInput
+          tableId={tableId}
           page={pageNumber}
           pageCount={pageCount}
           onChange={onInputChange}
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index bfc8516c..624a5e3b 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -25,6 +25,8 @@ export interface TableColumnConfiguration {
 export type TableColumn = TableColumnConfiguration | string;
 
 export interface TableProperties {
+  // Unique identifier
+  id: string;
   // Table description, displayed atop the table
   caption?: ReactNode;
   // Array of column headers or column configurations
@@ -55,6 +57,7 @@ export interface TableProperties {
  * Source: https://cfpb.github.io/design-system/components/tables
  */
 export const Table = ({
+  id,
   caption,
   columns,
   rows,
@@ -95,7 +98,9 @@ export const Table = ({
         {buildColumnHeaders(columns)}
         {buildRows(visibleRows, columns)}
       </table>
-      {isPaginated ? <Pagination {...paginationProperties} /> : null}
+      {isPaginated ? (
+        <Pagination {...paginationProperties} tableId={id} />
+      ) : null}
     </>
   );
 

From f067dc33436803b87af04584001e32b33a10d331 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Tue, 28 May 2024 12:17:20 -0600
Subject: [PATCH 3/4] feat: [Table] Auto generate ID if not provided

---
 src/components/Table/Table.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 624a5e3b..5dcf9e1e 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type ReactNode } from 'react';
+import { useId, type ReactNode } from 'react';
 import type { JSXElement } from '~/src/types/jsxElement';
 import { type WidthPercent } from '../../types/WidthPercent';
 import { Pagination } from '../Pagination/Pagination';
@@ -26,7 +26,7 @@ export type TableColumn = TableColumnConfiguration | string;
 
 export interface TableProperties {
   // Unique identifier
-  id: string;
+  id?: string;
   // Table description, displayed atop the table
   caption?: ReactNode;
   // Array of column headers or column configurations
@@ -78,6 +78,8 @@ export const Table = ({
     perPage
   });
 
+  const tableId = useId();
+
   const tableClassnames = [];
 
   if (isResponsive || isDirectory)
@@ -92,6 +94,7 @@ export const Table = ({
       <table
         data-testid='table-testid'
         className={classNames(tableClassnames)}
+        id={id ?? tableId}
         {...others}
       >
         <Caption>{caption}</Caption>
@@ -99,7 +102,7 @@ export const Table = ({
         {buildRows(visibleRows, columns)}
       </table>
       {isPaginated ? (
-        <Pagination {...paginationProperties} tableId={id} />
+        <Pagination {...paginationProperties} tableId={id ?? tableId} />
       ) : null}
     </>
   );

From 281e57e94f633395de084ce6470f7345b6f9e7c1 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Tue, 28 May 2024 12:24:40 -0600
Subject: [PATCH 4/4] feat: [Pagination] Generate own ID if one not provided by
 parent Table

---
 src/components/Pagination/Pagination.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 85eefb01..bede81b4 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { EventHandler, ReactElement, SyntheticEvent } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 import { noOp } from '../../utils/noOp';
 import { Icon } from '../Icon/Icon';
 import { Label } from '../Label/Label';
@@ -9,7 +9,7 @@ import { MIN_PAGE } from './paginationConstants';
 
 export interface PaginationProperties {
   /** Identifier of the table this element controls */
-  tableId: string;
+  tableId?: string;
   /** Currently displayed page number  */
   page: number;
   /** Total number of available pages */
@@ -146,6 +146,8 @@ export const Pagination = ({
     onClickGo(targetPage);
   };
 
+  const paginationId = useId();
+
   const onInputChange = setPageNumber;
 
   return (
@@ -171,7 +173,7 @@ export const Pagination = ({
         onSubmit={onSubmit}
       >
         <PaginationInput
-          tableId={tableId}
+          tableId={tableId ?? paginationId}
           page={pageNumber}
           pageCount={pageCount}
           onChange={onInputChange}