Artifact selection checkboxes have no accessible name

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Problem

On the project artifacts page (/<namespace>/<project>/-/artifacts), the artifact selection checkboxes have no accessible name. A screen reader announces them only as "checkbox". The user cannot tell what any of them selects.

This affects the select-all checkbox in the table header and every per-row checkbox.

Evidence

Read from the rendered page with the flag off, as an owner of the project:

<div class="gl-form-checkbox custom-checkbox custom-control gl-min-h-4 gl-w-0">
  <input type="checkbox" title="" data-testid="select-all-artifacts-checkbox"
         id="gitlab_ui_checkbox_32" class="custom-control-input" value="true">
  <label for="gitlab_ui_checkbox_32" class="custom-control-label"> <!----></label>
</div>

For both the header checkbox and the row checkboxes:

  • aria-label is absent.
  • aria-labelledby is absent.
  • title is an empty string.
  • The associated <label> has no text.

The checkbox column defines a Select artifacts header label in app/assets/javascripts/ci/artifacts/components/job_artifacts_table.vue, but the rendered <th> contains only the checkbox. The text does not reach the accessibility tree.

Impact

Keyboard and screen-reader users cannot identify the checkboxes. The row checkboxes are worse than the header one, because each selects a different job and nothing distinguishes them.

There is a second effect. Because the input is opacity: 0; position: absolute; z-index: -1 and its label has zero height, the control has no accessible name and no clickable text. Feature specs cannot select it through normal Capybara interaction, so the bulk delete flow cannot get browser-level test coverage. See #619189.

Proposal

Give each checkbox an accessible name:

  • Header checkbox: something like Select all artifacts.
  • Row checkbox: name it after the job, for example Select artifacts for <job name>.

Once the checkboxes have names, check and uncheck will work in feature specs, and the bulk delete coverage in #619189 becomes possible.

Edited by 🤖 GitLab Bot 🤖