a11y: Copy to Clipboard is not accessible

[cjfreedman]

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] OpenAPI 3.0

Content & configuration

For a rendered API, tab into an opblock-summary.

Describe the bug you're encountering

Two problems with the Copy to Clipboard icon that make it inaccessible:

1. It is not visible if you are tabbing through the components; it is only visible if you hover your mouse over the opblock-summary-path
2. It cannot be tabbed to

These are 508 Level A violations.

To reproduce...

Go to a rendered API and tab into a GET or POST block. When tabbing from the method path to the Try It Out button, the copy to clipboard icon never shows up and, even if you move the mouse so it hovers over the path and the copy to clipboard icon is visible, you still can't tab to it to select it.

Expected behavior

Copy to Clipboard icon should always be visible and should always be able to be tabbed into when the associated operation pane is open.

Screenshots

Hard to grab the screen shot, but here it is half-hidden on the right when I hover my mouse over the /arrival/runway field.

Additional context or thoughts