Mobile-first + WCAG 2.2 AA¶

<img
  src={src}
  alt={decorative ? "" : `Avatar di ${userName}`}
  aria-hidden={decorative}
  className="w-10 h-10 rounded-full"
/>

<figure>
  <video controls>
    <source src={src} type="audio/mpeg" />
    <track kind="captions" src="/captions/briefing-it.vtt" srcLang="it" label="Italiano" default />
  </video>
  <figcaption className="sr-only">{transcript}</figcaption>
</figure>

<nav aria-label="Navigazione rapida" className="sr-only focus-within:not-sr-only">
  <a href="#main-content"
     className="fixed top-2 left-2 z-[9999] bg-[--color-accent] text-white px-4 py-2 rounded
                focus:outline-none focus:ring-2 focus:ring-white">
    Salta al contenuto
  </a>
</nav>

<input type="password"
       id="password"
       name="password"
       autoComplete="current-password"   // abilita password manager
       aria-describedby="password-hint" />
<p id="password-hint" className="text-sm text-[--color-text-muted]">
  In alternativa usa una passkey o il link via email.
</p>

export function IconButton({ icon, label, ...props }) {
  return (
    <button
      aria-label={label}
      className="min-w-[44px] min-h-[44px] inline-flex items-center justify-center
                 rounded-lg transition-colors
                 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--color-accent]"
      {...props}
    >
      {icon}
    </button>
  );
}

import { useEffect, useState } from "react";


export function useReducedMotion(): boolean {
  const query = "(prefers-reduced-motion: reduce)";
  const [reduced, setReduced] = useState(
    () => typeof window !== "undefined" && window.matchMedia(query).matches
  );
  useEffect(() => {
    const mql = window.matchMedia(query);
    const handler = (e: MediaQueryListEvent) => setReduced(e.matches);
    mql.addEventListener("change", handler);
    return () => mql.removeEventListener("change", handler);
  }, []);
  return reduced;
}

import { useEffect, useRef } from "react";


export function Modal({ isOpen, onClose, title, children, triggerId }) {
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    const d = dialogRef.current;
    if (!d) return;
    if (isOpen) d.showModal();
    else {
      d.close();
      document.getElementById(triggerId)?.focus();  // restituzione focus
    }
  }, [isOpen, triggerId]);

  useEffect(() => {
    const d = dialogRef.current;
    if (!d) return;
    const onCloseEvt = () => onClose();
    d.addEventListener("close", onCloseEvt);
    return () => d.removeEventListener("close", onCloseEvt);
  }, [onClose]);

  return (
    <dialog ref={dialogRef} aria-labelledby="modal-title" aria-modal="true"
            className="w-full max-w-lg rounded-xl p-6 backdrop:bg-black/60">
      <h2 id="modal-title">{title}</h2>
      {children}
      <button onClick={onClose} aria-label="Chiudi"
              className="absolute top-4 right-4 min-w-[44px] min-h-[44px]">
        ×
      </button>
    </dialog>
  );
}

// Layout radice — MAI condizionale
export function ChatLiveRegion() {
  return (
    <>
      <div id="chat-announcer-polite" aria-live="polite" aria-atomic="true" className="sr-only" />
      <div id="chat-announcer-assertive" aria-live="assertive" aria-atomic="true" className="sr-only" />
    </>
  );
}


// Hook
export function useChatAnnouncer() {
  const announce = (message: string, priority: "polite" | "assertive" = "polite") => {
    const el = document.getElementById(`chat-announcer-${priority}`);
    if (!el) return;
    el.textContent = "";
    requestAnimationFrame(() => { el.textContent = message; });
  };
  return { announce };
}

const handleKey = (e, index) => {
  const map = {
    ArrowRight: (index + 1) % tabs.length,
    ArrowLeft: (index - 1 + tabs.length) % tabs.length,
    Home: 0,
    End: tabs.length - 1,
  };
  if (e.key in map) {
    e.preventDefault();
    setActiveIndex(map[e.key]);
    document.getElementById(`tab-${tabs[map[e.key]].id}`)?.focus();
  }
};

// JSX:
// <button role="tab" aria-selected={i === active} aria-controls={`panel-${tab.id}`}
//         tabIndex={i === active ? 0 : -1} onKeyDown={e => handleKey(e, i)}>

<section aria-labelledby={`${chartId}-title`}>
  <h3 id={`${chartId}-title`}>{title}</h3>
  <div role="img" aria-label={description} aria-describedby={tableId} className="h-48 w-full">
    {/* grafico Recharts */}
  </div>
  <table id={tableId} className="sr-only">
    <caption>{title} — dati tabellari</caption>
    <thead><tr><th scope="col">Periodo</th><th scope="col">Valore</th><th scope="col">Unità</th></tr></thead>
    <tbody>{data.map(d => <tr><td>{d.label}</td><td>{d.value}</td><td>{d.unit}</td></tr>)}</tbody>
  </table>
</section>

export function AccessibilitySettings() {
  return (
    <section aria-labelledby="a11y-title">
      <h2 id="a11y-title">Impostazioni accessibilità</h2>
      <fieldset>
        <legend>Testo</legend>
        <label htmlFor="font-scale" className="flex flex-col gap-1">
          <span>Dimensione testo</span>
          <input type="range" id="font-scale" min="80" max="150" step="10"
                 defaultValue={100} className="min-h-[44px]" />
        </label>
      </fieldset>
      <fieldset>
        <legend>Visualizzazione</legend>
        <label className="flex items-center gap-3 min-h-[44px]">
          <input type="checkbox" id="high-contrast" className="w-5 h-5" />
          <span>Alto contrasto</span>
        </label>
        <label className="flex items-center gap-3 min-h-[44px]">
          <input type="checkbox" id="reduce-motion" className="w-5 h-5" />
          <span>Riduci animazioni</span>
        </label>
      </fieldset>
    </section>
  );
}