A11y: improve search button accessible names#5641
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Improves accessible names for search button templates in the az_barrio theme by ensuring the Material Symbols icon glyph is hidden from assistive tech and that buttons have a deterministic accessible label.
Changes:
- Adds
aria-hidden="true"to the icon<span>in both search button templates so the literal text "search" isn't read by screen readers. - Adds a deterministic
Searchfallback label, exposed viaaria-labeland a visually-hidden span, on the search block form submit template.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| themes/custom/az_barrio/templates/forms/input--search-block-form--submit.html.twig | Sets aria-label, adds visually-hidden label text, hides icon from AT. |
| themes/custom/az_barrio/templates/forms/input--search-block-button.html.twig | Hides icon glyph from AT while keeping the existing visible value text. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Tugboat has finished building the preview for this pull request! Link: Dashboard: |
| set +e | ||
| composer audit --no-dev --ignore-severity=low --ignore-severity=moderate > composer-audit.log 2>&1 | ||
| composer_audit_status=$? | ||
| cat composer-audit.log | ||
| if [ "$composer_audit_status" -eq 0 ]; then | ||
| exit 0 | ||
| fi | ||
| if [ "$composer_audit_status" -eq 2 ] && grep -q "No security vulnerability advisories found." composer-audit.log; then | ||
| echo "Composer audit reported only abandoned packages; continuing." | ||
| exit 0 | ||
| fi | ||
| exit "$composer_audit_status" |
There was a problem hiding this comment.
We addressed the composer audit issue in a separate PR: #5657 so these changes are causing merge conflicts now.
| set +e | |
| composer audit --no-dev --ignore-severity=low --ignore-severity=moderate > composer-audit.log 2>&1 | |
| composer_audit_status=$? | |
| cat composer-audit.log | |
| if [ "$composer_audit_status" -eq 0 ]; then | |
| exit 0 | |
| fi | |
| if [ "$composer_audit_status" -eq 2 ] && grep -q "No security vulnerability advisories found." composer-audit.log; then | |
| echo "Composer audit reported only abandoned packages; continuing." | |
| exit 0 | |
| fi | |
| exit "$composer_audit_status" | |
| composer audit --no-dev --ignore-severity=low --ignore-severity=moderate --abandoned=report |
joeparsons
left a comment
joeparsons
left a comment
There was a problem hiding this comment.
Overall these look great improvements to me. We'll just want to revert the changes to the composer audit job in the CI workflow before merging.
joeparsons
added
enhancement
| <button{{ attributes }}> | ||
| {{ attributes.value }} | ||
| <span aria-hidden="true" class="material-symbols-rounded">search</span> | ||
| </button>{{ children }} |
There was a problem hiding this comment.
I don't see any change here other than syntax?
There was a problem hiding this comment.
@trackleft It's also adding aria-hidden="true" to the span element.
Summary
Issue type targeted
aria-input-field-name/ button-name style findings for search controls.Changes
themes/custom/az_barrio/templates/forms/input--search-block-form--submit.html.twigSearch).aria-labeland a visually-hidden text label.aria-hidden.themes/custom/az_barrio/templates/forms/input--search-block-button.html.twigaria-hiddenwhile preserving visible text label.Impact