Notification

Contract

The markup is built by instrument.js: a toast is started by a call rather than by a node written by hand. If the standard one is not enough, assemble your own and put it into .inst-toasts yourself.

Accessibility

Behavior

Why a popover

The region is declared a popover, because z-index does not settle the task entire. A toast has to be visible over everything the application drew: a panel with overflow: hidden, a sticky header, an open popover. The top layer gives that by construction, and a number in a z-index only until the first larger number of somebody else's.

Hence there is no separate z-index for toasts in the library: there would be nowhere to apply it.

A modal is above a toast

A toast does not cover an open modal. Verified by measurement: a region reopened after showModal() — in the same task and a task later alike — stays under the dialog. The top layer is ordered by the time of entry, but a modal dialog holds above manipulations with popover.

What to do instead:

That is more correct anyway: a message about the result of an action started in a dialog ought to arrive where the person is looking.

Why the region is always open

popover="manual" is opened once at initialisation and is not closed.

A closed popover is display: none, and a live region in display: none is not spoken: a screen reader would report not one notification. An empty open region is invisible and intercepts nothing — pointer-events come back only to the toasts themselves.

The pause and the ceiling of the queue

The timer freezes under the cursor and on focus. A notification that vanished just as it began to be read is a lost message, and WCAG 2.2.1 requires this: time has to have a pause.

More than four at once are not shown — twenty notifications in a row read as a wall. The oldest leave so that a new one is visible.

JS

A toast is not written as markup — it is called. So there is one example here and it is live: press it, and a notification arrives in the bottom right corner of the screen.

<button class="inst-btn inst-btn--primary" type="button"
        data-demo-toast='{"tone":"ok","title":"The run is queued","text":"worldbox-1 · seventh in the queue"}'>Success</button>
<button class="inst-btn" type="button"
        data-demo-toast='{"tone":"error","title":"Could not send","duration":0}'>An error that does not leave</button>
<button class="inst-btn" type="button"
        data-demo-toast='{"tone":"running","title":"The build is going","text":"Two steps left"}'>Running</button>

import { toast } from '@keshon/instrument/js';

toast({ tone: 'ok', title: 'The run is queued',
        text: 'worldbox-1 · seventh in the queue' });

With no script there are no toasts at all: the queue, the timer and the pause under the cursor are work CSS does not do. The look, the appearing and the leaving are entirely on CSS.

Methods

Options

toast({ tone: 'error', title: 'Could not send', duration: 0 });

toast({ title: 'The task is deleted',
        action: { label: 'Undo', onClick: () => restore() } });

Events

There are none of its own. The action arrives as the action.onClick callback.

API

Related

BannerNoteFailure blockModal