swagger-api / swagger-api/swagger-ui

a11y: Method pane header has accessibility issues

Open
#9,576 0 comments 24 reactions 0 assignees View on GitHub

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] Open API 3.0
Content & configuration

Basic default configuration

Describe the bug you're encountering

We use a tool called Sort Site to evaluate our site for 508 accessibility compliance. The tool is reporting the collapsible pane for a method, e.g. a POST method, is not accessible:
"An element with a role that hides child elements contains focusable child elements. This "role" element marks child elements as presentational, which hides them from the accessibility tree, but some of these children are focusable, so they can be navigated to, but are not voiced in a screen reader." See https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
The bug is occurring on the button with class "opblock-summary-control" which is contained within the dev with class "opblock-summary opblock-summary-post"

To reproduce...

Happens on any method pane for an API

Expected behavior

No accessibility error

Screenshots

Here's just one of the offending elements
image

Additional context or thoughts

Here's the Sort Site error which shows the classes of the elements causing the problem
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

Start at the method pane elements identified by the .opblock-summary-control and .opblock-summary classes, then reproduce the issue with a POST or other method pane in the default configuration. Use the Sort Site accessibility report and the WCAG name-role-value guidance to verify the change; done means the reported accessibility error is no longer present.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.