General: Use the semantic <search> element in core search markup#11913
General: Use the semantic <search> element in core search markup#11913adamsilverstein wants to merge 3 commits into
Conversation
Wrap the form output of `get_search_form()` (html5 format) and the `core/search` block in the HTML `<search>` landmark element, and drop the now-redundant `role="search"` attribute on the inner `<form>`. The `<search>` element is in Baseline and has an implicit ARIA landmark role of `search`, providing the same semantics as the existing `role="search"` attribute via native markup. The XHTML fallback in `get_search_form()` is left unchanged because XHTML 1.x does not include the `<search>` element. For `get_search_form()`, the optional `aria_label` argument is now applied to the `<search>` landmark element instead of the `<form>`, since the landmark is what assistive technology exposes. Props to all who will help review and refine this change.
…rms. Update the `searchform.php` template in Twenty Sixteen, Twenty Seventeen, Twenty Twenty, and Twenty Twenty-One to wrap the form in the HTML `<search>` landmark element, dropping the redundant `role="search"` attribute on `<form>`. For Twenty Twenty and Twenty Twenty-One, the existing `aria_label` support is moved onto the new `<search>` element so it labels the landmark. Block themes (Twenty Twenty-Two and later) inherit their search markup from the `core/search` block and need no theme-level change.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
The `src/wp-includes/blocks/*.php` render files are generated from the Gutenberg build via tools/gutenberg/copy.js, so editing search.php directly here is reverted by the build and fails the `git diff --exit-code` CI check. The `<search>` element change for the core/search block is handled in the Gutenberg repository instead, and will flow into Core through the next block package sync. This PR now covers only the Core-maintained `get_search_form()` function and the bundled classic theme `searchform.php` templates.
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
|
I'd be concerned about breaking sites using CSS selectors like Themes using the |
Trac Ticket MissingThis pull request is missing a link to a Trac ticket. For a contribution to be considered, there must be a corresponding ticket in Trac. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description. More information about contributing to WordPress on GitHub can be found in the Core Handbook. |
2 participants
Summary
Adopt the new HTML
<search>landmark element in the Core-maintained search markup, replacing the manualrole="search"attribute with native semantics.The
<search>element is in Baseline (Chrome 118+, Firefox 118+, Safari 17+, Edge 118+) and carries an implicit ARIA role ofsearch, providing the same landmark semantics WordPress currently expresses viarole="search"on the<form>.Scope of this PR
This PR covers only the files maintained directly in Core:
get_search_form()(wp-includes/general-template.php, html5 format): wrap the rendered<form>in<search>, droprole="search", and move thearia_labelarg onto the<search>landmark. Thexhtmlfallback is unchanged (XHTML 1.x has no<search>element).searchform.phpin Twenty Sixteen, Twenty Seventeen, Twenty Twenty, and Twenty Twenty-One. Twenty Twenty / Twenty Twenty-One move their existingaria-labelonto<search>.The
core/searchblock is handled in Gutenbergsrc/wp-includes/blocks/*.phprender files are generated from the Gutenberg build (tools/gutenberg/copy.js), so they cannot be edited directly here — the build reverts the change and thegit diff --exit-codeCI check fails. The equivalent<search>change for thecore/searchblock is made upstream in:It will flow into Core via the next block package sync. Block themes (Twenty Twenty-Two and later) get the update through that block.
Why drop
role="search"on the<form>?Keeping it would produce nested
searchlandmarks (one from<search>, one fromrole="search"), which assistive technology may announce twice or report as a structural error. The HTML spec's intent is that<search>replaces the manual role.Backward compatibility
<form>, itsclass="search-form", and all input markup are unchanged. Theme CSS targetingform.search-formcontinues to work.<search>treat it as a generic inline container with no landmark role; forms still function, mirroring the current state whenrole="search"is unsupported.searchform.phpare unaffected; this only touches Core defaults and bundled classic themes.get_search_formandsearch_form_formatfilters continue to operate on the final HTML.Test plan
composer test(PHPUnit) passes.get_search_form()output wraps the form in<search>with norole="search";aria_labellands on<search>.xhtmlformat (themes withouthtml5search-formsupport) is unchanged.References