Improper use of aria-label in "System Powered By" block

Created on 20 March 2023, about 2 years ago
Updated 17 April 2023, almost 2 years ago

Problem/Motivation

The a11y tests in πŸ“Œ Automated A11y tests in Nightwatch Fixed spotted the following problem

aXe rule: aria-allowed-attr - Elements must only use allowed ARIA attributes
	In element: .drupal-logo

Which I tracked down to core/themes/olivero/templates/block/block--system-powered-by-block.html.twig

 <span class="drupal-logo" aria-label="{{ 'Drupal Logo'|t }}">
      {% include "@olivero/../images/drupal.svg" %}
    </span>

aria-label is used in a non-interactive span, but per MDN

Note: aria-label is intended for use on interactive elements, or elements made to be interactive via other ARIA declarations, when there is no appropriate text visible in the DOM that could be referenced as a label

That span is not interactive. The SVG itself should get the AT description. For reference, Deque has an article on this.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

πŸ› Bug report
Status

Fixed

Version

9.5

Component
OliveroΒ  β†’

Last updated 1 day ago

Created by

πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI

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

Comments & Activities

Production build 0.71.5 2024