Marco de mapa.

<figure class="ui-sample ui-map" data-map-frame="true"><div class="ui-map__canvas" role="img" aria-label="Mapa de buses activos en Santiago"><span class="ui-map__marker">1</span><nav aria-label="Controles del mapa"><button type="button" aria-label="Acercar">+</button><button type="button" aria-label="Alejar">−</button></nav></div><figcaption>Fuente: DTPM · actualizado 18:24 CLT · <a href="#tabla">Ver alternativa tabular</a></figcaption></figure>

<figure class="ui-sample ui-map border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-frame="true"><div class="ui-map__canvas" role="img" aria-label="Mapa de buses activos en Santiago"><span class="ui-map__marker">1</span><nav class="flex flex-wrap items-center gap-3" aria-label="Controles del mapa"><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Acercar">+</button><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Alejar">−</button></nav></div><figcaption class="text-sm text-slate-600">Fuente: DTPM · actualizado 18:24 CLT · <a class="underline underline-offset-4" href="#tabla">Ver alternativa tabular</a></figcaption></figure>

import type { MouseEventHandler, ReactNode } from "react";

export interface MapFrameProps {
  /** Texto alternativo del lienzo (`aria-label` de `role="img"`): qué muestra el mapa. */
  alt?: string;
  /** Contenido del marcador destacado: número de puntos agrupados o rótulo de un punto; vacío lo oculta. */
  marker?: string | number;
  /** Contenido del lienzo (teselas, SVG o marcadores propios); se dibuja antes del marcador y los controles. En un SVG propio, las zonas llevan `map-zone map-zone--N` (N de 1 a 4), el trazado `map-route` y los puntos `map-node`. */
  children?: ReactNode;
  /** Muestra los botones de acercar y alejar sobre el lienzo. */
  controls?: boolean;
  /** Nombre accesible del grupo de controles. */
  controlsLabel?: string;
  /** Nombre accesible del botón «+»; vacío lo nombra por su texto. */
  zoomInLabel?: string;
  /** Nombre accesible del botón «−»; vacío lo nombra por su texto. */
  zoomOutLabel?: string;
  onZoomIn?: MouseEventHandler<HTMLButtonElement>;
  onZoomOut?: MouseEventHandler<HTMLButtonElement>;
  /** Línea de fuente del pie, con su prefijo («Fuente: …») y sin el separador final; vacía la oculta. */
  source?: string;
  /** Texto del enlace del pie a la alternativa tabular; vacío lo oculta. */
  linkLabel?: string;
  /** Destino del enlace del pie, normalmente el id de la tabla con los mismos datos. */
  href?: string;
  className?: string;
}

/**
 * Marco para publicar un mapa de datos con su fuente: lienzo con nombre accesible, marcador, botones de acercar y alejar, y pie con enlace a la tabla equivalente.
 *
 * El lienzo tiene `role="img"`; la lectura accesible de los datos es la tabla a la que lleva el enlace del pie.
 *
 * @example <MapFrame alt="Mapa de buses activos en Santiago" marker={2} source="Fuente: DTPM · actualizado 18:24 CLT" href="#tabla-buses" />
 * @example <MapFrame alt="Mapa de paraderos en Maipú" marker="" onZoomIn={acercar} onZoomOut={alejar}>{teselas}</MapFrame>
 */
export function MapFrame({
  alt = "Mapa de buses activos en Santiago",
  marker = "1",
  children,
  controls = true,
  controlsLabel = "Controles del mapa",
  zoomInLabel = "Acercar",
  zoomOutLabel = "Alejar",
  onZoomIn,
  onZoomOut,
  source = "Fuente: DTPM · actualizado 18:24 CLT",
  linkLabel = "Ver alternativa tabular",
  href = "#tabla",
  className,
}: MapFrameProps) {
  const enlace = linkLabel ? <a href={href}>{linkLabel}</a> : null;
  return (
    <figure className={["ui-map", className].filter(Boolean).join(" ")} data-map-frame>
      <div className="ui-map__canvas" role="img" aria-label={alt}>
        {children}
        {marker != null && marker !== "" ? <span className="ui-map__marker">{marker}</span> : null}
        {controls ? (
          <nav aria-label={controlsLabel}>
            <button type="button" aria-label={zoomInLabel || undefined} onClick={onZoomIn}>+</button>
            <button type="button" aria-label={zoomOutLabel || undefined} onClick={onZoomOut}>−</button>
          </nav>
        ) : null}
      </div>
      {source || enlace ? (
        <figcaption>
          {source ? (enlace ? `${source} · ` : source) : null}
          {enlace}
        </figcaption>
      ) : null}
    </figure>
  );
}