From 141650be413adddc60a48e20b3e59e46c8b7b149 Mon Sep 17 00:00:00 2001
From: leeBigCommerce <lee.dunkley@bigcommerce.com>
Date: Tue, 10 Dec 2024 10:32:10 +1100
Subject: [PATCH] chore: expose the controls label for localization within
 Table

---
 .changeset/dull-melons-add.md                  |  6 ++++++
 .../src/components/Table/Actions/Actions.tsx   |  4 +++-
 .../big-design/src/components/Table/Table.tsx  | 18 +++++++++---------
 .../big-design/src/components/Table/types.ts   |  7 ++++---
 .../components/TableNext/Actions/Actions.tsx   |  4 +++-
 .../src/components/TableNext/TableNext.tsx     | 18 +++++++++---------
 .../src/components/TableNext/types.ts          |  7 ++++---
 packages/docs/PropTables/TablePropTable.tsx    |  2 +-
 8 files changed, 39 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/dull-melons-add.md

diff --git a/.changeset/dull-melons-add.md b/.changeset/dull-melons-add.md
new file mode 100644
index 000000000..28eab1105
--- /dev/null
+++ b/.changeset/dull-melons-add.md
@@ -0,0 +1,6 @@
+---
+'@bigcommerce/big-design': minor
+'@bigcommerce/docs': minor
+---
+
+Enables the localization of the Table component's controls label. The controls label names the toolbar, which contains all pagination and selection inputs for the table.
diff --git a/packages/big-design/src/components/Table/Actions/Actions.tsx b/packages/big-design/src/components/Table/Actions/Actions.tsx
index a2902c17c..236e6b9a6 100644
--- a/packages/big-design/src/components/Table/Actions/Actions.tsx
+++ b/packages/big-design/src/components/Table/Actions/Actions.tsx
@@ -19,6 +19,7 @@ export interface ActionsProps<T> {
   selectedItems: Set<T>;
   stickyHeader?: boolean;
   tableId: string;
+  label: string;
 }
 
 const InternalActions = <T extends TableItem>({
@@ -31,6 +32,7 @@ const InternalActions = <T extends TableItem>({
   selectedItems,
   stickyHeader,
   tableId,
+  label,
   ...props
 }: ActionsProps<T>) => {
   const isSelectable = typeof onSelectionChange === 'function';
@@ -59,7 +61,7 @@ const InternalActions = <T extends TableItem>({
     <StyledFlex
       alignItems="center"
       aria-controls={tableId}
-      aria-label="Table Controls"
+      aria-label={label}
       flexDirection="row"
       justifyContent="stretch"
       ref={forwardedRef}
diff --git a/packages/big-design/src/components/Table/Table.tsx b/packages/big-design/src/components/Table/Table.tsx
index c8111fef1..d7f21c60c 100644
--- a/packages/big-design/src/components/Table/Table.tsx
+++ b/packages/big-design/src/components/Table/Table.tsx
@@ -13,16 +13,12 @@ import { HeaderCell } from './HeaderCell';
 import { DragIconHeaderCell, HeaderCheckboxCell } from './HeaderCell/HeaderCell';
 import { Row } from './Row';
 import { StyledTable, StyledTableFigure } from './styled';
-import { TableColumn, TableItem, TableProps } from './types';
+import { Localization, TableColumn, TableItem, TableProps } from './types';
 
-interface Localization {
-  ascendingOrder: string;
-  descendingOrder: string;
-}
-
-const defaultLocalization: Localization = {
+const defaultLocalization: Required<Localization> = {
   ascendingOrder: 'Ascending order',
   descendingOrder: 'Descending order',
+  controlsLabel: 'Table Controls',
 };
 
 const InternalTable = <T extends TableItem>(
@@ -38,7 +34,7 @@ const InternalTable = <T extends TableItem>(
     itemName,
     items,
     keyField = 'id',
-    localization = defaultLocalization,
+    localization: customLocalization,
     onRowDrop,
     pagination: undiscriminatedPagination,
     selectable,
@@ -47,7 +43,10 @@ const InternalTable = <T extends TableItem>(
     style,
     ...rest
   } = props;
-
+  const localization = useMemo(
+    () => ({ ...defaultLocalization, ...customLocalization }),
+    [customLocalization],
+  );
   const pagination = useMemo(
     () => undiscriminatedPagination && discriminatePagination(undiscriminatedPagination),
     [undiscriminatedPagination],
@@ -258,6 +257,7 @@ const InternalTable = <T extends TableItem>(
           forwardedRef={actionsRef}
           itemName={itemName}
           items={items}
+          label={localization.controlsLabel}
           onSelectionChange={selectable?.onSelectionChange}
           pagination={pagination}
           selectedItems={selectedItems}
diff --git a/packages/big-design/src/components/Table/types.ts b/packages/big-design/src/components/Table/types.ts
index 292789df3..e30156e4e 100644
--- a/packages/big-design/src/components/Table/types.ts
+++ b/packages/big-design/src/components/Table/types.ts
@@ -51,9 +51,10 @@ export type TablePaginationProps =
   | WithoutMarginProps<OffsetPaginationProps>
   | WithoutMarginProps<StatelessPaginationPropsWithItemTotal>;
 
-interface Localization {
-  ascendingOrder: string;
-  descendingOrder: string;
+export interface Localization {
+  ascendingOrder?: string;
+  descendingOrder?: string;
+  controlsLabel?: string;
 }
 
 export interface TableProps<T> extends ComponentPropsWithoutRef<'table'> {
diff --git a/packages/big-design/src/components/TableNext/Actions/Actions.tsx b/packages/big-design/src/components/TableNext/Actions/Actions.tsx
index bde65ca34..9a16f713a 100644
--- a/packages/big-design/src/components/TableNext/Actions/Actions.tsx
+++ b/packages/big-design/src/components/TableNext/Actions/Actions.tsx
@@ -30,6 +30,7 @@ export interface ActionsProps<T> {
   setSelectedParentRowsCrossPages: Dispatch<SetStateAction<Set<string>>>;
   selectedParentRowsCrossPages: Set<string>;
   isChildrenRowsSelectable?: boolean;
+  label: string;
 }
 
 const InternalActions = <T extends TableItem>({
@@ -47,6 +48,7 @@ const InternalActions = <T extends TableItem>({
   setSelectedParentRowsCrossPages,
   selectedParentRowsCrossPages,
   isChildrenRowsSelectable,
+  label,
   ...props
 }: ActionsProps<T>) => {
   const isSelectable = typeof onSelectionChange === 'function';
@@ -75,7 +77,7 @@ const InternalActions = <T extends TableItem>({
     <StyledFlex
       alignItems="center"
       aria-controls={tableId}
-      aria-label="Table Controls"
+      aria-label={label}
       flexDirection="row"
       justifyContent="stretch"
       ref={forwardedRef}
diff --git a/packages/big-design/src/components/TableNext/TableNext.tsx b/packages/big-design/src/components/TableNext/TableNext.tsx
index e81a009f3..7c1c59f10 100644
--- a/packages/big-design/src/components/TableNext/TableNext.tsx
+++ b/packages/big-design/src/components/TableNext/TableNext.tsx
@@ -18,16 +18,12 @@ import { getPagedIndex } from './helpers';
 import { useExpandable, useSelectable } from './hooks';
 import { RowContainer } from './RowContainer';
 import { StyledTable, StyledTableFigure } from './styled';
-import { TableColumn, TableItem, TableProps } from './types';
+import { Localization, TableColumn, TableItem, TableProps } from './types';
 
-interface Localization {
-  ascendingOrder: string;
-  descendingOrder: string;
-}
-
-const defaultLocalization: Localization = {
+const defaultLocalization: Required<Localization> = {
   ascendingOrder: 'Ascending order',
   descendingOrder: 'Descending order',
+  controlsLabel: 'Table Controls',
 };
 
 const InternalTableNext = <T extends TableItem>(
@@ -44,7 +40,7 @@ const InternalTableNext = <T extends TableItem>(
     itemName,
     items,
     keyField = 'id',
-    localization = defaultLocalization,
+    localization: customLocalization,
     pagination: undiscriminatedPagination,
     selectable,
     sortable,
@@ -60,7 +56,10 @@ const InternalTableNext = <T extends TableItem>(
     },
     ...rest
   } = props;
-
+  const localization = useMemo(
+    () => ({ ...defaultLocalization, ...customLocalization }),
+    [customLocalization],
+  );
   const pagination = useMemo(
     () => undiscriminatedPagination && discriminatePagination(undiscriminatedPagination),
     [undiscriminatedPagination],
@@ -288,6 +287,7 @@ const InternalTableNext = <T extends TableItem>(
           isChildrenRowsSelectable={isChildrenRowsSelectable}
           itemName={itemName}
           items={items}
+          label={localization.controlsLabel}
           onSelectionChange={selectable?.onSelectionChange}
           pagination={pagination}
           selectedItems={selectedItems}
diff --git a/packages/big-design/src/components/TableNext/types.ts b/packages/big-design/src/components/TableNext/types.ts
index 321049c55..e12d439bf 100644
--- a/packages/big-design/src/components/TableNext/types.ts
+++ b/packages/big-design/src/components/TableNext/types.ts
@@ -67,9 +67,10 @@ export type TablePaginationProps =
   | WithoutMarginProps<OffsetPaginationProps>
   | WithoutMarginProps<StatelessPaginationPropsWithItemTotal>;
 
-interface Localization {
-  ascendingOrder: string;
-  descendingOrder: string;
+export interface Localization {
+  ascendingOrder?: string;
+  descendingOrder?: string;
+  controlsLabel?: string;
 }
 
 export interface TableProps<T> extends ComponentPropsWithoutRef<'table'> {
diff --git a/packages/docs/PropTables/TablePropTable.tsx b/packages/docs/PropTables/TablePropTable.tsx
index e604a401f..4ddf418e6 100644
--- a/packages/docs/PropTables/TablePropTable.tsx
+++ b/packages/docs/PropTables/TablePropTable.tsx
@@ -113,7 +113,7 @@ const tableProps: Prop[] = [
   },
   {
     name: 'localization',
-    types: '{ ascendingOrder: string, descendingOrder: string }',
+    types: '{ ascendingOrder?: string, descendingOrder?: string, controlsLabel?: string }',
     description: 'Overrides the labels with localized text.',
   },
 ];