Split off from #3223332: Olivero primary search button should be initialized with aria-expanded="false" by JS and similar to #3228140: Remove misleading "toggle" phrase from Olivero's main-menu disclosure button.
From @andrewmacpherson
Meanwhile, another little nitpick with the button. The accessible name is a bit poor: aria-label="Toggle Search Form".
There's no need for the word "Toggle" here, because...
- It isn't needed to convey the open/close behaviour. The mere presence of an
aria-expandedattribute (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. I think we covered this already? Perhaps it was in an issue about the sub-navigation buttons.
Let's improve it here, under the overall scope of WCAG "Name, role, value".
TODO: Remove the word "toggle" from the aria-label - aria-label="Search Form". Then screen readers will typically say "Search Form, button, collapsed". A user will expect a search form to be revealed by pressing the button.
Issue fork drupal-3228145
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
mherchelComment #5
gauravvvv commentedComment #6
mherchelLooks good!
Comment #9
catchCommitted/pushed to 9.3.x and cherry-picked to 9.2.x, thanks!