diff --git a/src/core/containers/filter.jsx b/src/core/containers/filter.jsx index 440b1ac4ad9..2a2d4980fce 100644 --- a/src/core/containers/filter.jsx +++ b/src/core/containers/filter.jsx @@ -32,7 +32,7 @@ export default class FilterContainer extends React.Component { {filter === false ? null :
- diff --git a/test/e2e-cypress/e2e/a11y/filter-input.cy.js b/test/e2e-cypress/e2e/a11y/filter-input.cy.js new file mode 100644 index 00000000000..a2c222b6f18 --- /dev/null +++ b/test/e2e-cypress/e2e/a11y/filter-input.cy.js @@ -0,0 +1,17 @@ +describe("Filter input accessibility", () => { + describe("with filter enabled", () => { + it("should expose an accessible name via aria-label on the filter input", () => { + cy.visit("/?url=/documents/petstore.swagger.yaml&filter=true") + .get(".operation-filter-input") + .should("exist") + .should("have.attr", "aria-label", "Filter by tag") + }) + + it("should still render the visual placeholder for sighted users", () => { + cy.visit("/?url=/documents/petstore.swagger.yaml&filter=true") + .get(".operation-filter-input") + .should("exist") + .should("have.attr", "placeholder", "Filter by tag") + }) + }) +}) diff --git a/test/unit/components/filter.jsx b/test/unit/components/filter.jsx index caa85f0f4a7..b36999efdf7 100644 --- a/test/unit/components/filter.jsx +++ b/test/unit/components/filter.jsx @@ -44,4 +44,20 @@ describe("", function(){ const renderedColInsideFilter = wrapper.find(Col) expect(renderedColInsideFilter.length).toEqual(0) }) + + it("exposes an accessible name on the filter input via aria-label", function(){ + + // Given + let props = {...mockedProps} + props.layoutSelectors = {...mockedProps.specSelectors} + props.layoutSelectors.currentFilter = function() {return true} + + // When + let wrapper = mount() + + // Then + const input = wrapper.find("input.operation-filter-input") + expect(input.length).toEqual(1) + expect(input.prop("aria-label")).toEqual("Filter by tag") + }) })