swagger-api / swagger-api/swagger-ui
a11y: "required" tag next to Request Body is not accessible
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 usage, no special configuration
Describe the bug you're encountering
We use Sort Site tool to evaluate our site for accessibility. It is flagging that the "required" tag next to the Request Body is not accessible: "Content inserted with CSS is not available to people who turn off style sheets or use custom styles. Move the content from CSS to the HTML page so that all users can see it". Violates WCAG 2.0 A F87 https://www.w3.org/TR/WCAG20-TECHS/F87.html
This is happening in an h4 with classes "opblock-title parameter__name required"
In addition, this "required" tag is too small a font and the red is not dark enough to provide enough color contrast, both of which make it hard to read for those with visibility issues.
To reproduce...
Click to expand a method pane, e.g. a POST method, with a request body. Next to "Request body" is a very small "required" label.
Expected behavior
The "required" tag should be easily visible
Screenshots
Additional context or thoughts
Here's the Sort Site output with the error:
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 by expanding a POST method with a request body, then inspect the h4 with classes "opblock-title parameter__name required" and how its label is added. Done means the required label remains available without CSS, is readable at an adequate size and contrast, and no longer triggers the reported accessibility finding.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100