fix(a11y): add aria-label to operations filter input#10865
Open
yogeshwaran-c wants to merge 1 commit into
Open
fix(a11y): add aria-label to operations filter input#10865yogeshwaran-c wants to merge 1 commit into
yogeshwaran-c wants to merge 1 commit into
Conversation
The filter-by-tag input in the operations panel only had a placeholder attribute, which is not exposed as an accessible name to assistive technologies. Screen readers announced the input as an unlabeled text field, failing WCAG 4.1.2 (Name, Role, Value) and 1.3.1 (Info and Relationships). Add an aria-label="Filter by tag" matching the existing placeholder so the input has a stable accessible name regardless of whether a value is present. The placeholder is preserved for sighted users. Covered by a Jest unit test on FilterContainer and a Cypress e2e spec under test/e2e-cypress/e2e/a11y/filter-input.cy.js.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The operations filter input (rendered when
filter=true) only had aplaceholderattribute. Browsers and assistive technologies do notexpose
placeholderas the accessible name of an input — once the usertypes, the placeholder disappears entirely, and screen readers announce
the field as an unlabeled text box. This violates WCAG 2.1 success
criteria 4.1.2 (Name, Role, Value) and 1.3.1 (Info and Relationships).
This PR adds
aria-label="Filter by tag"to the input so it has astable accessible name regardless of whether a value is present. The
visible placeholder is preserved so sighted-user UX is unchanged.
Motivation and Context
placeholderis widely flagged by automated and manual a11y audits(axe, WAVE, Lighthouse) as not satisfying the "accessible name"
requirement. Inputs without an accessible name are a long-standing pain
point for users of screen readers and voice-control software.
How Has This Been Tested?
test/unit/components/filter.jsxasserts therendered input carries
aria-label="Filter by tag".test/e2e-cypress/e2e/a11y/filter-input.cy.jsvisits a real spec with
filter=trueand asserts botharia-labeland the original
placeholderare present on the live DOM input.test/e2e-cypress/e2e/bugs/6276.cy.jscontinues to pass.
Screenshots (if appropriate):
N/A — DOM-only change. The input renders identically; only the
accessibility tree gains a name.
Types of changes
Checklist: