swagger-api / swagger-api/swagger-ui

a11y: DeepLinks have accessibility issues

Open
#9,569 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] 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
image

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.