` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Covers: Result, Task complete - Categories: Empty states - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Success · green lamp ```html

Payment received

Your receipt is on its way to your inbox.

``` ### Warning · amber lamp ```html

Imported, with 3 rows skipped

The other 212 customers are in. The skipped rows have no email address.

``` ### Failure · red lamp, role="alert" ```html

The import did not run

The file is not a spreadsheet Lode can read. Nothing was changed.

``` ### With small print ```html

Payment received

Your receipt is on its way to your inbox.

Order 1042 · 6 October, 14:02

``` ### One key only ```html

Payment received

Your receipt is on its way to your inbox.

``` ### Beside the words · .tui-result--row ```html

Imported, with 3 rows skipped

The other 212 customers are in. The skipped rows have no email address.

Payment received

Your receipt is on its way to your inbox.

View the order Back to shop

``` ```js import { showResult } from '/kit/kit.mjs'; // A result added to the page, or one that loses its hidden attribute, takes the focus on its own. host.append(resultElement); // Or say so yourself: showResult(document.querySelector('.tui-result')); // unhides it, focuses the verdict ``` The demo on the page: ```html

Customers · Northwind

``` ## Usage notes Pick an outcome and press Run import. The form goes, the result takes its place and focus moves to the verdict: press Tab to reach the keys. Start again brings the form back. ## Accessibility - Focus moves to the verdict when a result appears: one that is added to the page after it has loaded, or that loses its `hidden`. The verdict has `tabindex="-1"`, so it takes focus from a script but is not a stop of its own, and a screen reader says it at once. - Success and warning are `role="status"`, read politely. A failure is `role="alert"`, because the person has to know. The plate is named by its verdict with `aria-labelledby`. - The verdict says how it went in words (“Imported, with 3 rows skipped”), never “Done” alone. The lamp is hidden from a screen reader and the amber and red lamps are never the only sign. - The next step is a real key in the reading order straight after the sentence, so Tab from the verdict reaches it. The contrast key is the one that matters; the other key is flat. - Nothing moves; the lamp does not blink. Keys are 44px on a phone, the plate is as wide as its container and never scrolls sideways, and the verdict’s focus ring is 2px. ## How it’s built The raised plate and bead-blast of a panel, with the recess the kit uses for a well cut into it as a round bezel, and the kit’s lamp enlarged to sit in the middle of it, so every finish draws the lamp as it draws any lamp. The words are the empty state’s: a lead-sized bold title and a sentence in the secondary ink, balanced so they never leave a single word on a line. The focus rule is a small observer in `result.mjs` that waits for the page to finish loading, then focuses the verdict of any plate that arrives or is unhidden. ## Rules Finish a task with a verdict, one sentence and the one thing to do next, and put the focus where the news is. The full rules are in `result.rules.md` in the brain, which ships with the Kit. ## Related parts - [Empty state](https://tactileui.dev/parts/empty-state): What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key. - [Alert](https://tactileui.dev/parts/alert): A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened. - [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.