fix(a11n): provide proper a11n for response example tabs (#7464)
- Update tabs to use <button> elements instead of <a> - Add aria roles for tablist, tabs, and tabpanel - Add aria attributes for additional a11y compliance and screen reader accessibility - Replace ids with data-name attribute for tabpanels - Add cypress test 7463 and update swos-63 - Move tabs test file to tests/a11y directory - Rename test file to be more descriptive of what is being tested. - Add id attributes to both tabs and tabpanels to leverage aria-controls and aria-labelledby attributes Co-authored-by: Calvin Gonzalez <calvin.gonzalez@oddball.io> Co-authored-by: Vladimir Gorej <vladimir.gorej@gmail.com> Closes #7463 Refs #7350
This commit is contained in:
35
test/e2e-cypress/tests/a11y/response-tabs.js
Normal file
35
test/e2e-cypress/tests/a11y/response-tabs.js
Normal file
@@ -0,0 +1,35 @@
|
||||
describe("Response tab elements", () => {
|
||||
describe("ModelExample within Operation", () => {
|
||||
it("should render Example tabpanel by default", () => {
|
||||
cy
|
||||
.visit("/?url=/documents/petstore-expanded.openapi.yaml")
|
||||
.get("#operations-default-addPet")
|
||||
.click()
|
||||
.get("div[data-name=examplePanel]")
|
||||
.first()
|
||||
.should("have.attr", "aria-hidden", "false")
|
||||
})
|
||||
it("should click Schema tab button and render Schema tabpanel for OpenAPI 3", () => {
|
||||
cy
|
||||
.visit("/?url=/documents/petstore-expanded.openapi.yaml")
|
||||
.get("#operations-default-addPet")
|
||||
.click()
|
||||
.get("button.tablinks[data-name=model]")
|
||||
.first()
|
||||
.click()
|
||||
.get("div[data-name=modelPanel]")
|
||||
.first()
|
||||
.should("have.attr", "aria-hidden", "false")
|
||||
})
|
||||
it("should click Model tab button and render Model tabpanel for OpenAPI 2", () => {
|
||||
cy
|
||||
.visit("/?url=/documents/petstore.swagger.yaml")
|
||||
.get("#operations-pet-addPet")
|
||||
.click()
|
||||
.get("button.tablinks[data-name=model]")
|
||||
.click()
|
||||
.get("div[data-name=modelPanel]")
|
||||
.should("have.attr", "aria-hidden", "false")
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -19,7 +19,7 @@ describe("SWOS-63: Schema/Model labeling", () => {
|
||||
.visit("/?url=/documents/petstore-expanded.openapi.yaml")
|
||||
.get("#operations-default-findPets")
|
||||
.click()
|
||||
.get("a.tablinks[data-name=model]")
|
||||
.get("button.tablinks[data-name=model]")
|
||||
.contains("Schema")
|
||||
})
|
||||
it("should render `Models` for OpenAPI 2", () => {
|
||||
@@ -28,7 +28,7 @@ describe("SWOS-63: Schema/Model labeling", () => {
|
||||
.get("section.models > h4")
|
||||
.get("#operations-pet-addPet")
|
||||
.click()
|
||||
.get("a.tablinks[data-name=model]")
|
||||
.get("button.tablinks[data-name=model]")
|
||||
.contains("Model")
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user