From ede3d4ebbe96be43cdc0654067756478273cd6d7 Mon Sep 17 00:00:00 2001
From: Carlos Frias <cfrias@wwnorton.com>
Date: Thu, 4 Apr 2024 17:04:47 -0300
Subject: [PATCH] chore: includes label for select all checkbox

---
 .../src/components/Table/TableHeadCell.tsx    |  7 ++----
 .../src/components/Table/TableHeader.tsx      | 23 ++++++++++++++-----
 packages/react/src/components/Table/types.ts  |  1 +
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/Table/TableHeadCell.tsx b/packages/react/src/components/Table/TableHeadCell.tsx
index 62ce147c5..a46a04dad 100644
--- a/packages/react/src/components/Table/TableHeadCell.tsx
+++ b/packages/react/src/components/Table/TableHeadCell.tsx
@@ -6,6 +6,7 @@ export const TableHeadCell: React.FC<TableHeadCellProps> = ({
 	className: tableHeadCellClassName = 'nds-table__head-cell',
 	sortType,
 	children,
+	'aria-label': ariaLabel,
 	onSort,
 }) => {
 	const tableHeadCellClass = className(tableHeadCellClassName, {
@@ -15,11 +16,7 @@ export const TableHeadCell: React.FC<TableHeadCellProps> = ({
 	});
 
 	return (
-		<th
-			className={tableHeadCellClass}
-			aria-sort={sortType}
-			onClick={onSort}
-		>
+		<th className={tableHeadCellClass} aria-sort={sortType} onClick={onSort} aria-label={ariaLabel}>
 			{children}
 		</th>
 	);
diff --git a/packages/react/src/components/Table/TableHeader.tsx b/packages/react/src/components/Table/TableHeader.tsx
index 31b124464..323772616 100644
--- a/packages/react/src/components/Table/TableHeader.tsx
+++ b/packages/react/src/components/Table/TableHeader.tsx
@@ -6,21 +6,32 @@ import { Checkbox } from '../Checkbox';
 import { useId } from '../../utilities';
 import { TableRow } from './TableRow';
 
-export const TableHeader: React.FC<TableHeaderProps> = ({ children, className = 'nds-table__header' }) => {
+const SELECT_ALL_HEADER_LABEL = 'Select All';
+
+export const TableHeader: React.FC<TableHeaderProps> = ({
+	children,
+	className = 'nds-table__header',
+}) => {
 	const { selectable, onSelect, onSelectedAll, isSelectedAll } = useTableState();
 	const uniqueId = useId();
 
 	return (
 		<thead className={className}>
 			<TableRow isHeader>
-				{ selectable && onSelect ? (
-					<TableHeadCell>
-						<Checkbox id={uniqueId} checked={isSelectedAll} onChange={onSelectedAll} />
+				{selectable && onSelect ? (
+					<TableHeadCell aria-label={SELECT_ALL_HEADER_LABEL}>
+						<Checkbox
+							id={uniqueId}
+							checked={isSelectedAll}
+							labelClass="nds-sr-only"
+							onChange={onSelectedAll}
+						>
+							{SELECT_ALL_HEADER_LABEL}
+						</Checkbox>
 					</TableHeadCell>
-				) : null }
+				) : null}
 				{children}
 			</TableRow>
-
 		</thead>
 	);
 };
diff --git a/packages/react/src/components/Table/types.ts b/packages/react/src/components/Table/types.ts
index 9977f0894..da4d37224 100644
--- a/packages/react/src/components/Table/types.ts
+++ b/packages/react/src/components/Table/types.ts
@@ -26,6 +26,7 @@ export interface TableHeadCellProps {
 	className?: string;
 	sortType?: 'none' | 'ascending' | 'descending' | 'other' | undefined;
 	onSort?: VoidFunction;
+	'aria-label'?: string;
 }
 
 export interface TableHeaderProps {