Skip to content

fix(a11y): add aria-labels to copy-to-clipboard buttons#10842

Open
yogeshwaran-c wants to merge 1 commit intoswagger-api:masterfrom
yogeshwaran-c:fix/a11y-copy-to-clipboard-button-label
Open

fix(a11y): add aria-labels to copy-to-clipboard buttons#10842
yogeshwaran-c wants to merge 1 commit intoswagger-api:masterfrom
yogeshwaran-c:fix/a11y-copy-to-clipboard-button-label

Conversation

@yogeshwaran-c
Copy link
Copy Markdown

Description

The copy-to-clipboard buttons across the UI used empty <button/> elements with no accessible name, making them invisible to screen readers and failing WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value).

This adds descriptive aria-label attributes to three copy-to-clipboard buttons:

  1. curl.jsx - cURL command copy button: "Copy cURL command to clipboard"
  2. HighlightCode.jsx - Code block copy button: "Copy to clipboard"
  3. request-snippets.jsx - Request snippet copy button: "Copy code snippet to clipboard"

Motivation and Context

Partially addresses #10699

Screen reader users could not identify or interact with these buttons because they had no accessible name. The buttons were rendered as empty <button/> elements inside the react-copy-to-clipboard wrapper.

How Has This Been Tested?

  • Verified the buttons render with the correct aria-label attributes
  • The react-copy-to-clipboard component passes through props to the child element, so aria-label on the button element works correctly

Screenshots (if appropriate):

N/A - accessibility improvement, no visual change

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • are not breaking changes.

Documentation

  • My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

The copy-to-clipboard buttons across the UI used empty <button/>
elements with no accessible label, making them invisible to screen
readers. This adds descriptive aria-label attributes to:

- cURL command copy button in curl.jsx
- Code highlight copy button in HighlightCode.jsx
- Request snippet copy button in request-snippets.jsx

Partially addresses swagger-api#10699
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant