Daily Accessibility ReviewForm Inputs Missing Accessible Labels in Ports Components

[github-actions[bot]]

Problem

Multiple <input> and <select> form controls in table-like layouts lack programmatically associated labels. The column headers are rendered as plain text in sibling elements — not as <label> elements or via aria-label/aria-labelledby — so screen readers cannot announce the purpose of each field.

Affected Files

shell/components/form/Ports.vue (lines 158–207)

The table uses <th> header cells ("Listening Port", "Protocol", "Target Port", "Exposed", "Host Port"), but the <input> and <select> elements inside <td> cells have no aria-label or id/<label for> association:

<td class="port">
  <input
    v-model.number="row.port"
    type="number"
    placeholder="e.g. 8080"
    `@input`="queueUpdate"
  >   <!-- No aria-label or associated <label> -->
</td>
<td class="protocol">
  <select v-model="row.protocol" `@input`="queueUpdate">
    <!-- No aria-label -->
    ...
  </select>
</td>

shell/components/form/ServicePorts.vue (lines 185–241)

This component uses <div> elements for column headers (not <th>) and plain <input> elements without any label association:

<input
  v-model.number="row.name"
  type="text"
  :placeholder="t('servicePorts.rules.name.placeholder')"
  `@input`="queueUpdate"
>  <!-- No aria-label, no associated <label> -->

All four fields (Name, Listening Port, Target Port, Node Port) are missing accessible labels.

WCAG 2.2 References

WCAG 2.2 § 1.3.1 – Info and Relationships (Level A)

Information, structure, and relationships conveyed through presentation can be programmatically determined.

Column header context conveyed visually via layout but not programmatically linked to inputs.

WCAG 2.2 § 4.1.2 – Name, Role, Value (Level A)

For all user interface components, the name and role can be programmatically determined.

Form inputs without accessible names violate this criterion.

WCAG 2.2 § 1.3.5 – Identify Input Purpose (Level AA)

The purpose of each input field can be programmatically determined.

Suggested Fix

Add aria-label attributes to each input, incorporating the row index for uniqueness:

<!-- Ports.vue -->
<input
  v-model.number="row.port"
  type="number"
  :aria-label="`${t('port.listeningPort')} ${idx + 1}`"
  placeholder="e.g. 8080"
  `@input`="queueUpdate"
>
<select
  v-model="row.protocol"
  :aria-label="`${t('port.protocol')} ${idx + 1}`"
  `@input`="queueUpdate"
>

<!-- ServicePorts.vue -->
<input
  v-model.number="row.name"
  type="text"
  :aria-label="`${t('servicePorts.rules.name.label')} ${idx + 1}`"
  :placeholder="t('servicePorts.rules.name.placeholder')"
  `@input`="queueUpdate"
>

Generated by Daily Accessibility Review · ● 1.6M · ◷

• expires on Jun 1, 2026, 8:48 AM UTC