swagger-api / swagger-api/swagger-ui

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

Open
#9,597 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

backlog cat: a11y
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.
image

Additional context or thoughts

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.