swagger-ui
swagger-ui copied to clipboard
a11y: Try it Out request body params are not accessible
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 are using Sort Site to evaluate our site for accessibility. When we expand a POST method pane and click Try it out, Sort Site flags this error: "HTML form control has no accessible name. A label (or name) linked to the control allows screen readers to voice the label correctly when reading the control. To add a label do one of the following:
- use a "label" element with the "for" attribute set to the ID of the form control
- wrap a "label" element around the form control
- add a "title" attribute
- add an "aria-label" attribute
- add an "aria-labelledby" attribute.
Violates WCAG 2.0 A F68 https://www.w3.org/TR/WCAG20-TECHS/F68.html
To reproduce...
Click to expand a POST call then click Try it out. This is in the user-entry "request boy" section, in textarea with class "body-param__text" contained in div "body-param"
Expected behavior
No accessibility error :)
Screenshots
Here's our content:
Additional context or thoughts
Here's the Sort Site error and solution