swagger-ui a11y: Request body and Responses Schema tables have accessibility issues when not displayed

a11y: Request body and Responses Schema tables have accessibility issues when not displayed

Open ghost opened this issue 4 months ago • 1 comments

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 configuration

Describe the bug you're encountering

We use a tool named Sort Site to evaluate our site for 508 compliance. It is reporting that the Schema table has accessibility issues when it is not displayed. The error is "The "aria-controls" attribute must point to IDs of elements in the same document. These IDs weren't found: 3+8r7QM=." Violates WCAG 2.0 A 1.3.1 https://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-programmatic This is happening on the button with name "Schema" with class "tablinks"

To reproduce...

Click to expand a method pane like a POST. In the required body, have the "Example" tab selected. This is also true down in the Responses section.

Note that the same problem would occur for the example table when the Schemas tab is selected.

Expected behavior

No accessibility issues

I think it would be useful to be able to see both the schema and the example value at the same time. I would replace this tab, which is an either/or situation, with buttons that show/hide the example pane and the schema pane.

Screenshots

Here's the area of the page

Additional context or thoughts

As stated above, I think it would be useful to be able to see both the schema and the example value at the same time. I would replace this tab, which is an either/or situation, with buttons that show/hide the example pane and the schema pane.

Here's the Sort Site errors