Links must not be embedded in buttons reference:#9570

Content & configuration

Swagger/OpenAPI definition:

# your YAML here

Swagger-UI configuration options:

SwaggerUI({
  // your config options here

url: "http://localhost:3000/openapi.json",  // Example OpenAPI spec URL
 dom_id: '#swagger-ui',
 deepLinking: true,
 presets: [
   SwaggerUI.presets.apis,
   SwaggerUI.SwaggerUIStandalonePreset
 ],
 plugins: [
   SwaggerUI.plugins.DownloadUrl
 ],
 layout: "StandaloneLayout"

})

?yourQueryStringConfig

Is your feature request related to a problem?

I am just feeling annoyed when links are embedded inside buttons in Swagger UI. This goes against HTML accessibility best practices and may cause confusion for users relying on assistive technologies (such as screen readers). Buttons should be used for actions while links should be used for navigation.

Describe the solution you'd like

I would like to see anchor () tags separated from buttons () in the Swagger UI codebase. This would align with best practices in HTML and improve accessibility. Buttons should trigger actions, while links should handle navigation. It would be great if Swagger UI could refactor its implementation to ensure anchor tags and buttons are not nested

Describe alternatives you've considered

An alternative solution could be to allow a configuration flag in Swagger UI settings to control the behavior of buttons and links. However, separating them semantically in the HTML structure seems like the best solution for improving accessibility and keeping the code clean.

Additional context

The issue can be observed in various parts of Swagger UI whether for POST, GET, PUT and DELETE, button or other action buttons that wrap anchor tags Inspecting these elements in the browser's developer tools shows that buttons contain anchor tags inside them, which is not recommended.

The issue does not identify specific files or tests. Reproduce the nested anchor-and-button markup in the POST, GET, PUT, and DELETE UI areas using the supplied Swagger UI configuration, then trace the affected components. Done means navigation uses anchors separately from action buttons and the resulting markup no longer nests them.