swagger-api / swagger-api/swagger-ui
a11y: Try It Out input/out should not be embedded in the Responses block
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
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.
Additional context or thoughts
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue in the default Swagger UI using an OpenAPI 3.0 GET or POST operation, then trace the Try it Out and Execute response rendering in the frontend. Done means the curl command, request URL, and server response appear beneath Execute in a separately headed panel that is clearly identified to screen-reader users.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100