diff --git a/src/components/api-request.js b/src/components/api-request.js
index 33675a84..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}"/>
+              <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}"/>
+          <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()}"/>
+          <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 6b30e6fe..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}"/>`
+          <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}"/>
+                <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 633392fd..9a7268ea 100644
--- a/src/components/syntax-highlighter.js
+++ b/src/components/syntax-highlighter.js
@@ -45,6 +45,7 @@ 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' },
     };
@@ -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..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}"/>
+          <syntax-highlighter language="${v.lang}" .content="${fullSource}" .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) {