Problem/Motivation
The main menu in Olivero (with a narrow viewport) has a disclosure button called "Toggle Main Menu".
The word "toggle" isn't warranted here because:
It isn't needed to convey the open/close behaviour. The mere presence of an aria-expanded attribute (whether true or false) is sufficient to convey the behaviour. A screen reader will say "button, collapsed" or "button, expanded" which conveys that it is expand/collapse-ible.
"Toggle" can actually be misleading, because "Toggle button" is how some screen readers (in the English locale, at least) announce <button aria-pressed="true|false">. Using "toggle" as part of the name for a disclosure button may be sending mixed message about how it behaves: is it an on/off button, or an open/close button?
Steps to reproduce
Use the Olivero theme, with a narrow viewport.
The code for the main-menu disclosure button is:
<button class="mobile-nav-button"
data-drupal-selector="mobile-nav-button"
aria-label="Toggle Main Menu"
aria-controls="header-nav"
aria-expanded="false">
<span class="mobile-nav-button__label">Menu</span>
<span class="mobile-nav-button__icon"></span>
</button>
Proposed resolution
Remove the word "Toggle" from the accessible name (i.e. so it says aria-label="Main Menu"). Screen readers will then say "Main Menu, button, collapsed".
Remaining tasks
User interface changes
Improve accessible name. No visible changes.
API changes
None.
Data model changes
None.
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | after_patch.png | 611.64 KB | kiran.kadam911 |
| #4 | before_patch.png | 586.06 KB | kiran.kadam911 |
| #3 | 3228140-3.patch | 979 bytes | gauravvvv |
Comments
Comment #2
andrewmacpherson commentedA good novice or first-time contribution. Find where the aria-label is being set (JS, or template...) and delete a word.
Comment #3
gauravvvv commentedPatch attached. Remove word toggle from aria-label.
Comment #4
kiran.kadam911Patch applied successfully nothing major to check hence moving this to RTBC.
Before patch:
After patch:
Thanks!
Comment #6
catchCommitted 98070c8 and pushed to 9.3.x. Thanks!
Comment #7
andrewmacpherson commentedPerfect, thanks. I spotted it had been committed when I was testing something else in Olivero.