Notifications

A key with a counter window in its cap, and a card of messages hung from it. Each unread message has its lamp lit; reading it puts the lamp out and the counter steps down.

Open the card. Press a key inside a message to read it, or Mark all read: the lamps go out top to bottom and the counter steps down.

• The key’s aria-label carries the count (“Notifications, 3 unread”); the counter window is aria-hidden, so it is not read twice.
• The card is a non-modal role="dialog" with a heading; the head’s status is a polite live region, so “All read” is announced after Mark all read.
• Unread is a lamp and a bold title, never the lamp alone.
• Opening the card reads nothing: a message is read when one of its keys is pressed, or with Mark all read.
• Reduced motion puts the lamps out together.