A11y: aria-label approach to improve label accessibility, remove hardcoded heading levels

Created on 31 January 2025, 2 months ago

Problem/Motivation

To hit accessibility remediation goals. Buttons are not labelled properly for accessibility. The inserted label markup does not contain any string. H2 headings are hardcoded. AJAX feedback status not communicated.

Steps to reproduce

Create button block, look at source code.

Proposed resolution

Add aria-label attributes, remove label elements, add role="status" to feedback messages, replace h2 elements.

See patch attached.

🐛 Bug report
Status

Active

Version

2.7

Component

Code

Created by

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @briangon
  • First commit to issue fork.
  • 🇦🇹Austria tgoeg

    I added a MR that incorporates your changes (thank you very much for your contribution!) and improves on the way the label is inserted (aria-label), as that seems to be best practice now from what I gathered.
    Additionally, the strings are also configurable now.

    I am unsure how these strings could be made translatable as I am no real dev at all.
    But for the time being, I can at least localize these strings by entering them in the admin config (and I guess they should be configurable anyway, as all other strings are, as well).

    I did not want to delay merging b/c of the translation aspect. Let's get this reviewed/merged first and then probably open another issue for the translation.

    If anyone wants to quickly test this in their composer.json, this is the magic sauce:

    "drupal/admin_feedback": {
        "Improve a11y": "https://git.drupalcode.org/project/admin_feedback/-/merge_requests/10.patch"
    },
Production build 0.71.5 2024