From aaa87f0b5c0db997b1794e3936219cdc5f75081a Mon Sep 17 00:00:00 2001 From: Audrey Hamelers Date: Tue, 14 Jul 2026 21:03:36 +0200 Subject: [PATCH 1/2] use tab roles for tabs --- src/components/api-request.js | 34 ++++++++++-- src/components/api-response.js | 77 ++++++++++++++++++++------ src/templates/code-samples-template.js | 31 +++++++++-- 3 files changed, 116 insertions(+), 26 deletions(-) diff --git a/src/components/api-request.js b/src/components/api-request.js index 33675a84..7d7967ca 100644 --- a/src/components/api-request.js +++ b/src/components/api-request.js @@ -575,7 +575,7 @@ export default class ApiRequest extends LitElement { return html`
-
+
${getI18nText('operations.request-body')} ${this.request_body.required ? html`*` : ''} ${this.selectedRequestBodyType} @@ -586,12 +586,34 @@ export default class ApiRequest extends LitElement { ${reqBodySchemaHtml || reqBodyDefaultHtml ? html`
-
- - +
+ +
- ${html`
${reqBodySchemaHtml}
`} - ${html`
${reqBodyDefaultHtml}
`} + ${html`
${reqBodySchemaHtml}
`} + ${html`
${reqBodyDefaultHtml}
`}
` : html`${reqBodyFileInputHtml}` } diff --git a/src/components/api-response.js b/src/components/api-response.js index 6b30e6fe..6b83ccf5 100644 --- a/src/components/api-response.js +++ b/src/components/api-response.js @@ -103,7 +103,7 @@ export default class ApiResponse extends LitElement { render() { return html`
-
+
${this.callback === 'true' ? getI18nText('operations.callback-response') : getI18nText('operations.response')}
@@ -159,8 +159,8 @@ export default class ApiResponse extends LitElement { this.headersForEachRespStatus[statusCode] = tempHeaders; this.mimeResponsesForEachStatus[statusCode] = allMimeResp; } - return html`
- ${Object.keys(this.responses).map((respStatus) => html` + return html`
+ ${Object.keys(this.responses).map((respStatus, i) => html` ${respStatus === '$$ref' // Swagger-Client parser creates '$$ref' object if JSON references are used to create responses - this should be ignored ? '' : html` @@ -173,7 +173,32 @@ export default class ApiResponse extends LitElement { this.selectedMimeType = undefined; } }}" - aria-current="${this.selectedStatus === respStatus}" + @keydown="${(e) => { + const keys = Object.keys(this.responses); + let newIndex = 0; + switch (e.key) { + case 'ArrowRight': + newIndex = (i + 1) % keys.length; + break; + case 'ArrowLeft': + newIndex = (i - 1 + keys.length) % keys.length; + break; + case 'Home': + newIndex = 0; + break; + case 'End': + newIndex = keys.length - 1; + break; + default: + return; + } + this.shadowRoot.getElementById(`button${keys[newIndex]}`).focus(); + }}" + role="tab" + aria-selected="${this.selectedStatus === respStatus}" + aria-controls="status${respStatus}" + tabindex="${this.selectedStatus === respStatus ? '0' : '-1'}" + id="button${respStatus}" class='m-btn small ${this.selectedStatus === respStatus ? 'primary' : ''}' part="btn--resp ${this.selectedStatus === respStatus ? 'btn-fill--resp' : 'btn-outline--resp'} btn-response-status" style='margin: 8px 4px 0 0; text-transform: capitalize'> @@ -184,7 +209,7 @@ export default class ApiResponse extends LitElement {
${Object.keys(this.responses).map((status) => html` -
+
${unsafeHTML(toMarkdown(this.responses[status] && this.responses[status].description || ''))} ${(this.headersForEachRespStatus[status] && this.headersForEachRespStatus[status].length > 0) @@ -196,23 +221,43 @@ export default class ApiResponse extends LitElement { ? '' : html`
-
- - +
+ +
${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? html` ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} ` : html`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}` }
- ${this.activeSchemaTab === 'body' - ? html`
- ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} -
` - : html`
- ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} -
` - } + ${html`
+ ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}} +
`} + ${html`
+ ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} +
`}
` }`) diff --git a/src/templates/code-samples-template.js b/src/templates/code-samples-template.js index e9bbdeab..765ab112 100644 --- a/src/templates/code-samples-template.js +++ b/src/templates/code-samples-template.js @@ -17,8 +17,31 @@ export default function codeSamplesTemplate(xCodeSamples) { tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); }); } }"> -
- ${xCodeSamples.map((v, i) => html``)} +
+ ${xCodeSamples.map((v, i) => html``)}
${xCodeSamples.map((v, i) => { // We skip the first line because it could be there is no padding there, but padding on the next lines which needs to be removed @@ -26,8 +49,8 @@ export default function codeSamplesTemplate(xCodeSamples) { 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` -
- +
+
`; }) } From c7ad2cff9cc5b10d528778fd23dcab49add52238 Mon Sep 17 00:00:00 2001 From: Audrey Hamelers Date: Tue, 14 Jul 2026 21:09:37 +0200 Subject: [PATCH 2/2] tab focus style --- src/styles/tab-styles.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/tab-styles.js b/src/styles/tab-styles.js index 2efe1c04..a67d1d42 100644 --- a/src/styles/tab-styles.js +++ b/src/styles/tab-styles.js @@ -42,7 +42,8 @@ export default css` color:var(--primary-color); } -.tab-btn:focus-visible { +.tab-btn:focus-visible, +.tab-btn.active:focus-visible { color:var(--secondary-color); }