Bug/Response Tabs not keyboard navigable

[Cgfor3]

Q&A (please complete the following information)

• OS: macOS 11.5 Big Sur
• Browser: Chrome
• Version: 92.0.4515.131
• Method of installation: npm
• Swagger-UI version: 3.52.0
• Swagger/OpenAPI version: OpenAPI 3.0

Describe the bug you're encountering

The tabs implementation for Example Value and Schema/Model is not keyboard navigable.

To reproduce...

Steps to reproduce the behavior:

1. Navigate to https://petstore.swagger.io/
2. Select the endpoint labeled "Add a new pet to the store" under the "Pet" API.
3. Press Tab 4 times to move through the elements in order
4. On the fourth Tab press you will notice that the focused elements skip from the Try it out button to the Parameter content type dropdown, skipping the entire tabs section.

Expected behavior

The fourth tab press should focus on the element labeled Example Value. The next Tab press should focus the element labeled Schema/Model. Pressing Enter or Space should focus the unselected tab and update the visible tabpanel accordingly.

Screenshots

Tab focus to Example Value

Tab focus to Model

Tab focus to Tabpanel section

Additional context or thoughts

Aria roles and other attributes will be necessary to accommodate screen reader a11y.

[char0n]

This is probably already detected in #7350

It has been agreed in #7350 that the original reporters will start working on small PRs fixing keyword navigation issues related to a11y. You can help us a well if you wish.

[Cgfor3]

@char0n I will be putting up a PR soon that addresses this issue. I would appreciate any and all feedback. Should I link the PR on the issue you mentioned as well for visibility?

[char0n]

I would appreciate any and all feedback

Of course, that's what we're here for ;]

Should I link the PR on the issue you mentioned as well for visibility?

Sure, the more cross-referenced we are the better.