Every change below has a live demo. Switch between Before and After to feel the difference.
npm i @yusufceng1z/ding@latest
Compare:
Translate the screen reader labels New
Two names were hard-coded in English: the notifications region and the close button. On a page in another language, a screen reader read the toast in that language and these two controls in English. Now you pass your own strings. Keys you leave out keep the English default.
Buttons keep their look but the area that counts as a click grew from 30 to 44 pixels tall, so a thumb that lands slightly above or below still hits. Neighbouring buttons never overlap.
Show the click areas, open the toast, then click just above or below Retry.
No clicks yet
Alt + T reaches every toast
Alt + T moves focus into the toast, which also pauses its timer. Before, it only worked when the toast had a button. A plain "Saved" toast could not be reached by keyboard and disappeared after five seconds. Now focus lands on the toast itself, with a ring inside it.
Open the toast, then press Alt + T within five seconds. It only works in the After mode, because the old code is gone.
Focus: not on a toast
Esc no longer closes toasts behind your back
Esc dismisses toasts, but it used to do that even while you pressed Esc to close a dialog, a menu or to clear a text field. Now it leaves the toast alone when focus is in one of those. Press Esc anywhere else and it still dismisses.
Open a toast that stays. Click into the field or open the dialog, then press Esc.
Toasts on screen: 0
Smaller fixes
Centered icon. The status icon sat one pixel low next to the text. It is now centered in the pill.
Even padding. A toast without buttons had about 29 pixels of space after the text and 12 before the icon. The right side is now about 15, so the pill looks balanced.
Safari drag. Dragging a toast no longer highlights its text in Safari.
Page styles can't push buttons around. A site-wide button { margin } rule used to shift the close button. The toast now resets its own button margins.
For contributors
A fresh clone now installs, type-checks, tests and builds, and a GitHub Actions workflow runs the same steps on every pull request. Running the tests needs Node 22.18 or newer. The packages themselves still support Node 18 and up. Thanks to Amidou Cissé for pull request 1.