a11y: DeepLinks have accessibility issues

[ghost]

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

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.

[mgifford]

Thanks for flagging this.