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

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

Issue tags: +Novice

A good novice or first-time contribution. Find where the aria-label is being set (JS, or template...) and delete a word.

gauravvvv’s picture

Status: Active » Needs review
StatusFileSize
new979 bytes

Patch attached. Remove word toggle from aria-label.

kiran.kadam911’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new586.06 KB
new611.64 KB

Patch applied successfully nothing major to check hence moving this to RTBC.

Before patch:

After patch:

Thanks!

  • catch committed 98070c8 on 9.3.x
    Issue #3228140 by Gauravmahlawat, kiran.kadam911, andrewmacpherson:...
catch’s picture

Status: Reviewed & tested by the community » Fixed

Committed 98070c8 and pushed to 9.3.x. Thanks!

andrewmacpherson’s picture

Perfect, thanks. I spotted it had been committed when I was testing something else in Olivero.

Status: Fixed » Closed (fixed)

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