swagger-api / swagger-api/swagger-ui
a11y: DeepLinks have 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
The default operation block for a page.
We are using the default of deepLinking = false
Describe the bug you're encountering
We are using a tool called Sort Site to evaluate our site for 508 accessibility compliance. There are multiple accessibility issues as flagged by the tool Sort Site. I believe the problem is with the DeepLink component in ./src/core/components/deep-link.jsx. The basic problem for us is that the DeepLink is rendering an "a" which doesn't do anything and doesn't process keyboard input. From Sort Site:
- "a" element placeholder link with no event hander or "href" attribute doesn't work on some screen readers
- Clickable controls should have an ARIA role such as "role=button" or "role=link"
- Clickable controls should be keyboard accessible; adding "tablindex=0" will allow keyboard users to tab to the control
These are Level A violations.
To reproduce...
Should be true on any basic API page rendered using SwaggerUI React.
Expected behavior
A link should not be rendered that doesn't do anything and/or is not keyboard accessible. Perhaps change DeepLink so that if href is null, then just render a label instead?
Screenshots
Here's the rendered code showing the that is causing the problem
Additional context or thoughts
This error occurs a LOT. This seems like a simple problem to fix that would have a BIG impact on accessibility.
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 with src/core/components/deep-link.jsx and reproduce the default deepLinking=false behavior on a basic API page in Swagger UI React. Check how the component renders when href is null and review the reported accessibility requirements; done means the non-link state no longer produces an inactive, non-keyboard-accessible anchor.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100