openapi-explorer 2.4.801 → 2.4.820

package/dist/es/components/api-request.js

@@ -455,7 +455,7 @@ export default class ApiRequest extends LitElement {
         return;
       }
       this.activeResponseTab = e.target.dataset.tab;
-    }}"> <br> <div style="width:100%"> <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">${getI18nText('operations.request')}</button> ${!hasResponse ? '' : html` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${getI18nText('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${getI18nText('operations.response-headers')}</button>`} </div> </div> ${this.responseIsBlob ? html` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? html`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? html`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </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}"> </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}"> </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()}"> </div> </div>`;
+    }}"> <br> <div style="width:100%"> <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">${getI18nText('operations.request')}</button> ${!hasResponse ? '' : html` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${getI18nText('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${getI18nText('operations.response-headers')}</button>`} </div> </div> ${this.responseIsBlob ? html` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? html`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? html`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </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}" .label="${getI18nText('operations.response')}"> </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}" .label="${getI18nText('operations.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()}" .label="${getI18nText('operations.request')}"> </div> </div>`;
   }
   apiCallTemplate() {
     return html` <div style="display:flex;align-items:flex-end;margin:16px 0;font-size:var(--font-size-small)"> ${this.parameters.length > 0 || this.request_body ? html` <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px" @click="${this.onClearRequestData}"> ${getI18nText('operations.clear')} </button>` : ''} <button class="m-btn primary btn-execute thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">${getI18nText('operations.execute')}</button> </div> ${this.apiResponseTabTemplate()} `;

package/dist/es/components/api-response.js

@@ -160,7 +160,7 @@ export default class ApiResponse extends LitElement {
     if (!mimeRespDetails) {
       return html` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
     }
-    return html` ${mimeRespDetails.examples.length === 1 ? 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}">` : 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)}"> ${mimeRespDetails.examples.map(v => html`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${!v.exampleSummary || v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => html` <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}"> </div> `)} </span> `} `;
+    return html` ${mimeRespDetails.examples.length === 1 ? 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}" .label="${getI18nText('operations.response')}">` : 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)}"> ${mimeRespDetails.examples.map(v => html`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${!v.exampleSummary || v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => html` <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}" .label="${getI18nText('operations.response')}"> </div> `)} </span> `} `;
   }
   mimeSchemaTemplate(mimeRespDetails) {
     if (!mimeRespDetails) {

package/dist/es/components/syntax-highlighter.js

@@ -42,6 +42,9 @@ class SyntaxHighlighter extends LitElement {
       content: {
         type: Object
       },
+      label: {
+        type: String
+      },
       language: {
         type: String,
         attribute: 'language'
@@ -53,7 +56,7 @@ class SyntaxHighlighter extends LitElement {
     };
   }
   static finalizeStyles() {
-    return [PrismStyles, FontStyle, InputStyle, css`:host{font-weight:400}div{position:relative;display:flex;flex-direction:column}.toolbar-copy-btn{position:absolute;top:0;right:0;margin-right:8px}.toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}`];
+    return [PrismStyles, FontStyle, InputStyle, css`:host{font-weight:400}div{position:relative;display:flex;flex-direction:column}.toolbar-copy-btn{position:absolute;top:0;right:0;margin-right:8px}.toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}.toolbar-copy-btn~.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap}`];
   }
 
   /**
@@ -73,7 +76,7 @@ class SyntaxHighlighter extends LitElement {
     return null;
   }
   render() {
-    return this.renderCopyWrapper(this.renderHighlight());
+    return this.renderCopyWrapper(this.renderHighlight(), this.label.toLowerCase());
   }
 
   /**
@@ -89,7 +92,7 @@ class SyntaxHighlighter extends LitElement {
     }
     const stringContent = ((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _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>`;
+    return grammar ? html`<pre tabindex="0" role="region" aria-label="${this.label}"><code>${unsafeHTML(Prism.highlight(increasedSpaceContent, grammar, lang))}</code></pre>` : html`<pre tabindex="0" role="region" aria-label="${this.label}">${increasedSpaceContent}</pre>`;
   }
 
   /**
@@ -97,8 +100,8 @@ class SyntaxHighlighter extends LitElement {
    * @param {*} content Content
    * @returns Content
    */
-  renderCopyWrapper(content) {
-    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}" part="btn btn-fill btn-copy">${getI18nText('operations.copy')}</button> ${content} </div>`;
+  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}" aria-label="${getI18nText('operations.copy')} ${label}" part="btn btn-fill btn-copy">${getI18nText('operations.copy')}</button> ${content} <div class="sr-only" aria-live="polite" role="status"></div> </div>`;
   }
 
   /**

package/dist/es/openapi-explorer.js

@@ -491,6 +491,7 @@ export default class OpenApiExplorer extends LitElement {
           behavior: 'auto',
           block: 'start'
         });
+        gotoEl.focus();
         replaceState(tmpElementId);
       }
     }, isExpandingNeeded ? 150 : 0);
@@ -532,6 +533,7 @@ export default class OpenApiExplorer extends LitElement {
             behavior: 'auto',
             block: 'start'
           });
+          gotoEl.focus();
         }
       }
     }
@@ -668,6 +670,7 @@ export default class OpenApiExplorer extends LitElement {
         behavior: 'auto',
         block: 'start'
       });
+      contentEl.focus();
 
       // Update Location Hash
       replaceState(elementId);
@@ -677,6 +680,7 @@ export default class OpenApiExplorer extends LitElement {
         behavior: 'auto',
         block: 'start'
       });
+      contentEl.focus();
 
       // Update Location Hash
       replaceState(elementId);
@@ -686,7 +690,7 @@ export default class OpenApiExplorer extends LitElement {
         behavior: 'auto',
         block: 'start'
       });
-
+      this.shadowRoot.getElementById('operations-root').focus();
       // Update Location Hash
       replaceState(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
@@ -718,6 +722,7 @@ export default class OpenApiExplorer extends LitElement {
           block: 'center'
         }), 600);
       }
+      newNavEl.focus();
     }
     await sleep(0);
     const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active');

package/dist/es/templates/code-samples-template.js

@@ -22,7 +22,7 @@ export default function codeSamplesTemplate(xCodeSamples) {
     }).filter(l => typeof l !== 'undefined'));
     const sanitizedSource = v.source.split('\n').map(s => s.substring(0, paddingToRemove).match(/^\s+$/) ? s.substring(paddingToRemove) : s);
     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}"> </div>`;
+    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}" .label="${getI18nText('parameters.samples')}"> </div>`;
   })} </div></section>`;
 }
 /* eslint-enable indent */

package/dist/es/utils/common-utils.js

@@ -17,7 +17,8 @@ export const invalidCharsRegEx = new RegExp(/[\s#:?&={}-]+/, 'g'); // used for g
 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 === null || eventTarget === void 0 ? void 0 : 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 === null || copyData === void 0 ? void 0 : copyData.trim().replace(/\s{8}/g, '  ');
   try {
@@ -29,25 +30,19 @@ 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 === null || eventTarget === void 0 ? void 0 : eventTarget.target;
+    await window.navigator.clipboard.writeText(data);
     if (btnEl) {
       btnEl.innerText = getI18nText('operations.copied');
+      btnEl.parentElement.querySelector('.sr-only').innerText = getI18nText('operations.copied');
       setTimeout(() => {
         btnEl.innerText = getI18nText('operations.copy');
+        btnEl.parentElement.querySelector('.sr-only').innerText = '';
       }, 5000);
     }
   } catch (err) {
     console.error('Unable to copy', err); // eslint-disable-line no-console
   }
-  document.body.removeChild(textArea);
 }
 export function getBaseUrlFromUrl(url) {
   const pathArray = url.split('/');

package/dist/lib/components/api-request.js

@@ -460,7 +460,7 @@ class ApiRequest extends _lit.LitElement {
         return;
       }
       this.activeResponseTab = e.target.dataset.tab;
-    }}"> <br> <div style="width:100%"> <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">${(0, _index.getI18nText)('operations.request')}</button> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _index.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _index.getI18nText)('operations.response-headers')}</button>`} </div> </div> ${this.responseIsBlob ? (0, _lit.html)` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? (0, _lit.html)`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? (0, _lit.html)`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : (0, _lit.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}"> </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}"> </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()}"> </div> </div>`;
+    }}"> <br> <div style="width:100%"> <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">${(0, _index.getI18nText)('operations.request')}</button> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _index.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _index.getI18nText)('operations.response-headers')}</button>`} </div> </div> ${this.responseIsBlob ? (0, _lit.html)` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? (0, _lit.html)`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? (0, _lit.html)`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : (0, _lit.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}" .label="${(0, _index.getI18nText)('operations.response')}"> </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}" .label="${(0, _index.getI18nText)('operations.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()}" .label="${(0, _index.getI18nText)('operations.request')}"> </div> </div>`;
   }
   apiCallTemplate() {
     return (0, _lit.html)` <div style="display:flex;align-items:flex-end;margin:16px 0;font-size:var(--font-size-small)"> ${this.parameters.length > 0 || this.request_body ? (0, _lit.html)` <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px" @click="${this.onClearRequestData}"> ${(0, _index.getI18nText)('operations.clear')} </button>` : ''} <button class="m-btn primary btn-execute thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">${(0, _index.getI18nText)('operations.execute')}</button> </div> ${this.apiResponseTabTemplate()} `;

package/dist/lib/components/api-response.js

@@ -165,7 +165,7 @@ class ApiResponse extends _lit.LitElement {
     if (!mimeRespDetails) {
       return (0, _lit.html)` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
     }
-    return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.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}">` : (0, _lit.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)}"> ${mimeRespDetails.examples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${!v.exampleSummary || v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => (0, _lit.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"> </div> `)} </span> `} `;
+    return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.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}" .label="${(0, _index.getI18nText)('operations.response')}">` : (0, _lit.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)}"> ${mimeRespDetails.examples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${!v.exampleSummary || v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => (0, _lit.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}" .label="${(0, _index.getI18nText)('operations.response')}"> </div> `)} </span> `} `;
   }
   mimeSchemaTemplate(mimeRespDetails) {
     if (!mimeRespDetails) {

package/dist/lib/components/syntax-highlighter.js

@@ -44,6 +44,9 @@ class SyntaxHighlighter extends _lit.LitElement {
       content: {
         type: Object
       },
+      label: {
+        type: String
+      },
       language: {
         type: String,
         attribute: 'language'
@@ -55,7 +58,7 @@ class SyntaxHighlighter extends _lit.LitElement {
     };
   }
   static finalizeStyles() {
-    return [_prismStyles.default, _fontStyles.default, _inputStyles.default, (0, _lit.css)`:host{font-weight:400}div{position:relative;display:flex;flex-direction:column}.toolbar-copy-btn{position:absolute;top:0;right:0;margin-right:8px}.toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}`];
+    return [_prismStyles.default, _fontStyles.default, _inputStyles.default, (0, _lit.css)`:host{font-weight:400}div{position:relative;display:flex;flex-direction:column}.toolbar-copy-btn{position:absolute;top:0;right:0;margin-right:8px}.toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}.toolbar-copy-btn~.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap}`];
   }
 
   /**
@@ -75,7 +78,7 @@ class SyntaxHighlighter extends _lit.LitElement {
     return null;
   }
   render() {
-    return this.renderCopyWrapper(this.renderHighlight());
+    return this.renderCopyWrapper(this.renderHighlight(), this.label.toLowerCase());
   }
 
   /**
@@ -91,7 +94,7 @@ class SyntaxHighlighter extends _lit.LitElement {
     }
     const stringContent = ((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _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 ? (0, _lit.html)`<pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(increasedSpaceContent, grammar, lang))}</code></pre>` : (0, _lit.html)`<pre>${increasedSpaceContent}</pre>`;
+    return grammar ? (0, _lit.html)`<pre tabindex="0" role="region" aria-label="${this.label}"><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(increasedSpaceContent, grammar, lang))}</code></pre>` : (0, _lit.html)`<pre tabindex="0" role="region" aria-label="${this.label}">${increasedSpaceContent}</pre>`;
   }
 
   /**
@@ -99,8 +102,8 @@ class SyntaxHighlighter extends _lit.LitElement {
    * @param {*} content Content
    * @returns Content
    */
-  renderCopyWrapper(content) {
-    return (0, _lit.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}" part="btn btn-fill btn-copy">${(0, _index.getI18nText)('operations.copy')}</button> ${content} </div>`;
+  renderCopyWrapper(content, label) {
+    return (0, _lit.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}" aria-label="${(0, _index.getI18nText)('operations.copy')} ${label}" part="btn btn-fill btn-copy">${(0, _index.getI18nText)('operations.copy')}</button> ${content} <div class="sr-only" aria-live="polite" role="status"></div> </div>`;
   }
 
   /**

package/dist/lib/openapi-explorer.js

@@ -497,6 +497,7 @@ class OpenApiExplorer extends _lit.LitElement {
           behavior: 'auto',
           block: 'start'
         });
+        gotoEl.focus();
         (0, _commonUtils.replaceState)(tmpElementId);
       }
     }, isExpandingNeeded ? 150 : 0);
@@ -538,6 +539,7 @@ class OpenApiExplorer extends _lit.LitElement {
             behavior: 'auto',
             block: 'start'
           });
+          gotoEl.focus();
         }
       }
     }
@@ -674,6 +676,7 @@ class OpenApiExplorer extends _lit.LitElement {
         behavior: 'auto',
         block: 'start'
       });
+      contentEl.focus();
 
       // Update Location Hash
       (0, _commonUtils.replaceState)(elementId);
@@ -683,6 +686,7 @@ class OpenApiExplorer extends _lit.LitElement {
         behavior: 'auto',
         block: 'start'
       });
+      contentEl.focus();
 
       // Update Location Hash
       (0, _commonUtils.replaceState)(elementId);
@@ -692,7 +696,7 @@ class OpenApiExplorer extends _lit.LitElement {
         behavior: 'auto',
         block: 'start'
       });
-
+      this.shadowRoot.getElementById('operations-root').focus();
       // Update Location Hash
       (0, _commonUtils.replaceState)(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
@@ -724,6 +728,7 @@ class OpenApiExplorer extends _lit.LitElement {
           block: 'center'
         }), 600);
       }
+      newNavEl.focus();
     }
     await (0, _commonUtils.sleep)(0);
     const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active');

package/dist/lib/templates/code-samples-template.js

@@ -25,7 +25,7 @@ function codeSamplesTemplate(xCodeSamples) {
     }).filter(l => typeof l !== 'undefined'));
     const sanitizedSource = v.source.split('\n').map(s => s.substring(0, paddingToRemove).match(/^\s+$/) ? s.substring(paddingToRemove) : s);
     const fullSource = sanitizedSource.join('\n');
-    return (0, _lit.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}"> </div>`;
+    return (0, _lit.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}" .label="${(0, _index.getI18nText)('parameters.samples')}"> </div>`;
   })} </div></section>`;
 }
 /* eslint-enable indent */

package/dist/lib/utils/common-utils.js

@@ -32,7 +32,8 @@ const invalidCharsRegEx = exports.invalidCharsRegEx = new RegExp(/[\s#:?&={}-]+/
 function sleep(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
-function copyToClipboard(copyData, eventTarget) {
+async function copyToClipboard(copyData, eventTarget) {
+  const btnEl = eventTarget === null || eventTarget === void 0 ? void 0 : 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 === null || copyData === void 0 ? void 0 : copyData.trim().replace(/\s{8}/g, '  ');
   try {
@@ -44,25 +45,19 @@ 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 === null || eventTarget === void 0 ? void 0 : eventTarget.target;
+    await window.navigator.clipboard.writeText(data);
     if (btnEl) {
       btnEl.innerText = (0, _index.getI18nText)('operations.copied');
+      btnEl.parentElement.querySelector('.sr-only').innerText = (0, _index.getI18nText)('operations.copied');
       setTimeout(() => {
         btnEl.innerText = (0, _index.getI18nText)('operations.copy');
+        btnEl.parentElement.querySelector('.sr-only').innerText = '';
       }, 5000);
     }
   } catch (err) {
     console.error('Unable to copy', err); // eslint-disable-line no-console
   }
-  document.body.removeChild(textArea);
 }
 function getBaseUrlFromUrl(url) {
   const pathArray = url.split('/');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openapi-explorer",
-  "version": "2.4.801",
+  "version": "2.4.820",
   "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
   "author": "Authress Developers <developers@authress.io>",
   "type": "module",