@aiaiai-pt/design-system 0.31.0 → 0.32.0

package/components/MapCluster.svelte

@@ -15,7 +15,7 @@
 <script>
   import { fromLonLat } from 'ol/proj.js';
   import { boundingExtent } from 'ol/extent.js';
-  import { createTileLayer, createMapStyles, createOverlayLayers, watchTheme, renderMapError } from './map-utils.js';
+  import { createTileLayer, createMapStyles, createOverlayLayers, clusterTooltipLabel, watchTheme, renderMapError } from './map-utils.js';
 
   let {
     /** @type {{ id: string, lon: number, lat: number, label?: string, [key: string]: any }[]} */
@@ -286,21 +286,21 @@
           return;
         }
 
-        const clustered = feature.get('features');
         if (container) container.style.cursor = 'pointer';
 
-        if (clustered?.length === 1) {
-          const data = clustered[0].get('markerData');
-          if (data?.label) {
-            tooltipEl.textContent = data.label;
-            tooltipEl.style.display = 'block';
-            tooltipOverlay.setPosition(feature.getGeometry()?.getCoordinates());
-          }
-        } else {
-          tooltipEl.textContent = `${clustered?.length ?? 0} items`;
-          tooltipEl.style.display = 'block';
-          tooltipOverlay.setPosition(feature.getGeometry()?.getCoordinates());
+        const label = clusterTooltipLabel(feature);
+        if (label == null) {
+          tooltipEl.style.display = 'none';
+          return;
         }
+        tooltipEl.textContent = label;
+        tooltipEl.style.display = 'block';
+        // Cluster features carry a Point geometry; raw overlay (file/WFS)
+        // features can be polygons/lines, so anchor those at the pointer.
+        const coords = feature.get('features') === undefined
+          ? evt.coordinate
+          : feature.getGeometry()?.getCoordinates();
+        tooltipOverlay.setPosition(coords);
       });
 
       // `popup` opens the anchored ficha-resumo overlay; otherwise `onclick`

package/components/TextSizeAdjuster.svelte

@@ -61,27 +61,32 @@
   data-testid="text-size-adjuster"
   {...rest}
 >
+  <!--
+    WCAG 2.5.3 (Label in Name): the accessible name MUST contain the visible
+    text. The visible label is the glyph ("A&minus;" / "A" / "A+"), so the
+    glyph is part of the name (NOT aria-hidden, NOT replaced by aria-label) and
+    the descriptive i18n label rides along as visually-hidden text. Result, e.g.
+    name = "A&minus; Decrease text size", whose visible substring "A&minus;"
+    satisfies the rule while screen readers still hear the full description.
+  -->
   <button
     type="button"
     class="ts-btn ts-decrease"
-    aria-label={decreaseLabel}
     disabled={atMin}
     onclick={() => emit(decreaseTextSize(current))}
-  >A<span aria-hidden="true">&minus;</span></button>
+  >A&minus;<span class="sr-only"> {decreaseLabel}</span></button>
   <button
     type="button"
     class="ts-btn ts-reset"
-    aria-label={resetLabel}
     disabled={atDefault}
     onclick={() => emit(DEFAULT_TEXT_SIZE)}
-  >A</button>
+  >A<span class="sr-only"> {resetLabel}</span></button>
   <button
     type="button"
     class="ts-btn ts-increase"
-    aria-label={increaseLabel}
     disabled={atMax}
     onclick={() => emit(increaseTextSize(current))}
-  >A<span aria-hidden="true">+</span></button>
+  >A+<span class="sr-only"> {increaseLabel}</span></button>
   <span class="sr-only" aria-live="polite" data-testid="text-size-readout"
     >{current}%</span
   >

package/components/Toggle.svelte

@@ -10,10 +10,6 @@
   @example Disabled
   <Toggle label="Notifications" checked disabled />
 -->
-<script module>
-  let _toggleUid = 0;
-</script>
-
 <script>
   let {
     /** @type {boolean} */
@@ -31,9 +27,11 @@
     ...rest
   } = $props();
 
-  const fallbackId = `toggle-${_toggleUid++}`;
-  const toggleId = $derived(id ?? fallbackId);
-
+  // No auto-generated id: the switch self-names via aria-label, so it needs no
+  // id/labelledby plumbing. A module-counter fallback id (`toggle-N`) diverged
+  // between SSR and client (server counter ≠ fresh client counter), an id that
+  // could surface as a duplicate/parse error; an id is now emitted ONLY when a
+  // consumer passes one.
   function handleClick() {
     if (!disabled) {
       checked = !checked;
@@ -50,7 +48,7 @@
     override (e.g. type="submit" if they really want submit semantics).
   -->
   <button
-    id={toggleId}
+    {id}
     class="toggle"
     class:toggle-on={checked}
     class:toggle-disabled={disabled}
@@ -58,15 +56,23 @@
     type="button"
     role="switch"
     aria-checked={checked}
-    aria-labelledby={label ? `${toggleId}-label` : undefined}
+    aria-label={label}
     {...rest}
     onclick={handleClick}
   >
     <span class="toggle-knob"></span>
   </button>
   {#if label}
+    <!--
+      The switch now names itself directly via aria-label (was aria-labelledby →
+      this span). Stricter ACT accessible-name engines (QualWeb/AccessMonitor)
+      did not credit a name referenced through a role="none" target and read the
+      switch as nameless; a direct aria-label is unambiguous. This span is the
+      VISIBLE label only — role="none" keeps it out of the a11y tree so the name
+      isn't announced twice. Click still toggles (sighted affordance); the button
+      stays the keyboard/AT target.
+    -->
     <span
-      id="{toggleId}-label"
       class="toggle-label"
       class:toggle-label-disabled={disabled}
       onclick={handleClick}

package/components/map-utils.js

@@ -374,7 +374,8 @@ export function getHeatmapGradient(el) {
  */
 export function geoStylerToFlat(style) {
   if (!style || typeof style !== "object") return {};
-  if (!Array.isArray(style.rules)) return /** @type {OverlayLayerStyle} */ (style);
+  if (!Array.isArray(style.rules))
+    return /** @type {OverlayLayerStyle} */ (style);
   const sym = style.rules?.[0]?.symbolizers?.[0];
   if (!sym || typeof sym !== "object") return {};
   /** @type {OverlayLayerStyle} */
@@ -389,8 +390,10 @@ export function geoStylerToFlat(style) {
     if (typeof sym.width === "number") flat.strokeWidth = sym.width;
   } else if (sym.kind === "Fill") {
     if (typeof sym.color === "string") flat.fillColor = sym.color;
-    if (typeof sym.outlineColor === "string") flat.strokeColor = sym.outlineColor;
-    if (typeof sym.outlineWidth === "number") flat.strokeWidth = sym.outlineWidth;
+    if (typeof sym.outlineColor === "string")
+      flat.strokeColor = sym.outlineColor;
+    if (typeof sym.outlineWidth === "number")
+      flat.strokeWidth = sym.outlineWidth;
   }
   return flat;
 }
@@ -449,7 +452,9 @@ export async function createOverlayLayers(defs, styles) {
     const point = new Style({
       image: new CircleStyle({
         radius: flat.pointRadius ?? 6,
-        fill: new Fill({ color: flat.pointColor ?? flat.strokeColor ?? "#3366cc" }),
+        fill: new Fill({
+          color: flat.pointColor ?? flat.strokeColor ?? "#3366cc",
+        }),
         stroke,
       }),
     });
@@ -484,6 +489,39 @@ export async function createOverlayLayers(defs, styles) {
     });
 }
 
+// ─── Hover tooltip label ─────────────────────────────────────────
+
+/**
+ * Decide the hover-tooltip text for a feature under the pointer.
+ *
+ * Markers passed via the `markers` prop go through an OL Cluster source, so
+ * each rendered feature carries a `features` collection: one entry → that
+ * marker's label; many → "N items". Features served from an overlay `layers`
+ * def (a file/WFS source) are added to a plain VectorSource and have NO
+ * `features` collection (`undefined`) — for those, fall back to the feature's
+ * own descriptive props rather than rendering the misleading "0 items".
+ *
+ * @param {{ get: (key: string) => any }} feature — an OL Feature (or any
+ *   object exposing `.get(key)`).
+ * @returns {string | null} the label to show, or null to hide the tooltip.
+ */
+export function clusterTooltipLabel(feature) {
+  const clustered = feature.get("features");
+  if (clustered === undefined) {
+    const label =
+      feature.get("name") ??
+      feature.get("title") ??
+      feature.get("label") ??
+      feature.get("markerData")?.label;
+    return label != null && String(label) !== "" ? String(label) : null;
+  }
+  if (clustered.length === 1) {
+    const data = clustered[0].get("markerData");
+    return data?.label ?? null;
+  }
+  return `${clustered.length} items`;
+}
+
 // ─── Boundary (#187 D-e prep) ────────────────────────────────────
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",