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:
Calvin Gonzalez
2021-09-17 02:19:55 -04:00
committed by GitHub
parent 00d5b30aa7
commit 8ffb1aef97
3 changed files with 112 additions and 34 deletions

View 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")
})
})
})

View File

@@ -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")
})
})