Badge Counter Notification Block for React

CAP (99) is the most a badge prints; numberOf gives the number or "99+", shownOf says what the badge is in words (nothing, a dot, or the number), and spokenOf builds the button's name ("Notifications, 120 unread", or "Notifications, nothing unread"). Change CAP and every cell follows. The bell's field takes whole numbers from 0 to 999 (MAX_COUNT); the other two buttons are the constants INBOX_COUNT and CHAT_COUNT.

A dot shows that something is new and nothing more, so a screen reader would hear nothing at all. The button's name is built from the count in both styles ("Notifications, 120 unread"), and the cell prints the same sentence under "Read out". Only the picture changes between Number and Dot.

Nothing is saved: the bell's count is the field's value and the other two are typed constants. The buttons are drawn and press nothing. In your app put the same Mark on a real button, pass it your unread count and give the button aria-label from spokenOf; if you hide the badge from a screen reader, as this block does, the name is the only place the count is spoken.

Type or use the steppers; the bell follows what you enter, and a polite status message says what the badge shows and how the button reads about a second after you stop. Anything that isn't a number counts as 0, and a number above 999 is brought back to 999 when you leave the field.

Each drawn button is an image with the name a real button would have, so a screen reader hears the same words a sighted visitor can read under "Read out". The badge itself is hidden from assistive technology because the name already carries the count. The field and the toggle group are named, the toggle group works with the arrow keys, and the badge colours are foreground on background in every theme.

The three cells stay three across down to 320 pixels: each holds a name, a drawn button and three short facts that wrap inside the cell. The controls band wraps, the field first and the toggle group beside it or under it.