Crop area

Anatomy

Area goes in Viewport. Grid and the handles go inside it:

<Cropper.Area aria-label="Crop area">
  <Cropper.Grid />
  <Cropper.Handle position="top-left" />
  <Cropper.Handle position="top" />
  <Cropper.Handle position="top-right" />
  <Cropper.Handle position="right" />
  <Cropper.Handle position="bottom-right" />
  <Cropper.Handle position="bottom" />
  <Cropper.Handle position="bottom-left" />
  <Cropper.Handle position="left" />
</Cropper.Area>

Leave out the handles you do not need. With shape="circle", the stylesheet hides the four corner handles.

Area points aria-describedby at the Instructions part. Render it with your own help text. Without it, the reference points at nothing and screen readers skip it. Accessibility covers it and Announcer.

The demo above uses the styles from the zriz site.

Recolour the focus ring

The stylesheet draws a two-tone ring inside Area on keyboard focus, so a crop flush with the viewport keeps it. Without the stylesheet, the browser draws its default ring. To recolour it:

[data-zriz-item="area"]:focus-visible {
  outline-color: #000;
}
[data-zriz-item="area"]:focus-visible::after {
  outline-color: #fdca00;
}

Make the handles easier to grab

Each handle's hit box is 44 px square, centred on the crop's edge. Set --zriz-handle-size on Area to change all eight. Give the viewport padding of at least half that size, or the clip cuts the box, see viewport:

[data-zriz-item="viewport"] {
  padding: 28px;
}
[data-zriz-item="area"] {
  --zriz-handle-size: 56px;
}

Know when the grid shows

The grid hides at rest. It shows thirds (3 × 3) from the moment you press or move the crop, and a fine grid (9 × 9) while the dial moves:

Make the straighten grid fainter

Lines of the fine grid carry no data-coarse. A fading grid keeps its lines, so this rule holds until the grid is gone:

[data-zriz-item="grid"] > :not([data-coarse]) {
  background: rgb(255 255 255 / 0.3);
}

Keyboard

These keys work while Area has focus, never on the window:

Escape during a handle drag cancels it and puts the crop back.

API