swagger-api / swagger-api/swagger-ui
a11y: Method pane header has accessibility issues
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
Additional context or thoughts
Here's the Sort Site error which shows the classes of the elements causing the problem
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
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