swagger-ui icon indicating copy to clipboard operation
swagger-ui copied to clipboard

a11y: Try it Out request body params are not accessible

Open cjfreedman opened this issue 1 year ago • 0 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 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: image

Additional context or thoughts

Here's the Sort Site error and solution image

cjfreedman avatar Feb 13 '24 00:02 cjfreedman