Process canvas
A dog waiting at a crosswalk
Marisol & Finch
$412.80
Analyzing
Checking the expense against the meals policy.
Visibility score
A sheet of versions, for a post that has to show how a component got where it is. Click a version to step into it, move between them with the arrow keys, and press Escape to pull back to the whole sheet. The five frames here are the other demos in this lab, running live.
The frames are laid out at the stage's width instead of being scaled down by the camera. A phone gets two columns on the sheet, and stepping into a version zooms to a frame that is already as wide as the screen, so it reads at full size and its text is never a scaled-down copy of itself. Dragging pans, and pinching or holding Ctrl or Cmd while scrolling zooms for a closer look. On touch a single finger scrolls the page, since otherwise the canvas would trap it.
Going from one version to the next is a single trip, and the camera pulls back far enough that both fit before pushing in on the new one. The centre and the zoom move together along one curve, so there is no point halfway where one has finished and the other has not started, and the trip never stalls. Only the version in view takes input. The others are inert, which keeps a click on a neighbour from landing on its buttons and keeps Tab inside the one you are reading.
Keyboard and access
- Keyboard
- The canvas is one tab stop. With it focused, the left and right arrows step to the previous and next version, from the sheet they enter the first or the last, and Escape pulls back to the sheet. The pill under the canvas has the same controls as buttons: one for the sheet, previous and next, which are disabled at the ends. Only the version in view takes input, so Tab then moves into it and the others are inert. Holding Ctrl or Cmd and scrolling zooms at the pointer, a drag on the empty canvas pans it, and a pinch zooms and pans with two fingers. On touch a single finger scrolls the page instead of moving the canvas.
- Screen readers
- The canvas is a group named Versions, and each version has its label above it. The pill holds a polite live region that reads the count in plain text, such as "5 versions" on the sheet and "3 / 5" on a version, while the rolling digits are hidden from assistive technology. The versions that are not in view are inert, so a screen reader moves through only the one that is.
- Reduced motion
- With reduced motion the camera jumps to its target instead of travelling, and the digits in the count swap without rolling.