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

[KimPlausible]

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

2.

3.

4.

5.

6.

7.

8.

9.

[KimPlausible]

Pri 0 (Blocking, high impact): 2, 3, 4
Pri 2 (Not blocking, high impact): 1, 5, 7, 8, 9
Pri 3 (Not blocking, low impact): 6

[msftedad]

Hi @KimPlausible, is there any update on this bug, and could you please provide a tentative ETA for fixing it?

[msftedad]

Hi @ponelat, is there any update on this bug and could you please provide a tentative ETA for fixing it.

[msftedad]

Hi @maggiewachs, this issue is still repro'ing in the latest version of Swagger UI(5.20.1). Could you please confirm if the timeline for fixing it has been finalized? Thanks

CC: @ponelat