swagger-api / swagger-ui

Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.
https://swagger.io
Apache License 2.0
26.59k stars 8.96k forks source link

a11y: Curl command's copy to clipboard button has accessibility issues #9584

Open ghost opened 9 months ago

ghost commented 9 months ago

Q&A (please complete the following information)

Content & configuration

Basic/ default

Describe the bug you're encountering

We are using a tool called Sort Site to evaluate our site for 508 accessibility compliance. It is flagging for the "copy to clipboard" element that "This "button" element is empty and has no accessible name. A programmatically determined name allows screen readers to tell users what the control does." Violates WCAG 2.0 A 4.1.2 https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html This error is on the button (with no class) which is contained in the div with class "copy-to-clipboard"

To reproduce...

Open the pane for a method such as POST. Click Try It Out. Click Execute. Scroll down to see the Curl command - there is a small Copy to Clipboard icon in the bottom right corner.

Expected behavior

The button should identify itself

Screenshots

Here's the area on the screen image

Here's the Sort Site error detail: image

Additional context or thoughts

mgifford commented 8 months ago

The button definitely needs a semantically defined name.