@12-apps/ui 6.41.1 → 6.42.0

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

@@ -51,7 +51,7 @@ function resolveChrome<T extends Record<string, unknown>>(props: DataGridProps<T
     },
     placeholder: {
       dataTestId,
-      ariaLabel: props.ariaLabel ?? 'Data grid',
+      ariaLabel: props.ariaLabel ?? props.copy.gridLabel,
       className,
       style,
       // Only the DOM-safe leftovers reach the element: every grid-specific prop
@@ -117,6 +117,7 @@ export const DataGrid = <T extends Record<string, unknown> = Record<string, unkn
  * none reaches the DOM — the check that would have caught `emptyText` missing.
  */
 export const GRID_ONLY_PROPS = [
+  'copy',
   'rows',
   'columns',
   'getRowId',

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

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import type { DataGridCopy } from '../../../copy';
+
 export type GridSizeMode = 'auto' | 'fixed' | 'fill';
 export type GridDensity = 'compact' | 'comfortable' | 'spacious';
 export type SortDirection = 'asc' | 'desc' | null;
@@ -83,9 +85,9 @@ export interface GridRowExpansion<T = Record<string, unknown>> {
    * toggle — a chevron that opens onto nothing is a promise the row cannot keep.
    */
   isRowExpandable?: (row: T) => boolean;
-  /** The chevron's accessible name while the row is collapsed. Default "Expand row". */
+  /** The chevron's accessible name while the row is collapsed. Defaults to `copy.expandRow`. */
   expandLabel?: string;
-  /** The chevron's accessible name while the row is expanded. Default "Collapse row". */
+  /** The chevron's accessible name while the row is expanded. Defaults to `copy.collapseRow`. */
   collapseLabel?: string;
 }
 
@@ -138,6 +140,15 @@ export interface DataGridProps<T = Record<string, unknown>> extends React.HTMLAt
    * "No data available", on the package every host renders.
    */
   emptyText: string;
+  /**
+   * Every fallback word the grid's own chrome renders — a sortable header's
+   * name, a row's selection checkbox, the select-all checkbox, the expand
+   * chevron's two states, and the grid's own accessible name. REQUIRED — the
+   * fallbacks were English literals with no way to localise them. A caller's
+   * `column.ariaLabel`, `expansion.expandLabel`/`collapseLabel` and the grid's
+   * own `ariaLabel` still win over it wherever both are given.
+   */
+  copy: DataGridCopy;
   /** Dataset (client mode uses this array; server mode renders current page) */
   rows: T[];
   /** Stable row id accessor */

package/src/components/data-display/DataViews/data-views-copy.ts

@@ -1,4 +1,4 @@
-import type { CategorySelectCopy, ConfirmActionCopy, TableFilterCopy } from "../../../copy";
+import type { CategorySelectCopy, ConfirmActionCopy, DataGridCopy, TableFilterCopy } from "../../../copy";
 import type { SavedViewsLabels } from "../../layout/ContentToolbar/ContentToolbar.types";
 /**
  * Every word the DataViews family renders, as REQUIRED host config (FUT-760).
@@ -143,7 +143,13 @@ export interface DataViewsExportCopy {
   triggerLabel: string;
 }
 
-export interface DataViewsGridCopy {
+/**
+ * The table layout's own `<DataGrid>`, which this surface mounts but does not
+ * own — so it carries the grid's full `DataGridCopy` (its sortable headers,
+ * its row/select-all checkboxes, its expand chevron, its own accessible name)
+ * alongside the words DataViews renders around it.
+ */
+export interface DataViewsGridCopy extends DataGridCopy {
   /** The per-row kebab's accessible name. */
   rowActions: string;
   bulkActions(selectedCount: number): string;

package/src/components/data-display/DataViews/data-views-grid-bodies.tsx

@@ -85,6 +85,7 @@ function GridBody<T extends Record<string, unknown>>({
         data-testid={dataTestId}
         emptyState={emptyState}
         emptyText={copy.grid.emptyFilteredTitle}
+        copy={copy.grid}
       />
     </Box>
   );

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

@@ -22,7 +22,13 @@ const DIALOG_STATIC_PROPS = {
   TransitionComponent: Fade,
   TransitionProps: { timeout: 300 },
   PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: (theme: Theme) => `blur(${rem(theme, 2)})` } },
-  'aria-label': 'Lightbox',
+  // `aria-labelledby` is the one accessible name for the modal itself: MUI
+  // forwards it (with `aria-modal` and its own `role="dialog"`) onto the
+  // Paper, the element that is actually the WAI-ARIA dialog. A plain
+  // `aria-label` alongside it would land on the OUTER root instead — a
+  // second, non-modal `role="dialog"` this component sets of its own accord
+  // — duplicating (and, as a static English literal, contradicting) the name
+  // the Paper already carries.
   'aria-labelledby': 'lightbox-title',
   role: 'dialog',
   'aria-modal': 'true',
@@ -51,7 +57,7 @@ export const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentP
     >
       {/* Visually hidden title for screen readers */}
       <Typography id="lightbox-title" variant="h6" sx={{ position: 'absolute', left: sxRem(-10000) }}>
-        Lightbox - {currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`}
+        {props.copy.dialogLabel} - {currentItem?.alt || props.copy.itemPosition(currentIndex + 1, items.length)}
       </Typography>
 
       <LightboxOverlay

package/src/components/data-display/Lightbox/LightboxMedia.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import { useLightboxCopy } from './lightbox-copy-context';
 import type { LightboxItem } from './Lightbox.types';
 
 export interface LightboxMediaProps {
@@ -37,6 +38,8 @@ export const LightboxMedia: FC<LightboxMediaProps> = ({
   onWheel,
   onDoubleClick,
 }) => {
+  const copy = useLightboxCopy();
+
   if (item.type === 'video') {
     return (
       <video
@@ -45,7 +48,7 @@ export const LightboxMedia: FC<LightboxMediaProps> = ({
         style={{ maxWidth: '90vw', maxHeight: '80vh', objectFit: 'contain' }}
         onLoadStart={onLoadStart}
         onLoadedData={onLoaded}
-        aria-label={item.alt || `Video ${index + 1} of ${total}`}
+        aria-label={item.alt || copy.videoFallback(index + 1, total)}
         data-testid={testId('video')}
       />
     );
@@ -54,7 +57,7 @@ export const LightboxMedia: FC<LightboxMediaProps> = ({
   return (
     <img
       src={item.src}
-      alt={item.alt || `Image ${index + 1} of ${total}`}
+      alt={item.alt || copy.imageFallback(index + 1, total)}
       style={{
         // At 1x the image is bounded by the viewport; once zoomed it is allowed
         // to overflow so there is something to pan around.

package/src/components/data-display/Lightbox/LightboxThumbnails.tsx

@@ -5,6 +5,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { thumbnailStripSx } from './Lightbox.constants';
+import { useLightboxCopy } from './lightbox-copy-context';
 import type { LightboxItem } from './Lightbox.types';
 import { onMedia, sheen } from '../../../tokens/ink';
 import { rem, sxRem } from '../../../tokens/relative';
@@ -41,7 +42,9 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
   currentIndex,
   testId,
   onSelect,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <Box
     sx={{
       ...thumbnailStripSx,
@@ -78,11 +81,12 @@ export const LightboxThumbnails: FC<LightboxThumbnailsProps> = ({
         ) : (
           <img
             src={item.src}
-            alt={item.alt || `Thumbnail ${index + 1}`}
+            alt={item.alt || copy.thumbnailFallback(index + 1)}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
           />
         )}
       </Box>
     ))}
   </Box>
-);
+  );
+};

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

@@ -5,6 +5,8 @@ import { alpha, styled } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 
+import type { TimingDiagramCopy } from '../../../copy';
+
 import type { TimingData, TimingDiagramProps } from './TimingDiagram.types';
 import type { Phase, PhaseKey, TimingViewProps } from './TimingDiagram.views';
 import {
@@ -63,13 +65,13 @@ const calculatePercentages = (data: TimingData): Record<string, number> => {
 
 // A phase with no recorded time never happened — an HTTP request has no SSL
 // handshake, for instance — so it gets no bar and no legend entry.
-const phasesOf = (data: TimingData): Phase[] =>
+const phasesOf = (data: TimingData, copy: TimingDiagramCopy): Phase[] =>
   [
-    { key: 'dns', label: 'DNS Lookup', value: data.dns },
-    { key: 'connect', label: 'Connection', value: data.connect },
-    { key: 'ssl', label: 'SSL/TLS', value: data.ssl },
-    { key: 'request', label: 'Request', value: data.request },
-    { key: 'response', label: 'Response', value: data.response },
+    { key: 'dns', label: copy.dns, value: data.dns },
+    { key: 'connect', label: copy.connect, value: data.connect },
+    { key: 'ssl', label: copy.ssl, value: data.ssl },
+    { key: 'request', label: copy.request, value: data.request },
+    { key: 'response', label: copy.response, value: data.response },
   ].filter((phase) => phase.value !== undefined && phase.value > 0);
 
 const VIEWS: Record<string, FC<TimingViewProps>> = {
@@ -89,7 +91,7 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
   variant = 'waterfall',
 }) => {
   const percentages = useMemo(() => calculatePercentages(data), [data]);
-  const phases = phasesOf(data);
+  const phases = phasesOf(data, copy);
   const View = VIEWS[variant];
 
   return (
@@ -103,6 +105,7 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
           phases={phases}
           percentages={percentages}
           data={data}
+          copy={copy}
           animated={animated}
           showLabels={showLabels}
           showTooltips={showTooltips}

package/src/components/data-display/TimingDiagram/TimingDiagram.views.tsx

@@ -7,6 +7,7 @@ import type { FC, ReactElement } from 'react';
 import React from 'react';
 
 import type { TimingData } from './TimingDiagram.types';
+import type { TimingDiagramCopy } from '../../../copy';
 import { onMedia, sheen, uiInk } from '../../../tokens/ink';
 import { rem, rems } from '../../../tokens/relative';
 
@@ -34,6 +35,7 @@ export interface TimingViewProps {
   phases: Phase[];
   percentages: Record<string, number>;
   data: TimingData;
+  copy: TimingDiagramCopy;
   animated: boolean;
   showLabels: boolean;
   showTooltips: boolean;
@@ -227,6 +229,7 @@ export const StackedView: FC<TimingViewProps> = ({
   phases,
   percentages,
   data,
+  copy,
   animated,
   showLabels,
   showTooltips,
@@ -260,7 +263,7 @@ export const StackedView: FC<TimingViewProps> = ({
           0ms
         </Typography>
         <Typography variant="caption" color="text.secondary" fontWeight="bold">
-          Total: {formatTime(data.total)}
+          {copy.total(formatTime(data.total))}
         </Typography>
       </Box>
     </Box>
@@ -328,6 +331,7 @@ export const HorizontalView: FC<TimingViewProps> = ({
   phases,
   percentages,
   data,
+  copy,
   animated,
 }) => {
   const theme = useTheme();
@@ -352,7 +356,7 @@ export const HorizontalView: FC<TimingViewProps> = ({
       ))}
       <Box sx={{ mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }}>
         <Typography variant="body2" fontWeight="bold" color="primary">
-          Total Time: {formatTime(data.total)}
+          {copy.totalTime(formatTime(data.total))}
         </Typography>
       </Box>
     </HorizontalBar>

package/src/components/feedback/TutorialOverlay/TutorialStepBody.tsx

@@ -109,7 +109,7 @@ const TutorialStepNav: React.FC<{
                 endIcon={<NextIcon />}
                 onClick={onNext}
                 disabled={requiresActionBeforeNext}
-                title={requiresActionBeforeNext ? 'Complete the required action first' : ''}
+                title={requiresActionBeforeNext ? copy.requiresAction : ''}
                 data-testid="tutorial-next-button"
               >
                 {copy.next}
@@ -126,7 +126,7 @@ const TutorialStepNav: React.FC<{
                 }}
                 data-testid="tutorial-finish-button"
               >
-                {stepCount === 1 ? 'Complete' : 'Finish'}
+                {stepCount === 1 ? copy.complete : copy.finish}
               </Button>
             )}
           </Stack>

package/src/components/layout/Dashboard/Dashboard.types.ts

@@ -52,24 +52,32 @@ export interface DashboardHeaderProps {
 
 /** Props for `<Dashboard.Info>` — an `[i]` popover summarising the page. */
 export interface DashboardInfoProps {
-  /** Popover heading. Defaults to `"About this page"`. */
-  title?: ReactNode;
+  /** Popover heading. REQUIRED — the fallback was the English "About this page". */
+  title: ReactNode;
   /** Popover body content. */
   children: ReactNode;
-  /** Accessible label for the trigger. Defaults to `"Page information"`. */
-  ariaLabel?: string;
+  /** Accessible label for the trigger. REQUIRED — the fallback was the English "Page information". */
+  ariaLabel: string;
 }
 
 /** Props for `<Dashboard.FilterToggle>` — the funnel icon. */
 export interface DashboardFilterToggleProps {
-  /** Accessible label. Defaults to a show/hide string based on state. */
-  ariaLabel?: string;
+  /**
+   * Accessible label while `<Dashboard.Filters>` is expanded. REQUIRED — the
+   * fallback was the English "Hide filters".
+   */
+  hideLabel: string;
+  /**
+   * Accessible label while `<Dashboard.Filters>` is collapsed. REQUIRED — the
+   * fallback was the English "Show filters".
+   */
+  showLabel: string;
 }
 
 /** Shared props for both modes of `<Dashboard.Settings>`. */
 interface DashboardSettingsBaseProps {
-  /** Accessible label for the trigger. Defaults to `"Settings"`. */
-  ariaLabel?: string;
+  /** Accessible label for the trigger. REQUIRED — the fallback was the English "Settings". */
+  ariaLabel: string;
 }
 
 /**
@@ -79,8 +87,8 @@ interface DashboardSettingsBaseProps {
 export interface DashboardSettingsDialogProps extends DashboardSettingsBaseProps {
   /** The dialog's close button — a glyph with no visible label. REQUIRED. */
   closeLabel: string;
-  /** Dialog title. Defaults to `"Settings"`. */
-  title?: ReactNode;
+  /** Dialog title. REQUIRED — the fallback was the English "Settings". */
+  title: ReactNode;
   /** Dialog body. */
   children: ReactNode;
   href?: never;
@@ -132,8 +140,10 @@ export interface DashboardExportProps {
   formats?: DashboardExportFormat[];
   /** Invoked with the chosen format id. */
   onExport: (formatId: string) => void;
-  /** Button label. Defaults to `"Export"`. */
-  label?: ReactNode;
+  /**
+   * Button label. REQUIRED — the fallback was the English "Export" (FUT-2568).
+   */
+  label: ReactNode;
 }
 
 /** Props for `<Dashboard.Action>` — a slot for a primary/secondary button. */

package/src/components/layout/Dashboard/DashboardParts.tsx

@@ -38,9 +38,9 @@ export const DashboardSpacer = (): React.JSX.Element => <Box sx={{ flex: 1 }} ar
 DashboardSpacer.displayName = 'Dashboard.Spacer';
 
 export const DashboardInfo = ({
-  title = 'About this page',
+  title,
   children,
-  ariaLabel = 'Page information',
+  ariaLabel,
 }: DashboardInfoProps): React.JSX.Element => {
   const { testIdPrefix } = useDashboardContext();
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@@ -78,9 +78,12 @@ export const DashboardInfo = ({
 };
 DashboardInfo.displayName = 'Dashboard.Info';
 
-export const DashboardFilterToggle = ({ ariaLabel }: DashboardFilterToggleProps): React.JSX.Element => {
+export const DashboardFilterToggle = ({
+  hideLabel,
+  showLabel,
+}: DashboardFilterToggleProps): React.JSX.Element => {
   const { filtersVisible, toggleFilters, activeFilterCount, testIdPrefix } = useDashboardContext();
-  const label = ariaLabel ?? (filtersVisible ? 'Hide filters' : 'Show filters');
+  const label = filtersVisible ? hideLabel : showLabel;
   return (
     <Tooltip title={label}>
       <IconButton
@@ -101,10 +104,10 @@ export const DashboardFilterToggle = ({ ariaLabel }: DashboardFilterToggleProps)
 DashboardFilterToggle.displayName = 'Dashboard.FilterToggle';
 
 export const DashboardSettings = ({
-  title = 'Settings',
+  title,
   closeLabel,
   children,
-  ariaLabel = 'Settings',
+  ariaLabel,
   href,
   linkComponent,
 }: DashboardSettingsProps): React.JSX.Element => {
@@ -168,7 +171,7 @@ const DEFAULT_EXPORT_FORMATS: DashboardExportFormat[] = [
 export const DashboardExport = ({
   formats = DEFAULT_EXPORT_FORMATS,
   onExport,
-  label = 'Export',
+  label,
 }: DashboardExportProps): React.JSX.Element => {
   const { testIdPrefix } = useDashboardContext();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);