From b1a3f6cccff9178bbb14d0fa3c82a4bc65b47815 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Wed, 15 Jul 2026 20:16:14 +0200
Subject: [PATCH 1/3] accessibility fixes for copy button

---
 src/components/api-request.js          |  6 +++---
 src/components/api-response.js         |  4 ++--
 src/components/syntax-highlighter.js   | 14 +++++++++-----
 src/templates/code-samples-template.js |  2 +-
 src/utils/common-utils.js              | 17 ++++++-----------
 5 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/api-request.js b/src/components/api-request.js
index 33675a84..1af83de4 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -659,14 +659,14 @@ export default class ApiRequest extends LitElement {
             </div>`
           : html`
             <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
-              <syntax-highlighter style="min-height: 60px" mime-type="${this.responseContentType}" .content="${this.responseText}"/>
+              <syntax-highlighter style="min-height: 60px" mime-type="${this.responseContentType}" .content="${this.responseText}" aria-label="Response text"/>
             </div>`
         }
         <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
-          <syntax-highlighter style="min-height: 60px" language="http" .content="${this.responseHeaders}"/>
+          <syntax-highlighter style="min-height: 60px" language="http" .content="${this.responseHeaders}" aria-label="Response headers"/>
         </div>
         <div class="tab-content m-markdown col" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};">
-          <syntax-highlighter style="min-height: 60px" language="shell" .content="${curlSyntax.trim()}"/>
+          <syntax-highlighter style="min-height: 60px" language="shell" .content="${curlSyntax.trim()}" aria-label="Request example"/>
         </div>
       </div>`;
   }
diff --git a/src/components/api-response.js b/src/components/api-response.js
index 6b30e6fe..aa42c992 100644
--- a/src/components/api-response.js
+++ b/src/components/api-response.js
@@ -275,7 +275,7 @@ export default class ApiResponse extends LitElement {
         ? html`
           ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''}
           ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(toMarkdown(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''}
-          <syntax-highlighter class='example-panel generic-tree pad-top-8' mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}"/>`
+          <syntax-highlighter class='example-panel generic-tree pad-top-8' mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}" aria-label="Response example"/>`
         : html`
           <span class = 'example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}'>
             <select aria-label='response body example' @change='${(e) => this.onSelectExample(e)}'>
@@ -287,7 +287,7 @@ export default class ApiResponse extends LitElement {
               <div class="example" data-example = '${v.exampleId}' style = "display: ${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}">
                 ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${v.exampleSummary} </div>` : ''}
                 ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(toMarkdown(v.exampleDescription || ''))} </div>` : ''}
-                <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"/>
+                <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}" aria-label="Response example"/>
               </div>  
             `)}
           </span>  
diff --git a/src/components/syntax-highlighter.js b/src/components/syntax-highlighter.js
index 633392fd..3cc42272 100644
--- a/src/components/syntax-highlighter.js
+++ b/src/components/syntax-highlighter.js
@@ -47,6 +47,7 @@ class SyntaxHighlighter extends LitElement {
       content: { type: Object },
       language: { type: String, attribute: 'language' },
       mimeType: { type: String, attribute: 'mime-type' },
+      label: { type: String, attribute: 'aria-label' },
     };
   }
 
@@ -96,7 +97,7 @@ class SyntaxHighlighter extends LitElement {
   }
 
   render() {
-    return this.renderCopyWrapper(this.renderHighlight());
+    return this.renderCopyWrapper(this.renderHighlight(), this.label?.toLowerCase());
   }
 
   /**
@@ -105,6 +106,7 @@ class SyntaxHighlighter extends LitElement {
    */
   renderHighlight() {
     const lang = this.detectLanguage();
+    const label = this.label?.toLowerCase();
     const grammar = Prism.languages[lang];
 
     if (typeof this.content !== 'string') {
@@ -114,8 +116,8 @@ class SyntaxHighlighter extends LitElement {
     const stringContent = this.content?.toString() || '';
     const increasedSpaceContent = lang !== 'python' && lang !== 'yaml' && lang !== 'toml' ? stringContent.split('\n').map(line => line.replace(/^\s{2}/g, '    ')).join('\n') : stringContent;
     return grammar
-      ? html`<pre><code>${unsafeHTML(Prism.highlight(increasedSpaceContent, grammar, lang))}</code></pre>`
-      : html`<pre>${increasedSpaceContent}</pre>`;
+      ? html`<pre tabindex="0" role="region" aria-label="${label}"><code>${unsafeHTML(Prism.highlight(increasedSpaceContent, grammar, lang))}</code></pre>`
+      : html`<pre tabindex="0" role="region" aria-label="${label}">${increasedSpaceContent}</pre>`;
   }
 
   /**
@@ -123,11 +125,13 @@ class SyntaxHighlighter extends LitElement {
    * @param {*} content Content
    * @returns Content
    */
-  renderCopyWrapper(content) {
+  renderCopyWrapper(content, label) {
     return html`<div class="fs-exclude ph-no-capture" data-hj-suppress data-sl="mask" style="min-height: 2rem;">
       <button 
         class="m-btn outline-primary toolbar-copy-btn" 
-        @click='${this.copyToClipboard}' 
+        @click='${this.copyToClipboard}'
+        aria-label="${getI18nText('operations.copy')} ${label}"
+        aria-live="polite"
         part="btn btn-fill btn-copy">${getI18nText('operations.copy')}</button>
         ${content}
     </div>`;
diff --git a/src/templates/code-samples-template.js b/src/templates/code-samples-template.js
index e9bbdeab..0e928ca9 100644
--- a/src/templates/code-samples-template.js
+++ b/src/templates/code-samples-template.js
@@ -27,7 +27,7 @@ export default function codeSamplesTemplate(xCodeSamples) {
       const fullSource = sanitizedSource.join('\n');
       return html`
         <div class="tab-content m-markdown code-sample-wrapper" style= "display:${i === 0 ? 'block' : 'none'}" data-tab = '${v.lang}${i}'>
-          <syntax-highlighter language="${v.lang}" .content="${fullSource}"/>
+          <syntax-highlighter language="${v.lang}" .content="${fullSource}" aria-label="Code sample"/>
         </div>`;
     })
     }
diff --git a/src/utils/common-utils.js b/src/utils/common-utils.js
index 84e534d4..0f1260b2 100644
--- a/src/utils/common-utils.js
+++ b/src/utils/common-utils.js
@@ -20,7 +20,8 @@ export function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-export function copyToClipboard(copyData, eventTarget) {
+export async function copyToClipboard(copyData, eventTarget) {
+  const btnEl = eventTarget?.target;
   // In lots of places we have more than a couple of spaces for <pre> display purposes, we remove those extra spaces here.
   let data = copyData?.trim().replace(/\s{8}/g, '  ');
   try {
@@ -32,26 +33,20 @@ export function copyToClipboard(copyData, eventTarget) {
   } catch (error) {
     // Ignore non JSON text;
   }
-
-  const textArea = document.createElement('textarea');
-  textArea.value = data;
-  textArea.style.position = 'fixed'; // avoid scrolling to bottom
-  document.body.appendChild(textArea);
-  textArea.focus();
-  textArea.select();
   try {
-    document.execCommand('copy');
-    const btnEl = eventTarget?.target;
+    await window.navigator.clipboard.writeText(data);
     if (btnEl) {
+      const label = btnEl.getAttribute('aria-label');
       btnEl.innerText = getI18nText('operations.copied');
+      btnEl.setAttribute('aria-label', getI18nText('operations.copied'));
       setTimeout(() => {
         btnEl.innerText = getI18nText('operations.copy');
+        btnEl.setAttribute('aria-label', label);
       }, 5000);
     }
   } catch (err) {
     console.error('Unable to copy', err); // eslint-disable-line no-console
   }
-  document.body.removeChild(textArea);
 }
 
 export function getBaseUrlFromUrl(url) {

From d031e9afa93602a6ee15ff8720deac9d9ad48eda Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Wed, 15 Jul 2026 20:21:49 +0200
Subject: [PATCH 2/3] move aria-label to scrollable region

---
 src/components/api-request.js          | 6 +++---
 src/components/api-response.js         | 4 ++--
 src/components/syntax-highlighter.js   | 2 +-
 src/templates/code-samples-template.js | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/api-request.js b/src/components/api-request.js
index 1af83de4..8ad64d12 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -659,14 +659,14 @@ export default class ApiRequest extends LitElement {
             </div>`
           : html`
             <div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
-              <syntax-highlighter style="min-height: 60px" mime-type="${this.responseContentType}" .content="${this.responseText}" aria-label="Response text"/>
+              <syntax-highlighter style="min-height: 60px" mime-type="${this.responseContentType}" .content="${this.responseText}" .label="Response text"/>
             </div>`
         }
         <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
-          <syntax-highlighter style="min-height: 60px" language="http" .content="${this.responseHeaders}" aria-label="Response headers"/>
+          <syntax-highlighter style="min-height: 60px" language="http" .content="${this.responseHeaders}" .label="Response headers"/>
         </div>
         <div class="tab-content m-markdown col" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};">
-          <syntax-highlighter style="min-height: 60px" language="shell" .content="${curlSyntax.trim()}" aria-label="Request example"/>
+          <syntax-highlighter style="min-height: 60px" language="shell" .content="${curlSyntax.trim()}" .label="Request example"/>
         </div>
       </div>`;
   }
diff --git a/src/components/api-response.js b/src/components/api-response.js
index aa42c992..5f2b393f 100644
--- a/src/components/api-response.js
+++ b/src/components/api-response.js
@@ -275,7 +275,7 @@ export default class ApiResponse extends LitElement {
         ? html`
           ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''}
           ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(toMarkdown(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''}
-          <syntax-highlighter class='example-panel generic-tree pad-top-8' mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}" aria-label="Response example"/>`
+          <syntax-highlighter class='example-panel generic-tree pad-top-8' mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}" .label="Response example"/>`
         : html`
           <span class = 'example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}'>
             <select aria-label='response body example' @change='${(e) => this.onSelectExample(e)}'>
@@ -287,7 +287,7 @@ export default class ApiResponse extends LitElement {
               <div class="example" data-example = '${v.exampleId}' style = "display: ${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}">
                 ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style="padding: 4px 0"> ${v.exampleSummary} </div>` : ''}
                 ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? html`<div class="m-markdown-small" style="padding: 4px 0"> ${unsafeHTML(toMarkdown(v.exampleDescription || ''))} </div>` : ''}
-                <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}" aria-label="Response example"/>
+                <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}" .label="Response example"/>
               </div>  
             `)}
           </span>  
diff --git a/src/components/syntax-highlighter.js b/src/components/syntax-highlighter.js
index 3cc42272..fed169ed 100644
--- a/src/components/syntax-highlighter.js
+++ b/src/components/syntax-highlighter.js
@@ -45,9 +45,9 @@ class SyntaxHighlighter extends LitElement {
   static get properties() {
     return {
       content: { type: Object },
+      label: { type: String },
       language: { type: String, attribute: 'language' },
       mimeType: { type: String, attribute: 'mime-type' },
-      label: { type: String, attribute: 'aria-label' },
     };
   }
 
diff --git a/src/templates/code-samples-template.js b/src/templates/code-samples-template.js
index 0e928ca9..e97cc466 100644
--- a/src/templates/code-samples-template.js
+++ b/src/templates/code-samples-template.js
@@ -27,7 +27,7 @@ export default function codeSamplesTemplate(xCodeSamples) {
       const fullSource = sanitizedSource.join('\n');
       return html`
         <div class="tab-content m-markdown code-sample-wrapper" style= "display:${i === 0 ? 'block' : 'none'}" data-tab = '${v.lang}${i}'>
-          <syntax-highlighter language="${v.lang}" .content="${fullSource}" aria-label="Code sample"/>
+          <syntax-highlighter language="${v.lang}" .content="${fullSource}" .label="Code sample"/>
         </div>`;
     })
     }

From 9a547d4280a29c5e9273631bf4017404254bd829 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Wed, 15 Jul 2026 20:49:06 +0200
Subject: [PATCH 3/3] remove operator

---
 src/components/syntax-highlighter.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/syntax-highlighter.js b/src/components/syntax-highlighter.js
index fed169ed..9a7268ea 100644
--- a/src/components/syntax-highlighter.js
+++ b/src/components/syntax-highlighter.js
@@ -97,7 +97,7 @@ class SyntaxHighlighter extends LitElement {
   }
 
   render() {
-    return this.renderCopyWrapper(this.renderHighlight(), this.label?.toLowerCase());
+    return this.renderCopyWrapper(this.renderHighlight(), this.label.toLowerCase());
   }
 
   /**
@@ -106,7 +106,7 @@ class SyntaxHighlighter extends LitElement {
    */
   renderHighlight() {
     const lang = this.detectLanguage();
-    const label = this.label?.toLowerCase();
+    const label = this.label.toLowerCase();
     const grammar = Prism.languages[lang];
 
     if (typeof this.content !== 'string') {