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-logoWhich 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
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | core-3349028-6.patch | 1.67 KB | nod_ |
| #2 | 3349028-2.patch | 736 bytes | duaelfr |
Comments
Comment #2
duaelfrI 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
After
✨ PASSED. 99 total assertions (8.189s)Comment #3
smustgrave commentedWith #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!
Comment #5
smustgrave commentedRandom failure.
Comment #7
nod_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.
Comment #8
nod_D10 patch
Comment #11
nod_Committed 3d73f11 and pushed to 10.0.x. Thanks!
Cherry picked to 9.5.x too.
Comment #12
nod_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.
Comment #13
luenemann