Add accessible names to release form title and date inputs
What does this MR do and why?
Symptom. On the New release and Edit release pages, the "Release title" input has no accessible name, so screen readers announce only "edit text" and axe's label rule flags #release-title (WCAG 4.1.2). The release date input is announced as "Enter date" instead of "Release date".
Root cause. The title GlFormGroup had no label-for, so it renders as a <fieldset> with a <legend>, which names the group but not the input. On the date field, id="release-released-at" was set on GlDatepicker, which puts it on the wrapper <div> rather than the <input>, and the component's default inputLabel ("Enter date") is bound as the input's aria-label, which wins over any <label for>.
The change. Add label-for="release-title" to the title form group. On the datepicker, replace id with the input-id="release-released-at" prop and pass :input-label="__('Release date')", which reuses an existing string. Because label-for now matches each input's id, GlFormGroup also points aria-describedby at each field's help text (the date field's description used to land on the wrapper div).
Unchanged. The visible form and the submitted values stay the same (the title label moves from <legend> to <label> with the same classes). The other fields already have names: Milestones, Release notes, the tag field, and the asset link fields.
References
Closes https://gitlab.com/gitlab-org/gitlab/-/work_items/627456 Closes https://gitlab.com/gitlab-org/gitlab/-/work_items/627457
- [Critical] 4.1 Compatible (parent epic)
- Pajamas form group guidance
- GlDatepicker
inputIdandinputLabelprops
Screenshots or screen recordings
Not visible by design. Row 1, the whole New release form, and the Edit release form are byte-identical on master and the branch (0 differing pixels), and the Release title label keeps the same box as it moves from legend to label. Rows 2, 4 and 5 are receipts, not UI: the spec read each input's name and description from Chrome's accessibility tree over CDP and ran axe-core inside the page, then drew the values on a card beside crops of the real fields. Clicking the Release title label already focused the input on master (the legend's click handler), so only the date label row differs. axe's label rule passes the master date input because "Enter date" counts as a name; the defect there was the mismatch with the visible label. The link-in-text-block finding (help-text links told apart by color only) is pre-existing, the same on both sides, and out of scope.
How to set up and validate locally
- Visit http://gdk.test:3000/gitlab-org/gitlab-test/-/releases/new as a user with the Developer role or higher (
rootworks). - In Chrome DevTools, open Elements > Accessibility and select the Release title input. Name is "Release title" (before: empty). Description is "Leave blank to use the tag name as the release title."
- Select the release date input. Name is "Release date" (before: "Enter date"), and its id is
release-released-at. - Click the "Release date" label text. Focus moves into the date input (before: nothing happened).
- Optional: run axe DevTools on the page. No "Form elements must have labels" finding for these two inputs.
- Repeat on an existing release's edit page, for example http://gdk.test:3000/gitlab-org/gitlab-test/-/releases/v1.1.0/edit after creating that release.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.









