Accessibility: The search form in the overlay is named "Menu"

Open Beginner friendly
#229 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 3 days

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
Under an hour
Newbie friendliness
84/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
php, wordpress

Research direction

Read patterns/overlay-contents.php at the linked line and compare its Search block label with the other search forms named in the issue. Update the overlay search form’s accessible name to describe what it searches, then check the browser accessibility tree with the Navigation Overlay using the Overlay Contents pattern; the search form should have a distinct, descriptive name.

Written by the indexing model from the issue text.

Description

[Type] Bug
What happened?

The Overlay Contents pattern sets the Search block's ariaLabel to Menu:

When the overlay is open, the search form is named "Menu", which is also the name of the surrounding dialog and the heading above the navigation:

- dialog "Menu":
  - heading "Menu"
  - navigation "Primary"
  - search "Menu":

"Menu" says where the form is, not what it searches. A screen reader user hears "Menu" for three different things.

The other search forms in the theme are named for what they search: Site in hidden-search.php, hidden-404.php and hidden-search-bar.php, and Posts in cta-search.php.

Related: #221 which fixed the navigation in the overlay being named "Expanded".

Where does it happen?

On the site (front end)

Steps to reproduce
  1. In the Site Editor, go to Patterns, then Template Parts, then Navigation Overlay, and replace it with the Overlay Contents pattern.
  2. Open the site at phone width.
  3. Open the navigation menu.
  4. Check the search form in the browser's accessibility tree.
  5. See that it is named "Menu".
Screenshots or screen recording
image
WordPress version

7.2-beta4-65272

PHP version

8.3

Ipsum version

git clone at commit fdfda0a

Gutenberg plugin version

24.3.1

Browser and device

No response

Before you submit
  • I searched the existing issues and this bug hasn't been reported yet.
Dominant language
PHP
Stars
67
Forks
41
Avg merge
4d 16h
Merged PRs (30d)
35

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from WordPress/ipsum

All issues in WordPress/ipsum

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.