@12-apps/ui 6.6.0 → 6.7.0

package/src/components/data-display/Carousel/Carousel.chrome.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { CarouselArrows, CarouselIndicators, CarouselThumbnails } from './Carousel.parts';
+import type { CarouselCopy } from '../../../copy';
 import type {
   CarouselArrowsProps,
   CarouselIndicatorsProps,
@@ -12,6 +13,8 @@ type IndicatorPosition = NonNullable<CarouselIndicatorsProps['position']>;
 type Color = NonNullable<CarouselIndicatorsProps['color']>;
 
 export interface CarouselChromeProps {
+  /** The two arrows' accessible names, from the mount. */
+  copy: CarouselCopy;
   items: CarouselItem[];
   activeIndex: number;
   loop: boolean;
@@ -34,6 +37,7 @@ export interface CarouselChromeProps {
  * as three conditional blocks inside the carousel's own render.
  */
 export const CarouselChrome: React.FC<CarouselChromeProps> = ({
+  copy,
   items,
   activeIndex,
   loop,
@@ -52,6 +56,7 @@ export const CarouselChrome: React.FC<CarouselChromeProps> = ({
   <>
     {showArrows && !disabled && (
       <CarouselArrows
+        copy={copy}
         onPrev={onPrev}
         onNext={onNext}
         position={arrowPosition}

package/src/components/data-display/Carousel/Carousel.parts.tsx

@@ -212,7 +212,8 @@ const arrowSx = (theme: Theme, color: Color, isOverlay: boolean): CSSObject => (
 
 export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
   const {
-    onPrev, onNext, position, disabled, disablePrev, disableNext, color, size, className, style,
+    copy, onPrev, onNext, position, disabled, disablePrev, disableNext, color, size, className,
+    style,
   } = withDefaults(props, ARROWS_DEFAULTS) as CarouselArrowsProps &
     Required<Pick<CarouselArrowsProps, keyof typeof ARROWS_DEFAULTS>>;
 
@@ -227,7 +228,7 @@ export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
         disabled={disabled || disablePrev}
         size={muiSize(size)}
         className={className}
-        aria-label="Previous slide"
+        aria-label={copy.previous}
         data-testid="carousel-prev-button"
         sx={{ ...sx, left: offset, ...style }}
       >
@@ -237,7 +238,7 @@ export const CarouselArrows: React.FC<CarouselArrowsProps> = (props) => {
       <IconButton
         onClick={onNext}
         disabled={disabled || disableNext}
-        aria-label="Next slide"
+        aria-label={copy.next}
         size={muiSize(size)}
         className={className}
         data-testid="carousel-next-button"

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

@@ -1,5 +1,6 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { CSSProperties, ReactNode } from 'react';
+import type { CarouselCopy } from '../../../copy';
 
 export interface CarouselItem {
   id: string;
@@ -11,6 +12,11 @@ export interface CarouselItem {
 }
 
 export interface CarouselProps {
+  /**
+   * The two arrows' accessible names. They render a glyph and nothing else,
+   * so this pair IS what a screen reader announces for them. REQUIRED.
+   */
+  copy: CarouselCopy;
   items: CarouselItem[];
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'cards';
   size?: SizeValue;
@@ -58,6 +64,7 @@ export interface CarouselIndicatorsProps {
 }
 
 export interface CarouselArrowsProps {
+  copy: CarouselCopy;
   onPrev: () => void;
   onNext: () => void;
   position?: 'inside' | 'outside' | 'overlay';

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

@@ -231,6 +231,8 @@ 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;
   saveFailed: string;
   /** Reopen the save dialog over an existing view. */
   editView: string;

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/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" />

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

@@ -46,6 +46,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
 
       {settings.showSearch && (
         <MapSearchBar
+          label={settings.copy.search}
           value={search.searchValue}
           placeholder={settings.searchPlaceholder}
           isSearching={search.isSearching}
@@ -56,6 +57,7 @@ export const MapLayers: FC<MapLayersProps> = ({ settings, zoom, mapType, search,
 
       {settings.showControls && (
         <MapControlBar
+          copy={settings.copy}
           zoom={zoom}
           mapType={mapType}
           onZoomIn={controls.handleZoomIn}

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

@@ -1,3 +1,5 @@
+import type { MapPreviewCopy } from '../../../copy';
+
 export type MapType = 'roadmap' | 'satellite' | 'hybrid' | 'terrain';
 
 export interface LatLng {
@@ -20,6 +22,14 @@ export interface HeatmapPoint {
 }
 
 export interface MapPreviewProps {
+  /**
+   * The control bar's six names and the search field's own. Every control is a
+   * glyph carrying a `title` and an `aria-label`, so this is both the tooltip
+   * and what a screen reader reads. REQUIRED — `searchPlaceholder` beside it
+   * shows the shape this replaces: an English default that read as
+   * configurable right up until nobody configured it.
+   */
+  copy: MapPreviewCopy;
   /** Map center coordinates */
   center?: { lat: number; lng: number };
   /** Legacy coordinates prop (use center instead) */

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

@@ -28,6 +28,8 @@ const SearchField = styled(TextField)(({ theme }) => ({
 }));
 
 export interface MapSearchBarProps {
+  /** The field's accessible name — it renders no visible label. REQUIRED. */
+  label: string;
   value: string;
   placeholder: string;
   isSearching: boolean;
@@ -36,6 +38,7 @@ export interface MapSearchBarProps {
 }
 
 export const MapSearchBar: FC<MapSearchBarProps> = ({
+  label,
   value,
   placeholder,
   isSearching,
@@ -58,7 +61,7 @@ export const MapSearchBar: FC<MapSearchBarProps> = ({
         ),
       }}
       disabled={isSearching}
-      aria-label="Search location"
+      aria-label={label}
     />
   </SearchBar>
 );

package/src/copy.ts

@@ -129,4 +129,61 @@ export interface CepFieldCopy {
 export interface TableFilterCopy {
   /** A numeric range whose maximum is below its minimum. */
   invalidRange: string;
+  /** The two free-text bounds, which carry no visible label of their own. */
+  rangeMin: string;
+  rangeMax: string;
+}
+
+/**
+ * The lightbox's controls, every one of them a glyph with no text.
+ *
+ * So this object IS what a screen-reader user hears for the whole viewer —
+ * which is why it shipped as English literals for so long without anyone
+ * noticing: the sighted path renders identically either way.
+ */
+export interface LightboxCopy {
+  close: string;
+  previous: string;
+  next: string;
+  zoomIn: string;
+  zoomOut: string;
+  resetZoom: string;
+  /** The slideshow toggle, in its two states. */
+  play: string;
+  pause: string;
+}
+
+/** The map preview's control bar — same shape, same reason, as the lightbox. */
+export interface MapPreviewCopy {
+  zoomIn: string;
+  zoomOut: string;
+  center: string;
+  mapType: string;
+  fullscreen: string;
+  search: string;
+}
+
+/** The carousel's two arrows, which carry a glyph and nothing else. */
+export interface CarouselCopy {
+  previous: string;
+  next: string;
+}
+
+/**
+ * The states a data surface can be in with nothing to draw, and the dismiss
+ * every banner-like surface carries.
+ *
+ * One object rather than six, because these are the same four sentences the
+ * table, the grid, the async container, the hover card and the infinite
+ * scroller each rendered their own copy of.
+ */
+export interface DataStateCopy {
+  /** No rows at all — distinct from "no rows for these filters". */
+  empty: string;
+  loading: string;
+  /** The infinite scroller reached the end. */
+  endOfList: string;
+  /** An alert's and a banner's dismiss, neither of which has a visible label. */
+  dismissAlert: string;
+  dismissBanner: string;
 }

package/src/pt-BR.ts

@@ -1,12 +1,16 @@
 import type { DataViewsCopy } from "./components/data-display/DataViews/data-views-copy";
 import type { SavedViewsLabels } from "./components/layout/ContentToolbar/ContentToolbar.types";
 import type {
+  CarouselCopy,
   CategorySelectCopy,
   CepFieldCopy,
   ConfirmActionCopy,
+  DataStateCopy,
+  LightboxCopy,
+  MapPreviewCopy,
   SectionOnboardingCopy,
   TableFilterCopy,
-} from "./copy";
+} from './copy';
 
 /**
  * The pt-BR packs — NAMED constants a host passes by hand, never defaults.
@@ -101,6 +105,41 @@ export const PT_BR_SAVED_VIEWS_LABELS: SavedViewsLabels = {
 
 export const PT_BR_TABLE_FILTER_COPY: TableFilterCopy = {
   invalidRange: "O máximo deve ser maior ou igual ao mínimo.",
+  rangeMin: "Mínimo",
+  rangeMax: "Máximo",
+};
+
+export const PT_BR_LIGHTBOX_COPY: LightboxCopy = {
+  close: "Fechar",
+  previous: "Anterior",
+  next: "Próximo",
+  zoomIn: "Aproximar",
+  zoomOut: "Afastar",
+  resetZoom: "Restaurar o zoom",
+  play: "Iniciar a apresentação",
+  pause: "Pausar a apresentação",
+};
+
+export const PT_BR_MAP_PREVIEW_COPY: MapPreviewCopy = {
+  zoomIn: "Aproximar",
+  zoomOut: "Afastar",
+  center: "Centralizar o mapa",
+  mapType: "Trocar o tipo de mapa",
+  fullscreen: "Tela cheia",
+  search: "Buscar endereço",
+};
+
+export const PT_BR_CAROUSEL_COPY: CarouselCopy = {
+  previous: "Anterior",
+  next: "Próximo",
+};
+
+export const PT_BR_DATA_STATE_COPY: DataStateCopy = {
+  empty: "Nenhum dado por aqui",
+  loading: "Carregando…",
+  endOfList: "Não há mais itens para carregar",
+  dismissAlert: "Fechar o aviso",
+  dismissBanner: "Fechar a faixa",
 };
 
 export const PT_BR_DATA_VIEWS_COPY: DataViewsCopy = {
@@ -260,6 +299,7 @@ export const PT_BR_DATA_VIEWS_COPY: DataViewsCopy = {
     saveAs: "Salvar como nova",
     reset: "Redefinir",
     updateFailed: "Não foi possível atualizar a visão",
+    dismissError: "Fechar o aviso",
     saveFailed: "Não foi possível salvar a alteração da visão.",
     editView: "Renomear e editar",
     pinToSidebar: "Fixar na barra lateral",