@12-apps/ui 6.78.4 → 6.79.0

package/src/components/data-display/LazyImage/LazyImage.tsx

@@ -3,9 +3,9 @@ import CircularProgress from '@mui/material/CircularProgress/index.js';
 import { styled, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 import { Skeleton } from '../../layout/Skeleton';
-import type { ResolvedLazyImageProps } from './LazyImage.hooks';
-import { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';
+import { imgPassThrough, resolveLazyImageProps, useLazyImage, type ResolvedLazyImageProps } from './LazyImage.hooks';
 import type { LazyImageProps } from './LazyImage.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { sheen } from '../../../tokens/ink';
 import { rem } from '../../../tokens/relative';
 import { fieldHeight } from '../../../tokens/field-height';
@@ -238,7 +238,7 @@ const PlaceholderIndicator: React.FC<IndicatorProps & { onError: () => void }> =
   return (
     <StyledImage
       src={props.placeholder}
-      alt={`${props.alt} (loading)`}
+      alt={props.placeholderAlt ?? EN_US_UI_LABELS.lazyImage.loadingAlt(props.alt)}
       style={metrics}
       decoding={props.decoding}
       loading={props.lazy ? 'lazy' : props.loading}
@@ -286,7 +286,7 @@ const ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {
     return (
       <StyledImage
         src={fallback}
-        alt={`${alt} (fallback)`}
+        alt={props.fallbackAlt ?? EN_US_UI_LABELS.lazyImage.fallbackAlt(alt)}
         style={metrics}
         fadeIn={false}
         isLoaded={true}

package/src/components/data-display/LazyImage/LazyImage.types.ts

@@ -14,6 +14,18 @@ export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement
    */
   alt: string;
 
+  /**
+   * The placeholder image's `alt` while the real one loads. Defaults to
+   * `UI_LABELS['en-US'].lazyImage.loadingAlt(alt)`, i.e. `<alt> (loading)`.
+   */
+  placeholderAlt?: string;
+
+  /**
+   * The string `fallback` image's `alt` after the real one failed. Defaults to
+   * `UI_LABELS['en-US'].lazyImage.fallbackAlt(alt)`, i.e. `<alt> (fallback)`.
+   */
+  fallbackAlt?: string;
+
   /**
    * Width of the image. A number above 1 is design px, scaled with the theme's
    * type scale. A number above 0 and up to 1 is a fraction of the

package/src/components/data-display/MapPreview/MapControlBar.tsx

@@ -11,6 +11,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { MAX_ZOOM, MIN_ZOOM } from './MapPreview.constants';
+import { resolveMapCopy } from './MapPreview.helpers';
 import type { MapType } from './MapPreview.types';
 import type { MapPreviewCopy } from '../../../copy';
 import { rem } from '../../../tokens/relative';
@@ -70,7 +71,9 @@ export const MapControlBar: FC<MapControlBarProps> = ({
   onCenter,
   onToggleMapType,
   onToggleFullscreen,
-}) => (
+}) => {
+  const text = resolveMapCopy(copy);
+  return (
   <MapControls data-testid="map-controls">
     <Tooltip title={copy.zoomIn} placement="left">
       <ControlButton
@@ -104,7 +107,7 @@ export const MapControlBar: FC<MapControlBarProps> = ({
         <CenterIcon fontSize="small" />
       </ControlButton>
     </Tooltip>
-    <Tooltip title={`Map type: ${mapType}`} placement="left">
+    <Tooltip title={text.mapTypeTitle(text.mapTypeNames[mapType])} placement="left">
       <ControlButton
         size="small"
         onClick={onToggleMapType}
@@ -125,4 +128,5 @@ export const MapControlBar: FC<MapControlBarProps> = ({
       </ControlButton>
     </Tooltip>
   </MapControls>
-);
+  );
+};

package/src/components/data-display/MapPreview/MapLayers.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { HEATMAP_VIEWBOX } from './MapPreview.constants';
-import type { ResolvedMapPreviewProps } from './MapPreview.helpers';
+import { resolveMapCopy, type ResolvedMapPreviewProps } from './MapPreview.helpers';
 import type { MapType } from './MapPreview.types';
 import { MapControlBar } from './MapControlBar';
 import { HeatmapOverlay, RouteOverlay } from './MapOverlays';
@@ -47,7 +47,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
         <MapSearchBar
           label={settings.copy.search}
           value={search.searchValue}
-          placeholder={settings.searchPlaceholder}
+          placeholder={settings.searchPlaceholder ?? resolveMapCopy(settings.copy).searchPlaceholder}
           isSearching={search.isSearching}
           onChange={search.setSearchValue}
           onSubmit={search.handleSearch}

package/src/components/data-display/MapPreview/MapMarkers.tsx

@@ -7,7 +7,9 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';
+import { resolveMapCopy } from './MapPreview.helpers';
 import type { LatLng, MapMarker } from './MapPreview.types';
+import type { MapPreviewCopy } from '../../../copy';
 import { bounceKeyframes } from './mapSurface';
 import { shadowInk } from '../../../tokens/ink';
 import { rem, rems } from '../../../tokens/relative';
@@ -75,15 +77,22 @@ export const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) =
   );
 };
 
-export const MapCoordinates: FC<{ position: LatLng; zoom: number }> = ({ position, zoom }) => (
+export const MapCoordinates: FC<{ position: LatLng; zoom: number; copy: MapPreviewCopy }> = ({
+  position,
+  zoom,
+  copy,
+}) => {
+  const text = resolveMapCopy(copy);
+  return (
   <CoordinatesDisplay data-testid="coordinates-display">
     <Typography variant="caption" sx={{ fontFamily: 'monospace' }}>
-      Lat: {position.lat.toFixed(6)}, Lng: {position.lng.toFixed(6)}
+      {text.coordinates(position.lat.toFixed(6), position.lng.toFixed(6))}
     </Typography>
     {zoom > 0 && (
       <Typography variant="caption" sx={{ fontFamily: 'monospace', display: 'block' }}>
-        Zoom: {zoom}
+        {text.zoomLevel(zoom)}
       </Typography>
     )}
   </CoordinatesDisplay>
-);
+  );
+};

package/src/components/data-display/MapPreview/MapPreview.helpers.ts

@@ -3,6 +3,8 @@ import { alpha } from '@mui/material/styles/index.js';
 
 import { DEFAULT_ZOOM } from './MapPreview.constants';
 import type { MapPreviewProps } from './MapPreview.types';
+import type { MapPreviewCopy } from '../../../copy/data-display';
+import { EN_US_MAP_PREVIEW_COPY } from '../../../en-US.data-display';
 import { rem } from '../../../tokens/relative';
 
 type MapDefaultedKeys =
@@ -14,7 +16,6 @@ type MapDefaultedKeys =
   | 'variant'
   | 'showControls'
   | 'showSearch'
-  | 'searchPlaceholder'
   | 'showRoute'
   | 'heatmapData'
   | 'showHeatmap'
@@ -32,13 +33,23 @@ const MAP_PREVIEW_DEFAULTS: Pick<MapPreviewProps, MapDefaultedKeys> = {
   variant: 'default',
   showControls: true,
   showSearch: false,
-  searchPlaceholder: 'Search location...',
   showRoute: false,
   heatmapData: [],
   showHeatmap: false,
   animated: true,
 };
 
+/**
+ * The copy the map renders: the host's pack over the English one, key by key,
+ * so a pack written before the optional keys existed still renders every word.
+ */
+export const resolveMapCopy = (copy: MapPreviewCopy): Required<MapPreviewCopy> => ({
+  ...EN_US_MAP_PREVIEW_COPY,
+  ...(Object.fromEntries(
+    Object.entries(copy).filter(([, value]) => value !== undefined),
+  ) as MapPreviewCopy),
+});
+
 // Strips explicitly-undefined props before the merge, so `prop={undefined}` still
 // falls back to the default exactly as a destructuring default would.
 const definedProps = (props: MapPreviewProps): Partial<MapPreviewProps> =>

package/src/components/data-display/MapPreview/MapPreview.tsx

@@ -4,7 +4,7 @@ import { alpha, styled, useTheme } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
 import React from 'react';
 
-import { glassStyles, resolveMapPreviewProps } from './MapPreview.helpers';
+import { glassStyles, resolveMapCopy, resolveMapPreviewProps } from './MapPreview.helpers';
 import type { MapPreviewProps } from './MapPreview.types';
 import { MapLayers } from './MapLayers';
 import { MapCoordinates, MapMarkers } from './MapMarkers';
@@ -49,7 +49,11 @@ export const MapPreview: FC<MapPreviewProps> = (componentProps) => {
       elevation={props.variant === 'glass' ? 0 : 2}
       data-testid="map-preview-container"
       role="img"
-      aria-label={`Map preview centered at ${view.markerPosition.lat.toFixed(4)}, ${view.markerPosition.lng.toFixed(4)} with zoom level ${view.zoom}`}
+      aria-label={resolveMapCopy(props.copy).viewDescription(
+        view.markerPosition.lat.toFixed(4),
+        view.markerPosition.lng.toFixed(4),
+        view.zoom,
+      )}
       tabIndex={0}
       aria-live="polite"
       aria-atomic="true"
@@ -87,7 +91,7 @@ export const MapPreview: FC<MapPreviewProps> = (componentProps) => {
           controls={controls}
         />
 
-        <MapCoordinates position={view.markerPosition} zoom={view.zoom} />
+        <MapCoordinates position={view.markerPosition} zoom={view.zoom} copy={props.copy} />
       </MapWrapper>
     </MapContainer>
   );

package/src/components/data-display/Stepper/Stepper.tsx

@@ -1,8 +1,12 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
+import type { StepperLabels } from '../../../copy/labels';
 import CheckCircle from '@mui/icons-material/CheckCircle';
 import Box from '@mui/material/Box/index.js';
 import Button from '@mui/material/Button/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import { styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { Step, StepItemProps, StepperProps } from './Stepper.types';
@@ -19,6 +23,8 @@ import type { SizeValue } from '../../../tokens/scales';
  */
 const STEP_MIN_WIDTH: Record<SizeValue, number> = { xs: 44, sm: 56, md: 80, lg: 96, xl: 112 };
 const STEP_ICON_SIZE: Record<SizeValue, number> = { xs: 14, sm: 18, md: 24, lg: 30, xl: 36 };
+/** A horizontal connector's shortest dash; its 8px margins either side add 16. */
+const CONNECTOR_MIN = 8;
 
 
 const StepperRoot = styled(Box, {
@@ -41,6 +47,10 @@ const StepItem = styled(Box, {
   // For vertical: center to align connector with centered circle
   alignItems: orientation === 'horizontal' ? 'flex-start' : 'center',
   flex: orientation === 'horizontal' && !isLast ? 1 : 'none',
+  // Horizontal, the last step takes an equal share capped at its own width:
+  // on desktop that IS its own width, as `none` gave; on a phone it lets the
+  // last step give up room instead of pushing the row past the viewport.
+  ...(orientation === 'horizontal' && isLast && { flex: '1 1 0%', maxWidth: 'max-content' }),
   position: 'relative',
   // For vertical: ensure consistent width for proper centering
   ...(orientation === 'vertical' && {
@@ -106,7 +116,8 @@ const StepConnector = styled(Box, {
           marginTop: rem(theme, CIRCLE_SIZE[size] / 2 - 1),
           marginLeft: rem(theme, 8),
           marginRight: rem(theme, 8),
-          minWidth: rem(theme, 24),
+          // Only binds when the row is squeezed: a phone keeps a short dash.
+          minWidth: rem(theme, CONNECTOR_MIN),
         }
       : {
           width: rem(theme, 2),
@@ -125,6 +136,8 @@ const StepLabel = styled(Box, {
 })<{ orientation: 'horizontal' | 'vertical' }>(({ theme, orientation }) => ({
   textAlign: 'center',
   marginTop: orientation === 'horizontal' ? rem(theme, 8) : 0,
+  // Last resort only: a single word wider than the whole row may break.
+  overflowWrap: orientation === 'horizontal' ? 'break-word' : undefined,
 }));
 
 type StepSize = SizeValue;
@@ -141,14 +154,25 @@ function stepClasses(isActive: boolean, isCompleted: boolean, optional?: boolean
     .join(' ');
 }
 
-/** The circle content-column width per orientation/size. */
+/**
+ * The circle content-column width per orientation/size. On a phone the column
+ * may shrink to its longest word, never inside one ("pagame / nto"), and the
+ * connectors give up the rest; from `sm` up the floor is the size's stop, as
+ * it always was, so a desktop row is unchanged.
+ */
 function contentSx(orientation: 'horizontal' | 'vertical', size: StepSize) {
   return orientation === 'horizontal'
-    ? { minWidth: sxRem(STEP_MIN_WIDTH[size]), maxWidth: sxRem(150), flex: '0 1 auto' }
+    ? (theme: Theme) => ({
+        minWidth: 'min-content',
+        [theme.breakpoints.up('sm')]: { minWidth: rem(theme, STEP_MIN_WIDTH[size]) },
+        maxWidth: rem(theme, 150),
+        flex: '0 1 auto',
+      })
     : { flexShrink: 0 };
 }
 
 interface StepPartProps {
+  labels: StepperLabels;
   step: Step;
   index: number;
   isActive: boolean;
@@ -159,8 +183,8 @@ interface StepPartProps {
 /** The step circle: a check when completed, otherwise the 1-based index. */
 const StepCircle: React.FC<
   StepPartProps & { isCompleted: boolean; isClickable: boolean; onClick: () => void }
-> = ({ step, index, isActive, isCompleted, isClickable, size, labelVariant, onClick }) => {
-  const state = isCompleted ? ' (completed)' : isActive ? ' (current)' : '';
+> = ({ step, index, isActive, isCompleted, isClickable, size, labelVariant, onClick, labels }) => {
+  const state = isCompleted ? ` (${labels.completed})` : isActive ? ` (${labels.current})` : '';
   return (
     <StepButton
       isActive={isActive}
@@ -170,7 +194,7 @@ const StepCircle: React.FC<
       onClick={onClick}
       disabled={step.disabled}
       aria-current={isActive ? 'step' : undefined}
-      aria-label={`Step ${index + 1}: ${step.label}${step.optional ? ' (optional)' : ''}${state}`}
+      aria-label={`${labels.step(index + 1, step.label)}${step.optional ? ` (${labels.optional})` : ''}${state}`}
       data-testid={`stepper-step-icon-${index}`}
     >
       {isCompleted ? (
@@ -192,6 +216,7 @@ const StepLabelBlock: React.FC<StepPartProps & { orientation: 'horizontal' | 've
   orientation,
   size,
   labelVariant,
+  labels,
 }) => (
   <StepLabel
     orientation={orientation}
@@ -204,9 +229,12 @@ const StepLabelBlock: React.FC<StepPartProps & { orientation: 'horizontal' | 've
       color={isActive ? 'primary' : 'textPrimary'}
     >
       {step.label}
+      {/* A break opportunity with no width: a narrow column may put the marker
+          on its own line instead of welding it to the label's last word. */}
+      {step.optional && <wbr />}
       {step.optional && (
         <Typography component="span" variant="caption" color="textSecondary" sx={{ ml: 1 }}>
-          (optional)
+          ({labels.optional})
         </Typography>
       )}
     </Typography>
@@ -231,6 +259,7 @@ const StepperItem: React.FC<StepItemProps> = ({
   onStepClick,
   renderConnector,
   nextStep,
+  labels,
 }) => {
   const labelVariant: LabelVariant = size === 'sm' ? 'caption' : 'body2';
   const isClickable = Boolean(clickable) && !step.disabled && (variant === 'non-linear' || !isActive);
@@ -267,6 +296,7 @@ const StepperItem: React.FC<StepItemProps> = ({
           isClickable={isClickable}
           size={size}
           labelVariant={labelVariant}
+          labels={labels}
           onClick={handleStepClick}
         />
         <StepLabelBlock
@@ -276,6 +306,7 @@ const StepperItem: React.FC<StepItemProps> = ({
           orientation={orientation}
           size={size}
           labelVariant={labelVariant}
+          labels={labels}
         />
       </Box>
       {!isLast && connector}
@@ -293,9 +324,11 @@ export const Stepper: React.FC<StepperProps> = ({
   onStepChange,
   clickable,
   renderConnector,
+  labels: labelOverrides,
   className,
   'data-testid': dataTestId,
 }) => {
+  const labels = resolveLabels(EN_US_UI_LABELS.stepper, labelOverrides);
   // Determine clickable behavior
   const isClickable = clickable ?? variant === 'non-linear';
 
@@ -332,6 +365,7 @@ export const Stepper: React.FC<StepperProps> = ({
             onStepClick={onStepChange}
             renderConnector={renderConnector}
             nextStep={nextStep}
+            labels={labels}
           />
         );
       })}

package/src/components/data-display/Stepper/Stepper.types.ts

@@ -1,3 +1,4 @@
+import type { StepperLabels } from '../../../copy/labels';
 import type { SizeValue } from '../../../tokens/scales';
 import type { ReactNode } from 'react';
 
@@ -15,6 +16,8 @@ export interface ConnectorState {
 }
 
 export interface StepperProps {
+  /** The words the stepper adds to your step labels; the English pack answers for any key left out. */
+  labels?: Partial<StepperLabels>;
   /**
    * Array of step configurations defining the stepper flow
    */
@@ -95,4 +98,5 @@ export interface StepItemProps {
   onStepClick?: (id: string) => void;
   renderConnector?: StepperProps['renderConnector'];
   nextStep?: Step;
+  labels: StepperLabels;
 }

package/src/components/data-display/Table/Table.helpers.ts

@@ -135,6 +135,7 @@ type TableOwnKey = Exclude<keyof TableProps, keyof MuiTableProps>;
  * added to `Table.types.ts` does not compile until it is named here.
  */
 const TABLE_OWN_KEYS: Record<TableOwnKey, true> = {
+  labels: true,
   emptyText: true,
   variant: true,
   stripeColor: true,

package/src/components/data-display/Table/Table.tsx

@@ -14,11 +14,7 @@ import TableRow from '@mui/material/TableRow/index.js';
 import { styled, useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
-import type {
-  ColumnConfig,
-  TableDensity,
-  TableProps,
-  TableStripeColor} from './Table.types';
+import type { ColumnConfig, TableDensity, TableProps, TableStripeColor } from './Table.types';
 import {
   TABLE_DEFAULTS,
   containerStyle,
@@ -233,6 +229,7 @@ const AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerR
             selectable={p.selectable}
             selectedRows={p.selectedRows}
             onSelectAll={selection.handleSelectAll}
+            labels={p.labels}
             density={p.density}
             stickyHeader={p.stickyHeader}
             headRef={headRef}
@@ -253,6 +250,7 @@ const AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerR
             renderCell={p.renderCell}
             virtualWindow={windowHeight ? visibleItems : undefined}
             rowHeight={p.rowHeight}
+            labels={p.labels}
           />
         </StyledTable>
       </TableContainer>
@@ -296,6 +294,7 @@ const buildShell = ({
       selectable={resolved.selectable}
       selectedRows={resolved.selectedRows}
       onSelectAll={selection.handleSelectAll}
+      labels={resolved.labels}
       density={resolved.density}
       stickyHeader={resolved.stickyHeader}
     />

package/src/components/data-display/Table/Table.types.ts

@@ -1,3 +1,4 @@
+import type { TableLabels } from '../../../copy/labels';
 import type { ColorValue } from '../../../tokens/scales';
 import type { TableProps as MuiTableProps } from '@mui/material/Table/index.js';
 import type React from 'react';
@@ -63,7 +64,16 @@ export interface SelectionConfig {
 /** The full house vocabulary — a stripe can take any accent, or none. */
 export type TableStripeColor = ColorValue;
 
+/** The three accessible names the table adds: its sort button and its two kinds of checkbox. */
+export type { TableLabels };
+
 export interface TableProps extends Omit<MuiTableProps, 'variant'> {
+  /**
+   * The accessible names of the sort buttons and selection checkboxes. Any key
+   * left out keeps its English wording; a host passes `DATA_GRID_COPY[locale]`
+   * or `UI_LABELS[locale].table`.
+   */
+  labels?: Partial<TableLabels>;
   /**
    * What an empty result reads as. REQUIRED — the fallback was the English
    * "No data available", on the package every host renders.
@@ -307,6 +317,7 @@ export interface TableHeaderProps {
   selectable?: boolean;
   selectedRows?: (string | number)[];
   onSelectAll?: (selected: boolean) => void;
+  labels?: Partial<TableLabels>;
   density?: TableDensity;
   stickyHeader?: boolean;
   /** The `<thead>`, so the virtual window can subtract its height from the scroller's offset. */
@@ -347,6 +358,7 @@ export interface TableBodyProps {
   /** Set only when the body is virtualised: the rows in view and where they sit. */
   virtualWindow?: VirtualWindow;
   rowHeight?: number;
+  labels?: Partial<TableLabels>;
 }
 
 export interface VirtualTableBodyProps extends TableBodyProps {

package/src/components/data-display/Table/TableParts.hooks.tsx

@@ -1,5 +1,7 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import type React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { TableDataRow } from './TableParts';
 import type { TableBodyProps } from './Table.types';
@@ -43,6 +45,7 @@ type RowRendererProps = Pick<
   | 'renderRow'
   | 'renderCell'
   | 'rowHeight'
+  | 'labels'
 > & {
   selectedRows: Array<string | number>;
   /** Whether the rows are a virtual window's, drawn at exactly `rowHeight`. */
@@ -62,7 +65,9 @@ export const useTableRowRenderer = ({
   renderCell,
   virtualised,
   rowHeight,
+  labels: labelOverrides,
 }: RowRendererProps) => {
+  const labels = useMemo(() => resolveLabels(EN_US_UI_LABELS.table, labelOverrides), [labelOverrides]);
   const getRowKey = useRowKey(rowKeyExtractor);
   const isRowSelected = useCallback(
     (rowKey: string | number) => selectedRows.includes(rowKey),
@@ -93,6 +98,7 @@ export const useTableRowRenderer = ({
           onSelect={handleRowSelection}
           virtualised={virtualised}
           renderCell={renderCell}
+          labels={labels}
         />
       );
     },
@@ -109,6 +115,7 @@ export const useTableRowRenderer = ({
       rowHeight,
       selectable,
       virtualised,
+      labels,
     ],
   );
 

package/src/components/data-display/Table/TableParts.tsx

@@ -1,3 +1,5 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import Checkbox from '@mui/material/Checkbox/index.js';
 import TableBody from '@mui/material/TableBody/index.js';
 import TableCell from '@mui/material/TableCell/index.js';
@@ -12,7 +14,13 @@ import { rem } from '../../../tokens/relative';
 
 import { tableRowHeight } from './Table.helpers';
 import { useTableRowRenderer } from './TableParts.hooks';
-import type { ColumnConfig, TableBodyProps, TableHeaderProps, VirtualWindow } from './Table.types';
+import type {
+  ColumnConfig,
+  TableBodyProps,
+  TableHeaderProps,
+  TableLabels,
+  VirtualWindow,
+} from './Table.types';
 
 // Mirrors the visible sort indicator for assistive technology; undefined when
 // the column is not sorted, which is what removes the attribute entirely.
@@ -33,11 +41,12 @@ const columnLength = (theme: Theme, value: number | string | undefined): string
 // One header cell. Sorting is offered when the table is sortable and the column
 // has not opted out; aria-sort mirrors the visible indicator.
 const HeaderCell: React.FC<{
+  labels: TableLabels;
   column: ColumnConfig;
   sortable?: boolean;
   sortConfig?: { key: string; direction: 'asc' | 'desc' };
   onSort: (columnKey: string) => void;
-}> = ({ column, sortable, sortConfig, onSort }) => {
+}> = ({ column, sortable, sortConfig, onSort, labels }) => {
   const theme = useTheme();
   const canSort = Boolean(sortable) && column.sortable !== false;
   const isSorted = sortConfig?.key === column.key;
@@ -57,7 +66,7 @@ const HeaderCell: React.FC<{
           direction={isSorted ? sortConfig?.direction : 'asc'}
           onClick={() => onSort(column.key)}
           data-testid="sort-indicator"
-          aria-label={`Sort by ${column.label}`}
+          aria-label={labels.sortBy(column.label)}
         >
           {column.label}
         </TableSortLabel>
@@ -77,7 +86,9 @@ export const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({
   selectable,
   selectedRows = [],
   onSelectAll,
+  labels: labelOverrides,
   headRef }) => {
+  const labels = resolveLabels(EN_US_UI_LABELS.table, labelOverrides);
   const handleSort = useCallback(
     (columnKey: string) => {
       if (!sortable || !onSortChange) return;
@@ -106,13 +117,14 @@ export const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({
               indeterminate={selectedRows.length > 0 && selectedRows.length < data.length}
               checked={selectedRows.length === data.length && data.length > 0}
               onChange={handleSelectAll}
-              inputProps={{ 'aria-label': 'select all' }}
+              inputProps={{ 'aria-label': labels.selectAllRows }}
             />
           </TableCell>
         )}
         {columns.map((column) => (
           <HeaderCell
             key={column.key}
+            labels={labels}
             column={column}
             sortable={sortable}
             sortConfig={sortConfig}
@@ -194,6 +206,7 @@ export const TableDataRow: React.FC<{
   /** Whether the row is one of a virtual window's. */
   virtualised: boolean;
   renderCell?: TableBodyProps['renderCell'];
+  labels: TableLabels;
 }> = ({
   rowData,
   rowKey,
@@ -207,6 +220,7 @@ export const TableDataRow: React.FC<{
   onRowBlur,
   onSelect,
   virtualised,
+  labels,
   renderCell }) => {
   const theme = useTheme();
   const pitch = tableRowHeight(rowHeight);
@@ -237,7 +251,7 @@ export const TableDataRow: React.FC<{
                 checked={selected}
                 onChange={(event) => onSelect(event, rowKey)}
                 onClick={(event) => event.stopPropagation()}
-                inputProps={{ 'aria-label': `select row ${index + 1}` }}
+                inputProps={{ 'aria-label': labels.selectRow(index + 1) }}
               />,
             )}
           </TableCell>

package/src/components/data-display/Timeline/Timeline.tsx

@@ -1,3 +1,5 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import Box from '@mui/material/Box/index.js';
 import { alpha, styled } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
@@ -42,7 +44,9 @@ export const Timeline: FC<TimelineProps> = ({
   showConnector = true,
   animated = true,
   alternating = false,
-  onItemClick }) => {
+  onItemClick,
+  labels: labelOverrides }) => {
+  const labels = resolveLabels(EN_US_UI_LABELS.timeline, labelOverrides);
   const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set());
 
   const handleExpandClick = (itemId: string, event: React.MouseEvent) => {
@@ -77,6 +81,7 @@ export const Timeline: FC<TimelineProps> = ({
           isExpanded={expandedItems.has(item.id)}
           onItemClick={onItemClick}
           onExpandClick={handleExpandClick}
+          labels={labels}
         />
       ))}
     </TimelineContainer>

package/src/components/data-display/Timeline/Timeline.types.ts

@@ -1,3 +1,4 @@
+import type { TimelineLabels } from '../../../copy/labels';
 import type React from 'react';
 
 export interface TimelineItem {
@@ -23,4 +24,6 @@ export interface TimelineProps {
   animated?: boolean;
   alternating?: boolean;
   onItemClick?: (item: TimelineItem) => void;
+  /** The expand toggle's and each card's accessible names; the English pack answers for any key left out. */
+  labels?: Partial<TimelineLabels>;
 }