Progress
Progress through a task: ink filling a groove, never a coloured bar.
Kit parts
Darkroom tray
A darkroom tray. A plate under the tray prints the same words the tongs read out.
Anatomy
One button over a drawn scene, not a bundled photo.
Variants
- Just started
- Ready to lift
- Already on the line
- Disabled
States
- Developing
- Hover (ready)
- Focus (ready)
- Drying
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| label | attribute | Names the tongs for a screen reader; it stays fixed, since aria-valuetext carries the changing state. |
| value | attribute | How far the print has come up in the developer. Clamped on every change (darkroomClamp()). |
| hung | attribute / property | The print is already on the line, not in the tray; set it up front for a page restoring a finished state, or read it after lift(). |
| disabled | attribute | The tongs stop taking pointer or keyboard input, whatever the value. |
| value | property | |
| lift() | method | Lifts the print now, if it is ready, not disabled and not already hung; fires lift. Returns whether it moved. |
| lift | event | Fires the moment the print leaves the tray, by tongs or by lift(). |
| darkroomTrayHTML(options) | function |
Usage notes
Tab to the tongs.
Accessibility
- The tongs are a native button.
- The tray, the safelight, the print and the line are aria-hidden: they are the state drawn, not a second copy of it; the button’s own aria-label names the action and never changes.
- The state is never colour alone: the same words are read out by aria-valuetext and printed again on the plate under the tray, besides being drawn.
- A polite status region echoes the same words on every change, for a screen reader that announces status regions rather than aria-valuetext changes.
- The tongs disable themselves (native disabled, so they are simply skipped in the tab order) until the print is ready, and again once it is already hung: nothing to press twice.
- Reduced motion drops the print’s fade and move, the developer’s ripple and its drifting sheen alike: everything lands in its current state at once, nothing lost, and nothing is ever shown by colour or motion alone.
Related parts
Lightbox
A grid of thumbnails that opens one picture large. Each thumbnail is a plate with the picture set in it, and a real link to the full picture, so the grid works without any script. Press one and the page goes behind a near-black scrim. Left and Right turn the page, Home and End go to the first and the last, Escape puts it away, and on a touch screen a swipe does the same. It is dark in every finish, because a picture is looked at best in a dark room.
Media bar
The control bar for an audio or video element. It plays nothing itself: it drives a real media element, so that element’s own events, buffering and errors stay the truth. A primary play key that swaps to pause, the time elapsed and the length on two small LCDs in the mono figures, a scrubber that is the kit’s fader with the loaded length printed as a rule on its floor and the played length filled in, a mute key with a volume fader and an optional speed key. The keys are Space, the arrows and M. For a screen reader the position is a sentence on the scrubber, and a polite status says what happened, no more than once a second.