swagger-api / swagger-api/swagger-ui

Keyboard Focus is moving away from available authorization dialog without closing it while navigating using tab key in Windows.

Open
#10,321 1 comment 0 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: Windows 11 24H2
Browser: Edge, chrome
Version: 133.0.3065.82 (Official build) (64-bit)
Method of installation: dist
Swagger-UI version: 5.17.14
Swagger/OpenAPI version: 3.0

Content & configuration

Example Swagger/OpenAPI definition:

# your YAML here

Swagger-UI configuration options:

SwaggerUI({
  // your config options here
})
?yourQueryStringConfig
Describe the bug you're encountering

Keyboard Focus is moving away from available authorization dialog without closing it while navigating using tab key in Windows. This bug affects users who rely on keyboard navigation, especially individuals with motor impairments or visual disabilities, by causing the focus to shift away from the authorization dialog without closing it. This issue makes it challenging for users to interact with the dialog, potentially leading to frustration, errors, or an inability to complete tasks.

To reproduce...

Steps to reproduce the behavior:

  1. Open the URL: Swagger UI (codepen.io) in the latest Edge browser in Windows.
  2. Swagger Pet store - Opena API 3.0 screen will open.
  3. Press tab key to move to 'Authorize' button and press enter to activate it. 'Available Authorization' dialog will appear.
  4. Press tab key to move to the 'close button' inside the dialog.
  5. Verify on pressing tab key whether focus is moving out of the 'Available Authorization' dialog or not.
Expected behavior

Using tab key, Keyboard Focus shouldn't move away from available authorization dialog without closing the dialog in windows. Focus should stay within the available authorization dialog until user closes the dialog.

https://github.com/user-attachments/assets/4b59920c-4b1b-4196-8764-08678b0aa7e5
Image

Screenshots
Additional context or thoughts

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

Reproduce the issue using the linked CodePen in Windows with Edge or Chrome, then trace the authorization dialog's keyboard-focus handling. Done means Tab keeps focus within the available authorization dialog until the user closes it, with the behavior verified against the reported steps.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.