· 1 min read

Telling publishers which listing fields are required on snapcraft.io

snapcanonicalsnapcraft

The snap listing form in the publisher dashboard (/<snap-name>/listing) has five required fields: title, category, secondary category, summary and description. Before this change, clearing one and saving gave no explanation of what was wrong. canonical/snapcraft.io#5283 asked for validation hints, and #5303 adds them.

What changed

The change is almost entirely in ListingDetails.tsx, which now receives react-hook-form’s formState from ListingForm.tsx. For each required field:

  • The register() call passes required: "This field is required" instead of required: true, so the library carries a message.
  • When formState.errors has an entry for the field, its row gets Vanilla’s p-form-validation is-error classes and the input gets p-form-validation__input.
  • A p-form-validation__message paragraph with role="alert" renders the message, and the input points at it with aria-describedby.
  • Each label gets an asterisk, marked up as <span aria-label="required">*</span>.

The category select also gains an empty “Select a category” option, so a missing choice is a real, detectable state rather than the first category being silently pre-selected.

Tests

The PR adds four validation tests to ListingForm.test.tsx, each clearing a required field and checking for the error message. The existing ListingDetails and ImageUpload tests now pass a formState prop. The PR description reports 13 of 13 tests in the affected suites passing.