@12-apps/ui 6.6.0 → 6.8.0

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

@@ -119,6 +119,11 @@ export interface GridEditing<T = Record<string, unknown>> {
 }
 
 export interface DataGridProps<T = Record<string, unknown>> extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * What an empty result reads as. REQUIRED — the fallback was the English
+   * "No data available", on the package every host renders.
+   */
+  emptyText: string;
   /** 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-category-pill.tsx

@@ -84,6 +84,8 @@ export function PillControl<T extends Record<string, unknown>>({
   }
   return (
     <MultiSelectDropdown
+      extraOptionsHeading={copy.filters.optionsHeading}
+      clearText={copy.filters.clear}
       clearLabel={copy.filters.clearRange(pill.label)}
       label={pill.label}
       options={pill.options}

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

@@ -1,4 +1,4 @@
-import type { CategorySelectCopy, ConfirmActionCopy } from "../../../copy";
+import type { CategorySelectCopy, ConfirmActionCopy, TableFilterCopy } from "../../../copy";
 import type { SavedViewsLabels } from "../../layout/ContentToolbar/ContentToolbar.types";
 /**
  * Every word the DataViews family renders, as REQUIRED host config (FUT-760).
@@ -177,6 +177,16 @@ export interface DataViewsFiltersCopy {
    * dates alone — and getting it wrong silently drops or adds a day's rows.
    */
   rangeInclusiveNote: string;
+  /** The FROM half of a range, in the box itself. */
+  rangeStart: string;
+  /**
+   * The day field's mask, which IS its placeholder — so the expected ORDER is
+   * on screen before the first keystroke rather than discovered by getting it
+   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.
+   */
+  dayMask: string;
+  /** Drop every applied filter, spelled out in the panel where there is room. */
+  clearAllFilters: string;
   /** The day-range presets' labels, keyed by preset id. */
   rangePresets: Readonly<Record<string, string>>;
   scopesLabel: string;
@@ -197,6 +207,11 @@ export interface DataViewsFiltersCopy {
   allOption: string;
   optionSearchPlaceholder: string;
   optionsEmpty: string;
+  /**
+   * The heading over a dropdown's EXTRA toggles — the section below the option
+   * list, not the list itself. It only appears when a pill supplies extras.
+   */
+  optionsHeading: string;
 }
 
 export interface DataViewsSelectionCopy {
@@ -231,6 +246,12 @@ export interface DataViewsNavCopy {
   reset: string;
   /** The inline error when a view could not be refreshed or saved. */
   updateFailed: string;
+  /** The dismiss on that failure's alert — a glyph with no visible label. */
+  dismissError: string;
+  /** The filter panel's back arrow — a glyph with no visible label. */
+  goBack: string;
+  /** The label in front of the page-size select. */
+  pageSize: string;
   saveFailed: string;
   /** Reopen the save dialog over an existing view. */
   editView: string;
@@ -265,6 +286,13 @@ export interface DataViewsCopy {
   savedViewsMenu: SavedViewsLabels;
   confirmAction: ConfirmActionCopy;
   categorySelect: CategorySelectCopy;
+  /**
+   * The filter shell's own words. DataViews mounts three of its parts — the
+   * panel, the keyword box and the numeric range field — so all five are on
+   * screen; the range's two ends are `Mínimo`/`Máximo` rather than the day
+   * range's `De`/`Até`, which is why this cannot be derived from `filters`.
+   */
+  tableFilter: TableFilterCopy;
   board: DataViewsBoardCopy;
   deleteView: DeleteViewCopy;
   manageViews: ManageViewsCopy;

package/src/components/data-display/DataViews/data-views-day-input.tsx

@@ -30,6 +30,7 @@
 import { TextField } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
+
 /** `AAAA-MM-DD` (the wire) → `dd/mm/aaaa` (what the merchant reads). */
 export function isoToBr(iso: string): string {
   const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
@@ -112,6 +113,7 @@ export function DayBoundInput({
   testId,
   error = false,
   describedBy,
+  mask,
 }: {
   label: string;
   /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */
@@ -127,6 +129,17 @@ export function DayBoundInput({
   error?: boolean;
   /** Id of the element carrying that complaint, so it is read WITH the field. */
   describedBy?: string;
+  /**
+   * The day mask, which IS the placeholder — so the expected ORDER is on
+   * screen before the first keystroke rather than discovered by getting it
+   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.
+   *
+   * A PROP rather than a context read: this field has two callers, and only
+   * one of them is inside DataViews. `DateRangePicker` mounts it standalone
+   * with its own message table, so a context read here throws for every host
+   * of that picker — which is exactly what it did.
+   */
+  mask: string;
 }): React.JSX.Element {
   const applied = value ?? '';
   const [text, setText] = useState(() => isoToBr(applied));
@@ -146,9 +159,7 @@ export function DayBoundInput({
       type="text"
       label={label}
       error={error}
-      // The mask IS the placeholder, so the expected order is on screen before
-      // the first keystroke rather than discovered by getting it wrong.
-      placeholder="dd/mm/aaaa"
+      placeholder={mask}
       value={text}
       onChange={(event) => {
         const next = maskBrDate(event.target.value);

package/src/components/data-display/DataViews/data-views-filter-panel.tsx

@@ -159,6 +159,7 @@ export function FilterDialog<T extends Record<string, unknown>>({
       open={open}
       onClose={onClose}
       navigationTitle={copy.filters.panelTitle}
+      backLabel={copy.nav.goBack}
       modalId={`${props.testIdPrefix}-filters`}
       maxWidth="xs"
       dataTestId={`${props.testIdPrefix}-filter-dialog`}
@@ -174,7 +175,7 @@ export function FilterDialog<T extends Record<string, unknown>>({
               data-testid={`${props.testIdPrefix}-clear-filters`}
               sx={{ fontSize: "0.75rem", color: "text.secondary" }}
             >
-              Clear All Filters
+              {copy.filters.clearAllFilters}
             </Link>
           </Box>
           <FilterControls {...props} />

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

@@ -19,6 +19,7 @@ import { SelectAllStrip } from "./data-views-select-all-strip";
 import { ListCardGroup, type ListGroupConfig } from "./list-card-rails";
 import type { DataViewCardSelection } from "./data-views-types";
 import type { DataViewsController } from "./use-data-views-state";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 /* ── Body (grid) ─────────────────────────────────────────────────────────── */
 
@@ -52,6 +53,7 @@ function GridBody<T extends Record<string, unknown>>({
   dataTestId,
   emptyState,
 }: GridBodyProps<T>): React.JSX.Element {
+  const copy = useDataViewsCopy();
   return (
     <Box
       sx={{
@@ -77,6 +79,7 @@ function GridBody<T extends Record<string, unknown>>({
         sorting={{ mode: sortMode, sortBy, onChangeSortBy }}
         data-testid={dataTestId}
         emptyState={emptyState}
+        emptyText={copy.grid.emptyFilteredTitle}
       />
     </Box>
   );

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

@@ -20,6 +20,7 @@ import { toOverflowFields, useFilterOverflow, type OverflowSplit } from "./data-
 import { ShellToolbar } from "./data-views-shell-toolbar";
 import type { DisplayPanelView } from "./data-views-display-panel";
 import type { DataViewExport } from "./data-views-export";
+import { useDataViewsCopy } from "./data-views-copy-context";
 import { DataViewsEmpty } from "./data-views-empty";
 import { DataViewsPagination } from "./data-views-pagination";
 import type { BoardConfig } from "./DataViewsBoard";
@@ -286,6 +287,7 @@ function ShellStack<T extends Record<string, unknown>>({
   props: GridShellProps<T>;
   filters: ReturnType<typeof useGridShellFilters<T>>;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   const { c, testIdPrefix, dataTestId, scopes = [], emptyState, inlineFilters = false } = props;
   const { showInline, useModal, inlineVisible, filterProps, split, onControlOpenChange } = filters;
   // The grid renders the FILTERED empty state itself — it is the only party
@@ -299,7 +301,10 @@ function ShellStack<T extends Record<string, unknown>>({
     />
   );
   return (
-    <TableFilter open={c.filterOpen} onOpenChange={c.setFilterOpen} hasActiveFilters={c.activeFilterCount > 0}>
+    <TableFilter
+      copy={copy.tableFilter} open={c.filterOpen} onOpenChange={c.setFilterOpen}
+      hasActiveFilters={c.activeFilterCount > 0}
+    >
       <Stack spacing={0} data-testid={dataTestId ? `${dataTestId}-container` : undefined}>
         <GridHeaderRow title={props.title} headerActions={props.headerActions} testIdPrefix={testIdPrefix} />
         <ShellToolbar
@@ -311,9 +316,7 @@ function ShellStack<T extends Record<string, unknown>>({
           filterControls={
             inlineVisible ? (
               <InlineFilterControls
-                {...filterProps}
-                split={split}
-                activeFilterCount={c.activeFilterCount}
+                {...filterProps} split={split} activeFilterCount={c.activeFilterCount}
                 onControlOpenChange={onControlOpenChange}
               />
             ) : undefined
@@ -328,12 +331,8 @@ function ShellStack<T extends Record<string, unknown>>({
           showInline={showInline}
         />
         <ScopeTabsSlot
-          scopes={scopes}
-          scopeFieldId={props.scopeFieldId}
-          board={props.board}
-          value={c.scope}
-          onChange={c.setScope}
-          counts={c.scopeCounts}
+          scopes={scopes} scopeFieldId={props.scopeFieldId} board={props.board}
+          value={c.scope} onChange={c.setScope} counts={c.scopeCounts}
           testIdPrefix={testIdPrefix}
         />
         <TableFilter.Layout>

package/src/components/data-display/DataViews/data-views-more-fields.tsx

@@ -60,7 +60,9 @@ function OverflowPill<T extends Record<string, unknown>>({
   if (options.length > INLINE_OPTION_LIMIT) {
     return (
       <MultiSelectDropdown
-          clearLabel={copy.filters.clearRange(field.label)}
+        extraOptionsHeading={copy.filters.optionsHeading}
+        clearText={copy.filters.clear}
+        clearLabel={copy.filters.clearRange(field.label)}
         label={field.pill?.label ?? field.label}
         options={options}
         selected={new Set(values)}

package/src/components/data-display/DataViews/data-views-pagination.tsx

@@ -4,6 +4,7 @@ import { Box } from "../../../mui/Box";
 import { Pagination } from "../../navigation/Pagination";
 
 import type { DataViewsController } from "./use-data-views-state";
+import { useDataViewsCopy } from "./data-views-copy-context";
 
 /**
  * The server-mode pagination control rendered beneath the grid — shown only
@@ -17,10 +18,12 @@ export function DataViewsPagination<T extends Record<string, unknown>>({
   c: DataViewsController<T>;
   testIdPrefix: string;
 }): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
   if (!c.serverMode || c.serverPageCount <= 1) return null;
   return (
     <Box sx={{ mt: 2, display: "flex", justifyContent: "center" }}>
       <Pagination
+        pageSizeLabel={copy.nav.pageSize}
         page={c.serverPage}
         count={c.serverPageCount}
         onChange={(_event, page) => c.changePage(page)}

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -52,9 +52,11 @@ function BoundField<T extends Record<string, unknown>>({
   onChange: (bound: number | string | undefined) => void;
   testId: string;
 }): React.JSX.Element {
+  const copy = useDataViewsCopy();
   if (field.kind === 'day') {
     return (
       <DayBoundInput
+        mask={copy.filters.dayMask}
         label={label}
         value={value == null ? undefined : String(value)}
         onChange={onChange}
@@ -102,7 +104,7 @@ export function RangeBounds<T extends Record<string, unknown>>({
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
         <BoundField
           field={field}
-          label="De"
+          label={copy.filters.rangeStart}
           value={value.min}
           onChange={(min) => onChange({ ...value, min })}
           testId={`${testId}-min`}

package/src/components/data-display/DataViews/data-views-table-parts.tsx

@@ -36,6 +36,7 @@ export function ViewMutationErrorAlert({
       title={copy.nav.updateFailed}
       description={error}
       closable
+      closeLabel={copy.nav.dismissError}
       onClose={onClose}
       data-testid={`${testIdPrefix}-views-mutation-error`}
     />

package/src/components/data-display/DataViews/data-views-toolbar.tsx

@@ -153,6 +153,8 @@ export function GridToolbar<T extends Record<string, unknown>>(props: GridToolba
     >
       <ContentToolbar
         selectAllLabel={copy.selection.selectAll}
+        selectAllText={copy.selection.selectAllOnPage}
+        clearAllText={copy.filters.clearAll}
         hasSelection={selectedRows.length > 0}
         selectedCount={selectedRows.length}
         selectAll={props.selectAll}

package/src/components/data-display/HoverCard/HoverCard.content.tsx

@@ -19,7 +19,14 @@ const testId = (base: string | undefined, suffix: string, fallback: string) =>
 export interface HoverCardContentProps
   extends Pick<
     HoverCardProps,
-    'variant' | 'title' | 'description' | 'avatar' | 'loading' | 'loadingComponent' | 'children'
+    | 'variant'
+    | 'title'
+    | 'description'
+    | 'avatar'
+    | 'loading'
+    | 'loadingComponent'
+    | 'loadingText'
+    | 'children'
   > {
   dataTestId?: string;
 }
@@ -113,6 +120,7 @@ const DetailedContent: React.FC<HoverCardContentProps> = ({
 export const HoverCardContent: React.FC<HoverCardContentProps> = (props) => {
   const { variant, title, description, avatar, loading, loadingComponent, children, dataTestId } =
     props;
+  const { loadingText } = props;
 
   if (loading) {
     return (
@@ -120,7 +128,7 @@ export const HoverCardContent: React.FC<HoverCardContentProps> = (props) => {
         {loadingComponent || (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <CircularProgress size={20} />
-            <Typography variant="body2">Loading...</Typography>
+            <Typography variant="body2">{loadingText}</Typography>
           </Box>
         )}
       </LoadingContainer>

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

@@ -62,7 +62,7 @@ const offsetMargin = (placement: HoverCardPlacement, offset: number) => {
 export const HoverCard = React.forwardRef<HTMLDivElement, HoverCardProps>((props, ref) => {
   const {
     variant, glow, pulse, title, description, avatar, trigger, placement, showArrow,
-    animation, enterDelay, exitDelay, maxWidth, loading, loadingComponent, touchEnabled,
+    animation, enterDelay, exitDelay, maxWidth, loading, loadingComponent, loadingText, touchEnabled,
     offset, disabled, onOpen, onClose, children, dataTestId,
     ...rest
   } = withDefaults(props, DEFAULTS) as ResolvedProps;
@@ -122,8 +122,7 @@ export const HoverCard = React.forwardRef<HTMLDivElement, HoverCardProps>((props
           >
             <CardContent sx={{ p: padding, '&:last-child': { pb: padding } }}>
               <HoverCardContent
-                variant={variant}
-                title={title}
+                loadingText={loadingText} variant={variant} title={title}
                 description={description}
                 avatar={avatar}
                 loading={loading}

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

@@ -9,6 +9,8 @@ export type HoverCardPlacement =
 export type HoverCardAnimation = 'fade' | 'scale' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
 
 export interface HoverCardProps extends Omit<MuiPopoverProps, 'variant' | 'open' | 'anchorEl'> {
+  /** What the card says while its content is in flight. REQUIRED. */
+  loadingText: string;
   /**
    * The variant of the hover card
    */

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

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { makeTestId } from './Lightbox.constants';
 import { resolveLightboxProps } from './Lightbox.helpers';
+import { LightboxCopyProvider } from './lightbox-copy-context';
 import type { LightboxProps, LightboxRef } from './Lightbox.types';
 import { LightboxCurrentMedia } from './LightboxCurrentMedia';
 import { LightboxOverlay } from './LightboxOverlay';
@@ -32,6 +33,7 @@ export const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentP
   const { currentIndex, currentItem, zoom } = lightbox;
 
   return (
+    <LightboxCopyProvider copy={props.copy}>
     <Dialog
       open={isOpen}
       onClose={lightbox.close}
@@ -98,6 +100,7 @@ export const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentP
         }
       />
     </Dialog>
+    </LightboxCopyProvider>
   );
 });
 

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

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import type { LightboxCopy } from '../../../copy';
 
 export interface LightboxItem {
   src: string;
@@ -12,6 +13,14 @@ export interface AutoplayConfig {
 }
 
 export interface LightboxProps {
+  /**
+   * Every word this viewer renders — all of them aria-labels on glyph-only
+   * controls, so this object IS what a screen-reader user hears for the whole
+   * component. REQUIRED: a default could only be one language read aloud to
+   * everybody else's users, and the sighted path looks identical either way,
+   * which is why the English literals survived so long.
+   */
+  copy: LightboxCopy;
   /** Controls visibility; must lock body scroll when true */
   isOpen: boolean;
   /** Fired on close button, backdrop click, Esc, and swipe-down (mobile) */

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

@@ -11,22 +11,26 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { navButtonSx, OVERLAY_Z_INDEX, overlayButtonSx } from './Lightbox.constants';
+import { useLightboxCopy } from './lightbox-copy-context';
 
 type TestId = (suffix: string) => string;
 
 export const LightboxCloseButton: FC<{ testId: TestId; onClose: () => void }> = ({
   testId,
   onClose,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <IconButton
     onClick={onClose}
     sx={{ ...overlayButtonSx, position: 'absolute', top: 16, right: 16, zIndex: OVERLAY_Z_INDEX }}
-    aria-label="Close lightbox"
+    aria-label={copy.close}
     data-testid={testId('close')}
   >
     <CloseIcon />
   </IconButton>
-);
+  );
+};
 
 const arrowSx = (side: 'left' | 'right') =>
   ({
@@ -52,13 +56,15 @@ export const LightboxNavButtons: FC<LightboxNavButtonsProps> = ({
   atEnd,
   onPrev,
   onNext,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <>
     <IconButton
       onClick={onPrev}
       disabled={atStart}
       sx={arrowSx('left')}
-      aria-label="Previous item"
+      aria-label={copy.previous}
       data-testid={testId('prev')}
     >
       <PrevIcon />
@@ -68,13 +74,14 @@ export const LightboxNavButtons: FC<LightboxNavButtonsProps> = ({
       onClick={onNext}
       disabled={atEnd}
       sx={arrowSx('right')}
-      aria-label="Next item"
+      aria-label={copy.next}
       data-testid={testId('next')}
     >
       <NextIcon />
     </IconButton>
   </>
-);
+  );
+};
 
 export interface LightboxZoomControlsProps {
   testId: TestId;
@@ -88,7 +95,9 @@ export const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({
   onZoomIn,
   onZoomOut,
   onResetZoom,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <Box
     sx={{
       position: 'absolute',
@@ -101,13 +110,13 @@ export const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({
     }}
     data-testid={testId('zoom-controls')}
   >
-    <IconButton onClick={onZoomIn} sx={overlayButtonSx} aria-label="Zoom in" data-testid={testId('zoom-in')}>
+    <IconButton onClick={onZoomIn} sx={overlayButtonSx} aria-label={copy.zoomIn} data-testid={testId('zoom-in')}>
       <ZoomInIcon />
     </IconButton>
     <IconButton
       onClick={onZoomOut}
       sx={overlayButtonSx}
-      aria-label="Zoom out"
+      aria-label={copy.zoomOut}
       data-testid={testId('zoom-out')}
     >
       <ZoomOutIcon />
@@ -115,13 +124,14 @@ export const LightboxZoomControls: FC<LightboxZoomControlsProps> = ({
     <IconButton
       onClick={onResetZoom}
       sx={overlayButtonSx}
-      aria-label="Reset zoom"
+      aria-label={copy.resetZoom}
       data-testid={testId('zoom-reset')}
     >
       <ResetZoomIcon />
     </IconButton>
   </Box>
-);
+  );
+};
 
 export interface LightboxAutoplayButtonProps {
   testId: TestId;
@@ -133,7 +143,9 @@ export const LightboxAutoplayButton: FC<LightboxAutoplayButtonProps> = ({
   testId,
   isAutoPlaying,
   onToggle,
-}) => (
+}) => {
+  const copy = useLightboxCopy();
+  return (
   <IconButton
     onClick={onToggle}
     sx={{
@@ -144,9 +156,10 @@ export const LightboxAutoplayButton: FC<LightboxAutoplayButtonProps> = ({
       transform: 'translateX(-50%)',
       zIndex: OVERLAY_Z_INDEX,
     }}
-    aria-label={isAutoPlaying ? 'Pause slideshow' : 'Start slideshow'}
+    aria-label={isAutoPlaying ? copy.pause : copy.play}
     data-testid={testId('autoplay')}
   >
     {isAutoPlaying ? <PauseIcon /> : <PlayIcon />}
   </IconButton>
-);
+  );
+};

package/src/components/data-display/Lightbox/lightbox-copy-context.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import React from 'react';
+
+import type { LightboxCopy } from '../../../copy';
+
+/**
+ * The lightbox's words, for the four control components that render them.
+ *
+ * A CONTEXT rather than props: the viewer is `Lightbox` → `LightboxOverlay` →
+ * three separate control clusters, and threading one object down three hops is
+ * how a copy port comes to exist, be required, and go unread. It stays a
+ * single REQUIRED prop at the mount, which is the only place a host answers.
+ */
+const LightboxCopyContext = createContext<LightboxCopy | null>(null);
+
+export function LightboxCopyProvider({
+  copy,
+  children,
+}: {
+  copy: LightboxCopy;
+  children: ReactNode;
+}): React.JSX.Element {
+  return <LightboxCopyContext.Provider value={copy}>{children}</LightboxCopyContext.Provider>;
+}
+
+/**
+ * The words this viewer renders — THROWS outside a provider rather than
+ * falling back.
+ *
+ * Every one of them is an aria-label on a glyph, so a fallback would be the
+ * one failure nobody sees in review: the sighted path renders identically
+ * whichever language it is in.
+ */
+export function useLightboxCopy(): LightboxCopy {
+  const copy = useContext(LightboxCopyContext);
+  if (!copy) {
+    throw new Error('useLightboxCopy must be rendered inside a <LightboxCopyProvider>');
+  }
+  return copy;
+}

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

@@ -9,6 +9,7 @@ import React from 'react';
 
 import { MAX_ZOOM, MIN_ZOOM } from './MapPreview.constants';
 import type { MapType } from './MapPreview.types';
+import type { MapPreviewCopy } from '../../../copy';
 
 // Kept module-local: the inferred type of a styled() component cannot be named
 // across a module boundary here (TS2742).
@@ -41,6 +42,12 @@ const ControlButton = styled(IconButton)(({ theme }) => ({
 }));
 
 export interface MapControlBarProps {
+  /**
+   * The six controls' names. Every one is a glyph with a `title` AND an
+   * `aria-label`, so this object is both the tooltip and what a screen reader
+   * reads — REQUIRED, because a default is one language for every adopter.
+   */
+  copy: MapPreviewCopy;
   zoom: number;
   mapType: MapType;
   onZoomIn: () => void;
@@ -51,6 +58,7 @@ export interface MapControlBarProps {
 }
 
 export const MapControlBar: FC<MapControlBarProps> = ({
+  copy,
   zoom,
   mapType,
   onZoomIn,
@@ -60,33 +68,33 @@ export const MapControlBar: FC<MapControlBarProps> = ({
   onToggleFullscreen,
 }) => (
   <MapControls data-testid="map-controls">
-    <Tooltip title="Zoom in" placement="left">
+    <Tooltip title={copy.zoomIn} placement="left">
       <ControlButton
         size="small"
         onClick={onZoomIn}
-        aria-label="Zoom in"
+        aria-label={copy.zoomIn}
         data-testid="zoom-in-button"
         disabled={zoom >= MAX_ZOOM}
       >
         <ZoomInIcon fontSize="small" />
       </ControlButton>
     </Tooltip>
-    <Tooltip title="Zoom out" placement="left">
+    <Tooltip title={copy.zoomOut} placement="left">
       <ControlButton
         size="small"
         onClick={onZoomOut}
-        aria-label="Zoom out"
+        aria-label={copy.zoomOut}
         data-testid="zoom-out-button"
         disabled={zoom <= MIN_ZOOM}
       >
         <ZoomOutIcon fontSize="small" />
       </ControlButton>
     </Tooltip>
-    <Tooltip title="Center map" placement="left">
+    <Tooltip title={copy.center} placement="left">
       <ControlButton
         size="small"
         onClick={onCenter}
-        aria-label="Center map"
+        aria-label={copy.center}
         data-testid="center-button"
       >
         <CenterIcon fontSize="small" />
@@ -96,17 +104,17 @@ export const MapControlBar: FC<MapControlBarProps> = ({
       <ControlButton
         size="small"
         onClick={onToggleMapType}
-        aria-label="Change map type"
+        aria-label={copy.mapType}
         data-testid="map-type-button"
       >
         <LayersIcon fontSize="small" />
       </ControlButton>
     </Tooltip>
-    <Tooltip title="Toggle fullscreen" placement="left">
+    <Tooltip title={copy.fullscreen} placement="left">
       <ControlButton
         size="small"
         onClick={onToggleFullscreen}
-        aria-label="Toggle fullscreen"
+        aria-label={copy.fullscreen}
         data-testid="fullscreen-button"
       >
         <FullscreenIcon fontSize="small" />