Status report counter "Details" link has hidden text before visible

Problem

WCAG 2.5.3 Label in Name requires that the accessible name of a control contains the visible label text. The status report counter "Details" links have visually-hidden severity text that precedes the visible "Details" text.

Visible text: "Details"

Accessible name: "Error Details" or "Critical Details" (severity text before "Details")

A speech recognition user who says "Click Details" may not match because the accessible name starts with the severity text, not "Details".

Proposed resolution

Move the severity text after the visible "Details" text:

<a href="#{{ severity }}">{{ 'Details'|t }}<span class="visually-hidden"> about {{ text }}</span></a>

This applies to both:

• core/modules/system/templates/status-report-counter.html.twig — line 16
• core/themes/default_admin/templates/system/status-report-counter.html.twig — line 25
• core/themes/claro/templates/status-report-counter.html.twig (if exists, same pattern)

Test

Add a FunctionalJavascript test that:

1. Visits the status report page
2. Asserts each "Details" link's accessible name starts with the visible text "Details"

Related

• Meta: Assess Drupal core for WCAG 2.5.3 Label in Name
• WCAG 2.5.3 Label in Name

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