Ilmoituskupla

Toast — ilmoitus

const [viesti, setViesti] = useState<string | null>(null);

{viesti && <Toast key={viesti} message={viesti} tone="success" />}

Deklaratiivinen, ei jonoa. Yksi ilmoitus kerrallaan — renderöi komponentti kun on jotain kerrottavaa. Jos tarvitset jonon, kerro: se on lisättävissä taaksepäin yhteensopivasti, mutta kukaan ei ole vielä tarvinnut.

`key` on kutsujan vastuulla. Sama viesti kahdesti peräkkäin ei laukaise animaatiota uudelleen ilman remounttia — key={viesti} tai key={id} hoitaa sen. Sisäinen nonce piilottaisi sen, onko kyse uudesta ilmoituksesta vai saman päivityksestä.

Ajastin pysähtyy kun hiiri tai fokus on ilmoituksen päällä, jottei pitkä viesti sulkeudu kesken lukemisen. Fokus on mukana hiiren rinnalla, jotta näppäimistökäyttäjä ja ruudunlukija ehtivät.

aria-live="polite" eikä assertive: vahvistus ei saa keskeyttää ruudunlukijaa kesken lauseen. Sama koskee error-sävyä — se on vahvistus tehdystä toiminnosta, ei keskeytystä vaativa hälytys.