From 62611549e781ec03ece87d385d081d9d8cf6ae59 Mon Sep 17 00:00:00 2001
From: Niko M <nikolay.moskvin@gmail.com>
Date: Wed, 27 May 2026 12:25:57 +1000
Subject: [PATCH 1/5] feat: enhance accessibility for copy-to-clipboard buttons

---
 src/core/components/copy-to-clipboard-btn.jsx      | 12 ++++++++++--
 src/core/components/curl.jsx                       | 14 ++++++++++++--
 .../plugins/request-snippets/request-snippets.jsx  | 12 ++++++++++--
 .../components/HighlightCode.jsx                   | 12 ++++++++++--
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/core/components/copy-to-clipboard-btn.jsx b/src/core/components/copy-to-clipboard-btn.jsx
index 9c44487e2c5..f2beb2b9e8f 100644
--- a/src/core/components/copy-to-clipboard-btn.jsx
+++ b/src/core/components/copy-to-clipboard-btn.jsx
@@ -13,10 +13,18 @@ export default class CopyToClipboardBtn extends React.Component {
 
     const CopyIcon = getComponent("CopyIcon")
 
+    const label = "Copy path to clipboard"
+
     return (
-      <div className="view-line-link copy-to-clipboard" title="Copy to clipboard">
+      <div
+        className="view-line-link copy-to-clipboard"
+        title={label}
+        aria-label={label}
+      >
         <CopyToClipboard text={this.props.textToCopy}>
-          <CopyIcon />
+          <button aria-label={label} title={label} type="button">
+            <CopyIcon />
+          </button>
         </CopyToClipboard>
       </div>
     )
diff --git a/src/core/components/curl.jsx b/src/core/components/curl.jsx
index 618b21b9e6b..ac058fd4cf8 100644
--- a/src/core/components/curl.jsx
+++ b/src/core/components/curl.jsx
@@ -17,8 +17,18 @@ export default class Curl extends React.Component {
     return (
       <div className="curl-command">
         <h4>Curl</h4>
-        <div className="copy-to-clipboard">
-            <CopyToClipboard text={curl}><button/></CopyToClipboard>
+        <div
+          className="copy-to-clipboard"
+          title="Copy cURL command to clipboard"
+          aria-label="Copy cURL command to clipboard"
+        >
+          <CopyToClipboard text={curl}>
+            <button
+              aria-label="Copy cURL command to clipboard"
+              title="Copy cURL command to clipboard"
+              type="button"
+            />
+          </CopyToClipboard>
         </div>
         <div>
           <SyntaxHighlighter
diff --git a/src/core/plugins/request-snippets/request-snippets.jsx b/src/core/plugins/request-snippets/request-snippets.jsx
index 3fbb127a3bc..d8d268e4f63 100644
--- a/src/core/plugins/request-snippets/request-snippets.jsx
+++ b/src/core/plugins/request-snippets/request-snippets.jsx
@@ -131,9 +131,17 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getComponent }) =>
               })
             }
           </div>
-          <div className="copy-to-clipboard">
+          <div
+            className="copy-to-clipboard"
+            title="Copy request snippet to clipboard"
+            aria-label="Copy request snippet to clipboard"
+          >
             <CopyToClipboard text={snippet}>
-              <button />
+              <button
+                aria-label="Copy request snippet to clipboard"
+                title="Copy request snippet to clipboard"
+                type="button"
+              />
             </CopyToClipboard>
           </div>
           <div>
diff --git a/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx b/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
index f389f0b95ef..d1e09e57fab 100644
--- a/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
+++ b/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
@@ -68,9 +68,17 @@ const HighlightCode = ({
   return (
     <div className="highlight-code" ref={rootRef}>
       {canCopy && (
-        <div className="copy-to-clipboard">
+        <div
+          className="copy-to-clipboard"
+          title="Copy code to clipboard"
+          aria-label="Copy code to clipboard"
+        >
           <CopyToClipboard text={children}>
-            <button />
+            <button
+              aria-label="Copy code to clipboard"
+              title="Copy code to clipboard"
+              type="button"
+            />
           </CopyToClipboard>
         </div>
       )}

From 800719b9029b54152373e89590533643c76275d9 Mon Sep 17 00:00:00 2001
From: Niko M <nikolay.moskvin@gmail.com>
Date: Wed, 27 May 2026 12:54:05 +1000
Subject: [PATCH 2/5] :sparkles: improve accessibility for copy-to-clipboard
 buttons

---
 src/core/components/copy-to-clipboard-btn.jsx      | 14 +++++++++-----
 src/core/components/curl.jsx                       | 10 ++++++----
 .../plugins/request-snippets/request-snippets.jsx  | 10 ++++++----
 .../components/HighlightCode.jsx                   | 10 ++++++----
 4 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/core/components/copy-to-clipboard-btn.jsx b/src/core/components/copy-to-clipboard-btn.jsx
index f2beb2b9e8f..2147b3ccccc 100644
--- a/src/core/components/copy-to-clipboard-btn.jsx
+++ b/src/core/components/copy-to-clipboard-btn.jsx
@@ -2,6 +2,8 @@ import React from "react"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 import PropTypes from "prop-types"
 
+const COPY_PATH_LABEL = "Copy path to clipboard"
+
 /**
  * @param {{ getComponent: func, textToCopy: string }} props
  * @returns {JSX.Element}
@@ -13,16 +15,18 @@ export default class CopyToClipboardBtn extends React.Component {
 
     const CopyIcon = getComponent("CopyIcon")
 
-    const label = "Copy path to clipboard"
-
     return (
       <div
         className="view-line-link copy-to-clipboard"
-        title={label}
-        aria-label={label}
+        title={COPY_PATH_LABEL}
+        aria-label={COPY_PATH_LABEL}
       >
         <CopyToClipboard text={this.props.textToCopy}>
-          <button aria-label={label} title={label} type="button">
+          <button
+            aria-label={COPY_PATH_LABEL}
+            title={COPY_PATH_LABEL}
+            type="button"
+          >
             <CopyIcon />
           </button>
         </CopyToClipboard>
diff --git a/src/core/components/curl.jsx b/src/core/components/curl.jsx
index ac058fd4cf8..bfed4a5f605 100644
--- a/src/core/components/curl.jsx
+++ b/src/core/components/curl.jsx
@@ -3,6 +3,8 @@ import PropTypes from "prop-types"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 import { requestSnippetGenerator_curl_bash } from "../plugins/request-snippets/fn"
 
+const COPY_CURL_COMMAND_LABEL = "Copy cURL command to clipboard"
+
 export default class Curl extends React.Component {
   static propTypes = {
     getComponent: PropTypes.func.isRequired,
@@ -19,13 +21,13 @@ export default class Curl extends React.Component {
         <h4>Curl</h4>
         <div
           className="copy-to-clipboard"
-          title="Copy cURL command to clipboard"
-          aria-label="Copy cURL command to clipboard"
+          title={COPY_CURL_COMMAND_LABEL}
+          aria-label={COPY_CURL_COMMAND_LABEL}
         >
           <CopyToClipboard text={curl}>
             <button
-              aria-label="Copy cURL command to clipboard"
-              title="Copy cURL command to clipboard"
+              aria-label={COPY_CURL_COMMAND_LABEL}
+              title={COPY_CURL_COMMAND_LABEL}
               type="button"
             />
           </CopyToClipboard>
diff --git a/src/core/plugins/request-snippets/request-snippets.jsx b/src/core/plugins/request-snippets/request-snippets.jsx
index d8d268e4f63..a2b24e9a39f 100644
--- a/src/core/plugins/request-snippets/request-snippets.jsx
+++ b/src/core/plugins/request-snippets/request-snippets.jsx
@@ -3,6 +3,8 @@ import classNames from "classnames"
 import PropTypes from "prop-types"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 
+const COPY_REQUEST_SNIPPET_LABEL = "Copy request snippet to clipboard"
+
 const style = {
   cursor: "pointer",
   lineHeight: 1,
@@ -133,13 +135,13 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getComponent }) =>
           </div>
           <div
             className="copy-to-clipboard"
-            title="Copy request snippet to clipboard"
-            aria-label="Copy request snippet to clipboard"
+            title={COPY_REQUEST_SNIPPET_LABEL}
+            aria-label={COPY_REQUEST_SNIPPET_LABEL}
           >
             <CopyToClipboard text={snippet}>
               <button
-                aria-label="Copy request snippet to clipboard"
-                title="Copy request snippet to clipboard"
+                aria-label={COPY_REQUEST_SNIPPET_LABEL}
+                title={COPY_REQUEST_SNIPPET_LABEL}
                 type="button"
               />
             </CopyToClipboard>
diff --git a/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx b/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
index d1e09e57fab..3f6b7ca63b5 100644
--- a/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
+++ b/src/core/plugins/syntax-highlighting/components/HighlightCode.jsx
@@ -7,6 +7,8 @@ import classNames from "classnames"
 import saveAs from "js-file-download"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 
+const COPY_CODE_LABEL = "Copy code to clipboard"
+
 const HighlightCode = ({
   fileName = "response.txt",
   className,
@@ -70,13 +72,13 @@ const HighlightCode = ({
       {canCopy && (
         <div
           className="copy-to-clipboard"
-          title="Copy code to clipboard"
-          aria-label="Copy code to clipboard"
+          title={COPY_CODE_LABEL}
+          aria-label={COPY_CODE_LABEL}
         >
           <CopyToClipboard text={children}>
             <button
-              aria-label="Copy code to clipboard"
-              title="Copy code to clipboard"
+              aria-label={COPY_CODE_LABEL}
+              title={COPY_CODE_LABEL}
               type="button"
             />
           </CopyToClipboard>

From 4be73af6306d4e4386a299de54be9a07c737a97d Mon Sep 17 00:00:00 2001
From: Niko M <nikolay.moskvin@gmail.com>
Date: Wed, 27 May 2026 13:39:57 +1000
Subject: [PATCH 3/5] :fire: enhance accessibility for dark mode toggle button

---
 .../plugins/top-bar/components/DarkModeToggle.jsx         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/standalone/plugins/top-bar/components/DarkModeToggle.jsx b/src/standalone/plugins/top-bar/components/DarkModeToggle.jsx
index 3845fd4ecef..b1142651ec0 100644
--- a/src/standalone/plugins/top-bar/components/DarkModeToggle.jsx
+++ b/src/standalone/plugins/top-bar/components/DarkModeToggle.jsx
@@ -29,10 +29,16 @@ class DarkModeToggle extends Component {
 
   render() {
     const { isDarkMode } = this.state
+    const label = isDarkMode ? "Switch to light mode" : "Switch to dark mode"
 
     return (
       <div className="dark-mode-toggle">
-        <button onClick={this.toggleIsDarkMode}>
+        <button
+          aria-label={label}
+          title={label}
+          type="button"
+          onClick={this.toggleIsDarkMode}
+        >
           {!isDarkMode ? (
             <LightBulbOff height="24" />
           ) : (

From 59f0646719eafc3e80b7e9e7d4de9764ec36fad5 Mon Sep 17 00:00:00 2001
From: Niko M <nikolay.moskvin@gmail.com>
Date: Wed, 27 May 2026 14:13:09 +1000
Subject: [PATCH 4/5] :tada: add WCAG accessibility checks for
 copy-to-clipboard buttons

---
 .github/workflows/wcag.yml                    | 42 ++++++++++++
 package-lock.json                             | 56 ++++++++++++++++
 package.json                                  |  3 +
 .../e2e/a11y/button-accessible-names.cy.js    | 65 +++++++++++++++++++
 test/e2e-cypress/support/e2e.js               |  1 +
 5 files changed, 167 insertions(+)
 create mode 100644 .github/workflows/wcag.yml
 create mode 100644 test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js

diff --git a/.github/workflows/wcag.yml b/.github/workflows/wcag.yml
new file mode 100644
index 00000000000..a59b63bd360
--- /dev/null
+++ b/.github/workflows/wcag.yml
@@ -0,0 +1,42 @@
+name: WCAG checks
+
+on:
+  push:
+    branches: [ master, next ]
+  pull_request:
+    branches: [ master, next ]
+
+env:
+  CYPRESS_CACHE_FOLDER: cypress/cache
+
+permissions:
+  contents: read
+
+jobs:
+  copy-to-clipboard-buttons:
+    name: Copy-to-clipboard button names
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: .nvmrc
+
+      - name: Cache Node Modules and Cypress binary
+        uses: actions/cache@v5
+        id: cache-primes
+        with:
+          path: |
+            node_modules
+            ${{ env.CYPRESS_CACHE_FOLDER }}
+          key: ${{ runner.os }}-node-and-cypress-${{ hashFiles('package-lock.json') }}
+
+      - name: Install dependencies
+        if: steps.cache-primes.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Run WCAG copy-button checks
+        run: npm run cy:wcag
diff --git a/package-lock.json b/package-lock.json
index 1dc0d8c27ff..96280543487 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,7 @@
         "@release-it/conventional-changelog": "=11.0.0",
         "@svgr/webpack": "=8.1.0",
         "autoprefixer": "^10.4.21",
+        "axe-core": "=4.11.4",
         "babel-loader": "^9.2.1",
         "babel-plugin-lodash": "=3.3.4",
         "babel-plugin-module-resolver": "=5.0.2",
@@ -75,6 +76,7 @@
         "css-loader": "=7.1.2",
         "cssnano": "=7.0.7",
         "cypress": "=14.2.0",
+        "cypress-axe": "=1.7.0",
         "dedent": "^1.6.0",
         "deepmerge": "^4.3.1",
         "enzyme": "=3.11.0",
@@ -6078,6 +6080,38 @@
         "node": ">=18"
       }
     },
+    "node_modules/@release-it/conventional-changelog/node_modules/conventional-commits-parser": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-6.4.0.tgz",
+      "integrity": "sha512-tvRg7FIBNlyPzjdG8wWRlPHQJJHI7DylhtRGeU9Lq+JuoPh5BKpPRX83ZdLrvXuOSu5Eo/e7SzOQhU4Hd2Miuw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@simple-libs/stream-utils": "^1.2.0",
+        "meow": "^13.0.0"
+      },
+      "bin": {
+        "conventional-commits-parser": "dist/cli/index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@release-it/conventional-changelog/node_modules/meow": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+      "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@release-it/conventional-changelog/node_modules/semver": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
@@ -8855,6 +8889,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/axe-core": {
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.4.tgz",
+      "integrity": "sha512-KunSNx+TVpkAw/6ULfhnx+HWRecjqZGTOyquAoWHYLRSdK1tB5Ihce1ZW+UY3fj33bYAFWPu7W/GRSmmrCGuxA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/axios": {
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.0.tgz",
@@ -11486,6 +11529,19 @@
         "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
       }
     },
+    "node_modules/cypress-axe": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/cypress-axe/-/cypress-axe-1.7.0.tgz",
+      "integrity": "sha512-zzJpvAAjauEB3GZl0KYXb8i3w6MztWAt2WM3czYTFyNVC30alDmqCm9E7GwZ4bgkldZJlmHakaVEyu73R5St4w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "axe-core": "^3 || ^4",
+        "cypress": "^10 || ^11 || ^12 || ^13 || ^14 || ^15"
+      }
+    },
     "node_modules/cypress/node_modules/ansi-styles": {
       "version": "4.3.0",
       "dev": true,
diff --git a/package.json b/package.json
index 016941c49cd..5b33b2803f7 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "cy:open": "cross-env BROWSERSLIST_ENV=browser-production cypress open",
     "cy:run": "cross-env BROWSERSLIST_ENV=browser-production cypress run",
     "cy:ci": "start-server-and-test cy:start http://localhost:3204 cy:run",
+    "cy:wcag": "start-server-and-test cy:start http://localhost:3204 'npm run cy:run -- --spec test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js'",
     "cy:dev": "start-server-and-test cy:start http://localhost:3204 cy:open",
     "open-static": "npx open-cli http://localhost:3002",
     "security-audit": "run-s -sc security-audit:all security-audit:prod",
@@ -127,6 +128,7 @@
     "@release-it/conventional-changelog": "=11.0.0",
     "@svgr/webpack": "=8.1.0",
     "autoprefixer": "^10.4.21",
+    "axe-core": "=4.11.4",
     "babel-loader": "^9.2.1",
     "babel-plugin-lodash": "=3.3.4",
     "babel-plugin-module-resolver": "=5.0.2",
@@ -139,6 +141,7 @@
     "css-loader": "=7.1.2",
     "cssnano": "=7.0.7",
     "cypress": "=14.2.0",
+    "cypress-axe": "=1.7.0",
     "dedent": "^1.6.0",
     "deepmerge": "^4.3.1",
     "enzyme": "=3.11.0",
diff --git a/test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js b/test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js
new file mode 100644
index 00000000000..fff88816519
--- /dev/null
+++ b/test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js
@@ -0,0 +1,65 @@
+/**
+ * @prettier
+ */
+const buttonNameRule = {
+  runOnly: {
+    type: "rule",
+    values: ["button-name"],
+  },
+}
+
+describe("Button accessible names", () => {
+  const checkAllButtonsHaveNames = () => {
+    cy.checkA11y("#swagger-ui", buttonNameRule)
+  }
+
+  const visitTestOperation = (query = "") => {
+    cy.visit(
+      `/?tryItOutEnabled=true${query}&url=/documents/features/try-it-out-enabled.yaml`
+    )
+      .injectAxe()
+      .get("#operations-default-get_")
+      .click()
+  }
+
+  it("gives the operation path copy button a programmatic name", () => {
+    visitTestOperation()
+
+    cy.get(".opblock-summary .copy-to-clipboard button")
+      .should("have.attr", "aria-label", "Copy path to clipboard")
+      .and("have.attr", "title", "Copy path to clipboard")
+
+    checkAllButtonsHaveNames()
+  })
+
+  it("gives the cURL command copy button a programmatic name", () => {
+    visitTestOperation()
+
+    cy.get(".btn.execute")
+      .click()
+      .get(".responses-wrapper .curl-command")
+      .should("be.visible")
+
+    cy.get(
+      '.responses-wrapper .copy-to-clipboard button[aria-label="Copy cURL command to clipboard"]'
+    )
+      .should("have.attr", "aria-label", "Copy cURL command to clipboard")
+      .and("have.attr", "title", "Copy cURL command to clipboard")
+
+    checkAllButtonsHaveNames()
+  })
+
+  it("gives the request snippet copy button a programmatic name", () => {
+    visitTestOperation("&requestSnippetsEnabled=true")
+
+    cy.get(".btn.execute").click().get(".request-snippets").should("be.visible")
+
+    cy.get(
+      '.request-snippets .copy-to-clipboard button[aria-label="Copy request snippet to clipboard"]'
+    )
+      .should("have.attr", "aria-label", "Copy request snippet to clipboard")
+      .and("have.attr", "title", "Copy request snippet to clipboard")
+
+    checkAllButtonsHaveNames()
+  })
+})
diff --git a/test/e2e-cypress/support/e2e.js b/test/e2e-cypress/support/e2e.js
index 66be30b3a50..ce1b2aa15fb 100644
--- a/test/e2e-cypress/support/e2e.js
+++ b/test/e2e-cypress/support/e2e.js
@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import "./commands"
+import "cypress-axe"
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

From ee263f0d6ca709ad769a48bf6619b0f5165ed11f Mon Sep 17 00:00:00 2001
From: Niko M <nikolay.moskvin@gmail.com>
Date: Wed, 27 May 2026 22:17:10 +1000
Subject: [PATCH 5/5] test: update programmatic names for response action
 buttons

---
 test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js b/test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js
index fff88816519..f96e4be1015 100644
--- a/test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js
+++ b/test/e2e-cypress/e2e/a11y/button-accessible-names.cy.js
@@ -32,7 +32,7 @@ describe("Button accessible names", () => {
     checkAllButtonsHaveNames()
   })
 
-  it("gives the cURL command copy button a programmatic name", () => {
+  it("gives response action buttons programmatic names", () => {
     visitTestOperation()
 
     cy.get(".btn.execute")
@@ -46,6 +46,11 @@ describe("Button accessible names", () => {
       .should("have.attr", "aria-label", "Copy cURL command to clipboard")
       .and("have.attr", "title", "Copy cURL command to clipboard")
 
+    cy.get(".responses-wrapper .download-contents").should(
+      "have.text",
+      "Download"
+    )
+
     checkAllButtonsHaveNames()
   })