chore: includes label for select all checkbox

wwnorton · Apr 9, 2024 · ede3d4e · ede3d4e
1 parent 274dab7
commit ede3d4e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git 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
@@ -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
@@ -26,6 +26,7 @@ export interface TableHeadCellProps {
 	className?: string;
 	sortType?: 'none' | 'ascending' | 'descending' | 'other' | undefined;
 	onSort?: VoidFunction;
+	'aria-label'?: string;
 }
 
 export interface TableHeaderProps {