# Darkroom tray

A darkroom tray. A plate under the tray prints the same words the tongs read out.

Kit part · With the Kit · https://tactileui.dev/parts/darkroom-tray

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

- [Progress](https://tactileui.dev/parts/progress): Progress through a task: ink filling a groove, never a coloured bar.
- [Lightbox](https://tactileui.dev/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](https://tactileui.dev/parts/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.