Skip to content

fix(a11y): add aria-label to operations filter input#10865

Open
yogeshwaran-c wants to merge 1 commit into
swagger-api:masterfrom
yogeshwaran-c:fix/filter-input-aria-label
Open

fix(a11y): add aria-label to operations filter input#10865
yogeshwaran-c wants to merge 1 commit into
swagger-api:masterfrom
yogeshwaran-c:fix/filter-input-aria-label

Conversation

@yogeshwaran-c
Copy link
Copy Markdown

Description

The operations filter input (rendered when filter=true) only had a
placeholder attribute. Browsers and assistive technologies do not
expose placeholder as the accessible name of an input — once the user
types, 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 a
stable accessible name regardless of whether a value is present. The
visible placeholder is preserved so sighted-user UX is unchanged.

Motivation and Context

placeholder is 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?

  • New Jest unit test: test/unit/components/filter.jsx asserts the
    rendered input carries aria-label="Filter by tag".
  • New Cypress e2e spec: test/e2e-cypress/e2e/a11y/filter-input.cy.js
    visits a real spec with filter=true and asserts both aria-label
    and the original placeholder are present on the live DOM input.
  • Existing regression spec test/e2e-cypress/e2e/bugs/6276.cy.js
    continues to pass.
PASS test/unit/components/filter.jsx
  <FilterContainer/>
    √ renders FilterContainer if filter is provided
    √ does not render FilterContainer if filter is false
    √ exposes an accessible name on the filter input via aria-label

✔  filter-input.cy.js   2 passing
✔  6276.cy.js           3 passing

Screenshots (if appropriate):

N/A — DOM-only change. The input renders identically; only the
accessibility tree gains a name.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant