Skip to content

Commit 977c409

Browse files
committed
fix(a11y): add aria-labels to copy-to-clipboard buttons
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 #10699
1 parent 34d6186 commit 977c409

3 files changed

Lines changed: 3 additions & 3 deletions

File tree

src/core/components/curl.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export default class Curl extends React.Component {
1818
<div className="curl-command">
1919
<h4>Curl</h4>
2020
<div className="copy-to-clipboard">
21-
<CopyToClipboard text={curl}><button/></CopyToClipboard>
21+
<CopyToClipboard text={curl}><button aria-label="Copy cURL command to clipboard"/></CopyToClipboard>
2222
</div>
2323
<div>
2424
<SyntaxHighlighter

src/core/plugins/request-snippets/request-snippets.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getComponent }) =>
133133
</div>
134134
<div className="copy-to-clipboard">
135135
<CopyToClipboard text={snippet}>
136-
<button />
136+
<button aria-label="Copy code snippet to clipboard" />
137137
</CopyToClipboard>
138138
</div>
139139
<div>

src/core/plugins/syntax-highlighting/components/HighlightCode.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const HighlightCode = ({
7070
{canCopy && (
7171
<div className="copy-to-clipboard">
7272
<CopyToClipboard text={children}>
73-
<button />
73+
<button aria-label="Copy to clipboard" />
7474
</CopyToClipboard>
7575
</div>
7676
)}

0 commit comments

Comments
 (0)