Problem

WCAG 2.5.3 Label in Name requires that the accessible name of a control contains the visible label text. In WorkflowEditForm, "Edit" and "Delete" links are repeated for every state and transition with no aria-label or visually-hidden text to distinguish them.

Visible text: "Edit" (repeated per state and per transition)

Accessible name: "Edit" (identical for every row)

A speech recognition user who says "Click Edit" will see all matching links highlighted with numbers. They must then say the correct number to select the one they want — for every single action.


Proposed resolution

Add aria-label attributes that include the state or transition label:

For states (around line 117):

$links = [
  'edit' => [
    'title' => $this->t('Edit'),
    'url' => Url::fromRoute('entity.workflow.edit_state_form', [
      'workflow' => $workflow->id(),
      'workflow_state' => $state->id(),
    ]),
    'attributes' => [
      'aria-label' => $this->t('Edit @state', ['@state' => $state->label()]),
    ],
  ],
];

For delete (around line 126):

$links['delete'] = [
  'title' => $this->t('Delete'),
  'url' => Url::fromRoute('entity.workflow.delete_state_form', [
    'workflow' => $workflow->id(),
    'workflow_state' => $state->id(),
  ]),
  'attributes' => [
    'aria-label' => $this->t('Delete @state', ['@state' => $state->label()]),
  ],
];

Apply the same pattern for transitions (around lines 184-197), using the transition label instead.


File

  • core/modules/workflows/src/Form/WorkflowEditForm.php — lines 114-150 (states), lines 183-219 (transitions)

Test

Add a FunctionalJavascript test that:

  1. Creates a workflow with multiple states and transitions
  2. Visits the workflow edit page
  3. Asserts each state's Edit and Delete links have unique aria-labels containing the state label
  4. Asserts each transition's Edit and Delete links have unique aria-labels containing the transition label

Related

AI Disclaimer: This was done with a lot of help from AI.

Comments

mgifford created an issue. See original summary.

mgifford’s picture

mgifford’s picture

Issue summary: View changes