swagger-api / swagger-api/swagger-ui

a11y: "required" tag next to Request Body is not accessible

Open
#9,572 1 comment 24 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 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

image

Additional context or thoughts

Here's the Sort Site output with the error:
image

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.