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

a11y: Try It Out input/out should not be embedded in the Responses block

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

Describe the bug you're encountering

When you click Try it out and then click Execute, the curl command, the request URL, and the server response are embedded in the block that documents all command responses. This is non-intuitive and misleading for those using screen readers because what is displayed is not clearly labelled.

To reproduce...

Expand an API, expand a GET or POST command, click Try it out, click Execute. Observe the curl command, request URL, and server response are embedded in the block that documents all server responses.

Expected behavior

Try It Out input and output should be in its own panel beneath the Execute button with its own section header identifying it as the Execute request and response.

Screenshots

Here's the Execute request and response buried in the Responses section. image

Additional context or thoughts

cjfreedman avatar Feb 14 '24 17:02 cjfreedman