Skip to content

New-quadlet modal: the three selects have visible labels that are not associated with them #287

Description

@karoltheguy

Overview

The three selects in the new-quadlet modal each sit next to visible label text, but
none of that text is programmatically associated with its control. The labels carry
no for, and the selects carry no id, so each select's accessible name is empty.

Details

Use Case / Steps:

  1. Open the "New quadlet" modal with a screen reader.
  2. Tab through Target Server, Scope and Quadlet Type.
  3. Each is announced as an unlabelled combobox. The text sitting beside it is not
    read as its name.

Expected vs Actual:

  • Expected: each select is announced with the label already shown on screen.
  • Actual: three anonymous comboboxes, distinguishable only by their options.

Details:

templates/partials/modal_new.html:

  • :6-7 <label class="form-label">Target Server</label> and
    <select name="server_id">
  • :14-15 Scope
  • :21-22 Quadlet Type

The visible text is already correct, so this is an association fix, not a copy
exercise: add an id to each select and a matching for to each label. The Name
field at :30-31 has the same shape and can be fixed in the same pass.

There is a testing consequence too. Because the accessible name is empty,
get_by_role("combobox", name="server_id") cannot reach these controls, and an
unscoped combobox lookup collides with the Shell and "Log time range" selects
elsewhere on the page. tests/e2e/test_podman_e2e.py therefore falls back to
select[name=...] attribute selectors, against the role-based convention set out in
docs/TESTING.md. Fixing the labels lets that test use get_by_role throughout,
but the accessibility gap is the reason to do it and the test cleanup is the side
effect.

Scope:

Fits alongside the Monitor accessibility work in #262.

Found by the podman suite in #284. Write-up in docs/TESTING_TODO.md.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions