swagger-api / swagger-api/swagger-ui

a11y: Embedded data table of output schema is not accessible

Open
#9,596 1 comment 25 reactions 0 assignees View on GitHub

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
image

Here's the error from Sort Site
image

Additional context or thoughts

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.