swagger-api / swagger-api/swagger-ui

[Accessibility] WCAG 2.1 2.1.1, 2.4.3, and 2.4.7 && Keyboard Usability

Open
#5,290 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

backlog cat: a11y needs: UX/design input type: enhancement
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: Windows
  • Browser: Chrome
  • Version: 73.0.3683.86
  • Method of installation: npm
  • Swagger-UI version: 3.17.6
  • Swagger/OpenAPI version: latest
Describe the bug you're encountering

Aggregated accessibility bugs related to WCAG 2.1 2.1.1, 2.4.3, and 2.4.7 && Keyboard Usability

  1. Keyboard focus is not visible/indicated for Cancel, Execute, and Clear buttons.
  2. Unable to navigate within "Models" section by keyboard -- Tab navigation skips directly from deleteUser to validator.
  3. Unable to navigate to Example Value/Edit Value or Models links via keyboard -- Tab navigation skips directly from "Try it out" to Parameter content type.
  4. Keyboard focus remains outside of pop-up window (Available authorizations dialog box).
  5. Keyboard focus is not clearly visible on Schemes combo box & Authorize button.
  6. Keyboard focus on Expand/Collapse carrot is not visible.
  7. Keyboard focus is not visible on "Try it out" button.
  8. Keyboard focus is not clearly visible on "Response content type" combo box.
  9. Keyboard focus not visible on "Close" button.
To reproduce...

Steps to reproduce the behavior:

  1. Navigate to https://petstore.swagger.io/#/pet/addPet -> Tab key over to "Try it out" button -> Enter key -> Tab key down to Execute -> Enter key -> Tab key over to Clear -> Enter key
  2. Navigate to https://petstore.swagger.io/#/ -> Tab key through the entire page
  3. Navigate to https://petstore.swagger.io/#/user/createUser -> Tab key to "Try it out" button -> Tab key
  4. Navigate to https://petstore.swagger.io/#/pet -> Tab key to lock icon -> Enter key -> Tab key
  5. Navigate to https://petstore.swagger.io/#/ -> Tab key to Schemes combo box -> Tab key to Authorize button
  6. Navigate to https://petstore.swagger.io/ -> Tab key to pet -> Tab key to http://swagger.io link -> Tab key -> Enter key
  7. Navigate to https://petstore.swagger.io/#/pet/addPet -> Tab key over to "Try it out" button -> Enter key
  8. Navigate to https://petstore.swagger.io/#/pet/addPet -> Tab key down to "Parameter content type" combo box -> Tab key
  9. Navigate to https://petstore.swagger.io/#/ -> Tab key to "Authorize" button -> Enter key -> Tab key down to "Close" button -> Enter key
Expected behavior
  1. Keyboard focus should be clearly visible/indicated for Cancel, Execute, and Clear buttons
  2. Keyboard-only users should be able to access the content within "Models" section
  3. Keyboard-only users should be able to access the clickable links Example Value/Edit Value and Models
  4. Keyboard focus should be logical inside the dialog box -- should only iterate inside the dialog box and should not move out of it until & unless exited.​ Screen reader users will not be able to understand the flow of the focus inside and out of the dialog box.​
  5. Keyboard focus should be clearly visible on Schemes combo box & Authorize button.
  6. Keyboard focus on Expand/Collapse carrot should be visible.
  7. Keyboard focus on "Try it out" button should be visible.
  8. Keyboard focus on "Response content type" combo box should be clearly visible.
  9. Keyboard focus on "Close" button should be visible.
Screenshots

image
2.
image
3.
image
4.
image
5.
image
6.
image
7.
image
8.
image
9.
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 by reproducing the keyboard flows at the listed petstore.io routes in Chrome, including the Models section, Try it out controls, and Available authorizations dialog. Track focus visibility, keyboard reachability, and whether focus remains within the dialog, then verify all nine expected behaviors across the affected UI.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
accessibility, frontend, web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.