swagger-api / swagger-api/swagger-ui
a11y: Embedded data table of output schema is not accessible
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
Q&A (please complete the following information)
- OS: [e.g. macOS] Windows 10
- Browser: [e.g. chrome, safari] Chrome
- Version: [e.g. 22] 121
- Method of installation: [e.g. npm, dist assets] npm
- Swagger-UI version: [e.g. 3.10.0] Swagger UI React 5.11.3
- Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0] OpenAPI 3.0
Content & configuration
Basic/ default
Describe the bug you're encountering
We are using a tool called Sort Site to evaluate our site for 508 accessibility compliance. It is flagging the nested table in the output schema: "This page uses nested tables, which do not make sense when read in a screen reader. Add "role=presentation" if the inner table is a layout table; otherwise modify the inner table to present the same data without nesting tables."
Violates WCAG 2.0 A F9 https://www.w3.org/TR/WCAG20-TECHS/F49.html
This is occurring on the "table class=model" embedded in a containing "table class=model".
The inner table also has the error "identify row and column headers in data tables using "th" elements and mark layout tables with "role=pagination."
Violates WCAG 2.0 A F91 https://www.w3.org/TR/WCAG20-TECHS/F91.html
To reproduce...
Expand Schemas, expand an output schema, expand the result which contains an array
Expected behavior
No accessibility error
Screenshots
Here's the screen shot of the element where it is occuring
Here's the error from Sort Site
Additional context or thoughts
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce this in Swagger UI React 5.11.3 with an OpenAPI 3.0 document by expanding Schemas, an output schema, and an array result. Inspect the nested table elements with class=model and their headers; done means the output schema no longer triggers nested-table or missing-header accessibility violations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100