chore: expose the controls label for localization within Table

Author: leeBigCommerce

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}

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}

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'> {

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}

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}

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'> {

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.',
   },
 ];