Problem/Motivation

The a11y tests in #3293469: Automated A11y tests in Nightwatch 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

CommentFileSizeAuthor
#8 core-3349028-6.patch1.67 KBnod_
#2 3349028-2.patch736 bytesduaelfr

Comments

bnjmnm created an issue. See original summary.

duaelfr’s picture

Status: Active » Needs review
StatusFileSize
new736 bytes

I believe that role="img" would allow that span to carry the label and avoid having to set it on the SVG that could be used in another context and would need another alt text.

Used command

yarn test:nightwatch --tag a11y:default --defaultTheme olivero
(I removed the 'aria-allowed-attr': { enabled: false } rule for the Homepage test)

Before

 ️ TEST FAILURE (7.952s):  
   - 1 assertions failed; 96 passed

   ✖ 1) Tests/a11yTestDefault

   – Accessibility - Default Theme: Homepage (909ms)

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

After

✨ PASSED. 99 total assertions (8.189s)

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs Review Queue Initiative

With #3293469: Automated A11y tests in Nightwatch applied I confirmed the issue being reported (commented out the bypass)

Applied the patch here in #2 and it fixed the issue.

If #3293469: Automated A11y tests in Nightwatch lands first this should be updated to include removing those bypasses.

The race is on!

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 2: 3349028-2.patch, failed testing. View results

smustgrave’s picture

Status: Needs work » Reviewed & tested by the community

Random failure.

  • nod_ committed 93f9149c on 10.1.x
    Issue #3349028 by DuaelFr, smustgrave, bnjmnm: Improper use of aria-...
nod_’s picture

Title: Improper use of aria-label in "System Powered By" block. » Improper use of aria-label in "System Powered By" block

Committed 93f9149 and pushed to 10.1.x. Thanks!

Working on the backport to 9.5 and 10.0 since there is a conflict because of #3226047: Olivero: Remove svg from block--system-powered-by-block.html.twig file. Since this is an accessibility issue, I want to make sure we backport this one.

nod_’s picture

Version: 10.1.x-dev » 10.0.x-dev
StatusFileSize
new1.67 KB

D10 patch

  • nod_ committed 3d73f11e on 10.0.x
    Issue #3349028 by nod_, DuaelFr, smustgrave, bnjmnm: Improper use of...

  • nod_ committed c5da01d3 on 9.5.x
    Issue #3349028 by nod_, DuaelFr, smustgrave, bnjmnm: Improper use of...
nod_’s picture

Status: Reviewed & tested by the community » Fixed

Committed 3d73f11 and pushed to 10.0.x. Thanks!

Cherry picked to 9.5.x too.

nod_’s picture

CI says "failed to apply" because The commit was pushed before the testbot started running so it tried to apply the patch on the "already fixed" version of the code.

luenemann’s picture

Version: 10.0.x-dev » 9.5.x-dev

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.