From 26754bac6cbfa4a5c8a2ca072cc3459c988d6c8a Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Sun, 11 May 2025 18:47:32 +0200
Subject: [PATCH 01/19] navigate via keyboard and show focus

---
 src/styles/input-styles.js                  | 19 +++++++++++++++++--
 src/styles/nav-styles.js                    | 14 ++++++++++++++
 src/styles/tab-styles.js                    |  9 +++++++++
 src/templates/expanded-endpoint-template.js |  4 ++--
 src/templates/navbar-template.js            | 21 +++++++++++++++------
 5 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/styles/input-styles.js b/src/styles/input-styles.js
index 83a99776..4f26f05e 100644
--- a/src/styles/input-styles.js
+++ b/src/styles/input-styles.js
@@ -24,6 +24,11 @@ export default css`
   background-color: var(--primary-color);
   color: var(--primary-btn-text-color);
 }
+.m-btn.primary:hover,
+.m-btn.primary:focus-visible {
+  color: var(--primary-color);
+  background-color: var(--primary-btn-text-color);
+}
 .m-btn.outline-primary {
   color: var(--primary-color);
   background-color: var(--bg);
@@ -37,12 +42,14 @@ export default css`
 .m-btn.small { padding:5px 12px; }
 .m-btn.tiny { padding:5px 6px; }
 .m-btn.circle { border-radius: 50%; }
-.m-btn:hover { 
+.m-btn:hover,
+.m-btn:focus-visible { 
   background-color: var(--primary-color);
   color: var(--primary-btn-text-color);
 }
 .m-btn.nav { border: 2px solid var(--secondary-color); }
-.m-btn.nav:hover { 
+.m-btn.nav:hover,
+.m-btn.nav:focus-visible { 
   background-color: var(--secondary-color);
 }
 .m-btn:disabled{ 
@@ -111,6 +118,14 @@ input[type="password"]:active {
   border:1px solid var(--primary-color);
 }
 
+a:focus-visible,
+section .nav-bar-path:focus-visible span {
+  outline:thin solid var(--secondary-color);
+}
+section .nav-bar-path:focus-visible span {
+  outline-offset: 2px;
+}
+
 input[type="file"]{
   font-family: var(--font-regular);
   padding:2px;
diff --git a/src/styles/nav-styles.js b/src/styles/nav-styles.js
index fe18e598..7c0363dd 100644
--- a/src/styles/nav-styles.js
+++ b/src/styles/nav-styles.js
@@ -141,15 +141,29 @@ export default css`
   background-color: var(--nav-hover-bg-color);
 }
 
+.nav-bar-h1:focus-visible,
+.nav-bar-h2:focus-visible,
+.nav-bar-info:focus-visible, slot[name=nav-section]::slotted(*:focus-visible),
+.nav-bar-tag:focus-visible,
+.nav-bar-path:focus-visible,
 .nav-bar-h1:hover,
 .nav-bar-h2:hover,
 .nav-bar-info:hover, slot[name=nav-section]::slotted(*:hover),
 .nav-bar-tag:hover,
 .nav-bar-path:hover {
+  outline: none;
   color:var(--nav-hover-text-color);
   background-color:var(--nav-hover-bg-color);
 }
 
+.nav-bar-h1.active:focus-visible,
+.nav-bar-h2.active:focus-visible,
+.nav-bar-info.active:focus-visible, slot[name=nav-section]::slotted(*.active:focus-visible),
+.nav-bar-tag.active:focus-visible,
+.nav-bar-path.active:focus-visible {
+  outline:thin solid var(--secondary-color);
+}
+
 .conditional-custom-section.custom-section::slotted(*) {
   display: none;
 }
diff --git a/src/styles/tab-styles.js b/src/styles/tab-styles.js
index df124aaf..dc60a9e6 100644
--- a/src/styles/tab-styles.js
+++ b/src/styles/tab-styles.js
@@ -38,6 +38,15 @@ export default css`
 .tab-btn:hover {
   color:var(--primary-color);
 }
+.tab-btn.active:hover {
+  color:var(--secondary-color);
+}
+
+.tab-btn:focus-visible {
+  outline:thin solid var(--secondary-color);
+  outline-offset: -2px;
+}
+
 .tab-content {
   position:relative;
 }
diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
index ed6aefea..626fcfa9 100644
--- a/src/templates/expanded-endpoint-template.js
+++ b/src/templates/expanded-endpoint-template.js
@@ -110,8 +110,8 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
 
       <div class='nav-bar-paths-under-tag' style="max-width: 300px">
         ${tag.paths.map((p) => html`
-        <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}'
-          data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}'>
+        <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}' role="link" tabindex="0"
+          data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'>
           <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
             ${this.usePathInNavBar
               ? html`<div class='mono-font' style="display: flex; align-items: center;">
diff --git a/src/templates/navbar-template.js b/src/templates/navbar-template.js
index b24c10a0..c37f6915 100644
--- a/src/templates/navbar-template.js
+++ b/src/templates/navbar-template.js
@@ -62,18 +62,19 @@ export default function navbarTemplate() {
     ${html`<nav class='nav-scroll' part="navbar-scroll">
       ${(this.hideInfo || !this.resolvedSpec.info)
         ? ''
-        : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}'>
+        : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}';
+      }>
           ${this.resolvedSpec.info.title || getI18nText('menu.overview')}
         </div>`
       }
     
       ${this.hideServerSelection
         ? ''
-        : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}'> ${getI18nText('menu.api-servers')} </div>`
+        : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.api-servers')} </div>`
       }
       ${(this.hideAuthentication || !this.resolvedSpec.securitySchemes)
         ? ''
-        : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}'> ${getI18nText('menu.authentication')} </div>`
+        : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.authentication')} </div>`
       }
 
       <slot name="nav-section" class="custom-nav-section" data-content-id='section' @click = '${(e) => this.scrollToCustomNavSectionTarget(e, false)}'></slot>
@@ -102,8 +103,10 @@ export default function navbarTemplate() {
               ${tag.name === 'General ⦂'
                 ? html``
                 : html`
-                  <div class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}'
-                    @click='${e => { onExpandCollapseTag.call(this, e, tag.elementId); }}'>
+                  <div class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}' role="link" tabindex="0"
+                    @click='${e => { onExpandCollapseTag.call(this, e, tag.elementId); }}'
+                    @keydown='${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'
+                    >
 
                     <div style="display: flex; justify-content: space-between; width: 100%;">
                       <div style="margin-right: .5rem">${tag.name}</div>
@@ -129,7 +132,7 @@ export default function navbarTemplate() {
                   <!-- Paths in each tag (endpoints) -->
                   ${tag.paths.filter((v) => pathIsInSearch(this.matchPaths, v)).map((p) => html`
                   <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}'
-                    data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}'>
+                    data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'>
                     <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
                       ${this.usePathInNavBar
                         ? html`<div class='mono-font' style="display: flex; align-items: center;">
@@ -164,11 +167,17 @@ export default function navbarTemplate() {
             return html`
               <div class="nav-bar-tag-and-paths ${component.expanded ? '' : 'collapsed'}">
                 <div class='nav-bar-tag'
+                  role="link" tabindex="0"
                   data-content-id='cmp--${componentInfo.name.toLowerCase()}' 
                   id='link-cmp--${componentInfo.name.toLowerCase()}' 
                   @click="${(e) => {
                     expandCollapseComponent.call(this, component);
                     this.scrollToEventTarget(e, false);
+                  }}"
+                  @keydown="${(e) => {
+                    if (['Enter', 'Space'].includes(e.key)) {
+                      e.target.click();
+                    }
                   }}">
                   <div>
                     ${componentInfo.name}

From edd3070e50eaeb8e1c7e9c029b22d95dc843d216 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Sun, 11 May 2025 19:03:46 +0200
Subject: [PATCH 02/19] pages should have level-one headings

---
 src/templates/components-template.js        | 2 +-
 src/templates/endpoint-template.js          | 2 +-
 src/templates/expanded-endpoint-template.js | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/templates/components-template.js b/src/templates/components-template.js
index 5e4d4e78..9a823219 100644
--- a/src/templates/components-template.js
+++ b/src/templates/components-template.js
@@ -74,7 +74,7 @@ export default function componentsTemplate() {
     const componentInfo = getComponentInfo(component.componentKeyId);
     return html`
       <div id="cmp--${componentInfo.name.toLowerCase()}" class='regular-font section-gap--focused-mode observe-me' style="padding-bottom: 0">
-        <div class="title tag">${componentInfo.name}</div>
+        <div class="title tag" role="heading" aria-level="1">${componentInfo.name}</div>
         <div class="regular-font-size">
           ${unsafeHTML(`<div class='m-markdown regular-font'>${toMarkdown(componentInfo.description ? componentInfo.description : '')}</div>`)}
         </div>
diff --git a/src/templates/endpoint-template.js b/src/templates/endpoint-template.js
index b95655d0..f7188745 100644
--- a/src/templates/endpoint-template.js
+++ b/src/templates/endpoint-template.js
@@ -64,7 +64,7 @@ function endpointBodyTemplate(path) {
   <div class='endpoint-body ${path.method}'>
     <div class="summary">
       ${this.usePathInNavBar
-        ? path.summary ? html`<div class="title">${path.summary}<div>` : path.shortSummary !== path.description ? html`<div class="title">${path.shortSummary}</div>` : ''
+        ? path.summary ? html`<div class="title" role="heading" aria-level="1">${path.summary}<div>` : path.shortSummary !== path.description ? html`<div class="title" role="heading" aria-level="1">${path.shortSummary}</div>` : ''
         : html`
           <div class='title mono-font regular-font-size' part="section-operation-url" style='display: flex; flex-wrap: wrap; color:var(--fg3)'> 
             ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''}
diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
index 626fcfa9..c1f82d3f 100644
--- a/src/templates/expanded-endpoint-template.js
+++ b/src/templates/expanded-endpoint-template.js
@@ -17,7 +17,7 @@ export function expandedEndpointBodyTemplate(path, tag) {
     ${this.renderStyle === 'read' ? html`<div class='divider' part="operation-divider"></div>` : ''}
     <div class='expanded-endpoint-body observe-me ${path.method}' part="section-operation ${path.elementId}" id='${path.elementId}'>
       ${(this.renderStyle === 'focused' && tag && tag.name !== 'General ⦂')
-        ? html`<div class="title tag-link" data-content-id="${tag.elementId}" @click="${(e) => this.scrollToEventTarget(e, false)}"> ${tag?.name} </h2>`
+        ? html`<div class="title tag-link" role="heading" aria-level="1" data-content-id="${tag.elementId}" @click="${(e) => this.scrollToEventTarget(e, false)}"> ${tag?.name} </h2>`
         : ''}
       <slot name="${tag.elementId}"></slot>
 
@@ -92,7 +92,7 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
   const subsectionId = subsectionFullId.replace(`${tagId}--`, '');
   return html`
     <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="">
-      <div class="title tag" part="label-tag-title">${tag.name}</div>
+      <div class="title tag" part="label-tag-title" role="heading" aria-level="1">${tag.name}</div>
       <slot name="${tag.elementId}--subsection--${subsectionId}">
         <div class="regular-font-size">
         ${

From 3b652f458c6a0dd38e6e5f8d1010894abe9c11b6 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Sun, 11 May 2025 19:04:01 +0200
Subject: [PATCH 03/19] landmark should have accessible name

---
 src/templates/navbar-template.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/navbar-template.js b/src/templates/navbar-template.js
index c37f6915..ea592d57 100644
--- a/src/templates/navbar-template.js
+++ b/src/templates/navbar-template.js
@@ -39,7 +39,7 @@ export function expandCollapseAllComponents() {
 /* eslint-disable indent */
 export default function navbarTemplate() {
   return html`
-  <nav class='nav-bar ${this.renderStyle}' part="section-navbar">
+  <nav class='nav-bar ${this.renderStyle}' part="section-navbar" aria-label="API navigation">
     <slot name="nav-header"></slot>
     ${this.hideSearch ? ''
       : html`

From af5eb3f595409b96a0ef348bf74d5dfb1b359c7a Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Sun, 11 May 2025 19:25:28 +0200
Subject: [PATCH 04/19] form inputs must have labels

---
 src/components/api-request.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/api-request.js b/src/components/api-request.js
index a50a2176..23ea571e 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -158,7 +158,7 @@ export default class ApiRequest extends LitElement {
         return html`
           <tr> 
             <td colspan="1" style="width:160px; min-width:50px; vertical-align: top">
-              <div class="param-name ${generatedParamSchema.deprecated ? 'deprecated' : ''}" style="margin-top: 1rem;">
+              <div class="param-name ${generatedParamSchema.deprecated ? 'deprecated' : ''}" style="margin-top: 1rem;" id="request-${paramName}">
                 ${paramName}${!generatedParamSchema.deprecated && paramRequired ? html`<span style='color:var(--red);'>*</span>` : ''}
               </div>
               <div class="param-type" style="margin-bottom: 1rem;">
@@ -175,6 +175,7 @@ export default class ApiRequest extends LitElement {
                   <tag-input class="request-param" 
                     autocomplete="on"
                     id = "request-param-${paramName}"
+                    aria-labelledby = "request-${paramName}"
                     style = "width:100%;" 
                     data-ptype = "${paramLocation}"
                     data-pname = "${paramName}"
@@ -190,6 +191,7 @@ export default class ApiRequest extends LitElement {
                   <textarea
                     autocomplete="on"
                     id = "request-param-${paramName}"
+                    aria-labelledby = "request-${paramName}"
                     @input="${() => { this.computeCurlSyntax(); }}"
                     class = "textarea small request-param"
                     part = "textarea small textarea-param"
@@ -219,6 +221,7 @@ export default class ApiRequest extends LitElement {
                   <input type="${generatedParamSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%; margin-top: 1rem; margin-bottom: 1rem;"
                     autocomplete="on"
                     id="request-param-${paramName}"
+                    aria-labelledby = "request-${paramName}"
                     @input="${() => { this.computeCurlSyntax(); }}"
                     placeholder="${generatedParamSchema.example || defaultVal || ''}"
                     class="request-param"
@@ -493,6 +496,7 @@ export default class ApiRequest extends LitElement {
                   @input="${() => { this.computeCurlSyntax(); }}"
                   class = "textarea request-body-param-user-input"
                   part = "textarea textarea-param"
+                  aria-label = "Request body"
                   spellcheck = "false"
                   data-ptype = "${reqBody.mimeType}" 
                   data-default = "${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}"

From b806b0a901167b253365da0802ca63fae9af6ecb Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <1749394+ahamelers@users.noreply.github.com>
Date: Mon, 12 May 2025 16:20:05 +0200
Subject: [PATCH 05/19] Update src/components/api-request.js

Co-authored-by: Warren Parad <5056218+wparad@users.noreply.github.com>
Signed-off-by: Audrey Hamelers <1749394+ahamelers@users.noreply.github.com>
---
 src/components/api-request.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/api-request.js b/src/components/api-request.js
index 23ea571e..733e6265 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -158,7 +158,7 @@ export default class ApiRequest extends LitElement {
         return html`
           <tr> 
             <td colspan="1" style="width:160px; min-width:50px; vertical-align: top">
-              <div class="param-name ${generatedParamSchema.deprecated ? 'deprecated' : ''}" style="margin-top: 1rem;" id="request-${paramName}">
+              <div class="param-name ${generatedParamSchema.deprecated ? 'deprecated' : ''}" style="margin-top: 1rem;" id="request-${paramName}-label">
                 ${paramName}${!generatedParamSchema.deprecated && paramRequired ? html`<span style='color:var(--red);'>*</span>` : ''}
               </div>
               <div class="param-type" style="margin-bottom: 1rem;">

From abfbe367f30cae3fd1d9e4804d040497606c664e Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Mon, 12 May 2025 17:18:13 +0200
Subject: [PATCH 06/19] I18n labels

---
 src/components/api-request.js    | 2 +-
 src/languages/en.js              | 1 +
 src/languages/fr.js              | 1 +
 src/templates/navbar-template.js | 2 +-
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/api-request.js b/src/components/api-request.js
index 733e6265..bc00e330 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -496,7 +496,7 @@ export default class ApiRequest extends LitElement {
                   @input="${() => { this.computeCurlSyntax(); }}"
                   class = "textarea request-body-param-user-input"
                   part = "textarea textarea-param"
-                  aria-label = "Request body"
+                  aria-label = "${getI18nText('operations.request-body')}"
                   spellcheck = "false"
                   data-ptype = "${reqBody.mimeType}" 
                   data-default = "${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}"
diff --git a/src/languages/en.js b/src/languages/en.js
index 0b173e4f..06ea8d4b 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -1,6 +1,7 @@
 export default {
   translation: {
     'menu': {
+      'menu': 'API Menu',
       'filter': 'Filter',
       'search': 'Search',
       'overview': 'Overview',
diff --git a/src/languages/fr.js b/src/languages/fr.js
index 9fad4469..a60423e4 100644
--- a/src/languages/fr.js
+++ b/src/languages/fr.js
@@ -1,6 +1,7 @@
 export default {
   translation: {
     'menu': {
+      'menu': "Menu de l'API",
       'filter': 'Filtre',
       'search': 'Chercher',
       'overview': 'Aperçu',
diff --git a/src/templates/navbar-template.js b/src/templates/navbar-template.js
index ea592d57..ff869004 100644
--- a/src/templates/navbar-template.js
+++ b/src/templates/navbar-template.js
@@ -39,7 +39,7 @@ export function expandCollapseAllComponents() {
 /* eslint-disable indent */
 export default function navbarTemplate() {
   return html`
-  <nav class='nav-bar ${this.renderStyle}' part="section-navbar" aria-label="API navigation">
+  <nav class='nav-bar ${this.renderStyle}' part="section-navbar" aria-label="${getI18nText('menu.menu')}">
     <slot name="nav-header"></slot>
     ${this.hideSearch ? ''
       : html`

From a1310379e1279acb0a1f2572c2ad1cd100671793 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Mon, 12 May 2025 17:25:04 +0200
Subject: [PATCH 07/19] move style to nav

---
 src/styles/input-styles.js | 8 --------
 src/styles/nav-styles.js   | 8 ++++++++
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/styles/input-styles.js b/src/styles/input-styles.js
index 4f26f05e..d69fb6ea 100644
--- a/src/styles/input-styles.js
+++ b/src/styles/input-styles.js
@@ -118,14 +118,6 @@ input[type="password"]:active {
   border:1px solid var(--primary-color);
 }
 
-a:focus-visible,
-section .nav-bar-path:focus-visible span {
-  outline:thin solid var(--secondary-color);
-}
-section .nav-bar-path:focus-visible span {
-  outline-offset: 2px;
-}
-
 input[type="file"]{
   font-family: var(--font-regular);
   padding:2px;
diff --git a/src/styles/nav-styles.js b/src/styles/nav-styles.js
index 7c0363dd..748235a9 100644
--- a/src/styles/nav-styles.js
+++ b/src/styles/nav-styles.js
@@ -141,6 +141,14 @@ export default css`
   background-color: var(--nav-hover-bg-color);
 }
 
+a:focus-visible,
+section .nav-bar-path:focus-visible span {
+  outline:thin solid var(--secondary-color);
+}
+section .nav-bar-path:focus-visible span {
+  outline-offset: 2px;
+}
+
 .nav-bar-h1:focus-visible,
 .nav-bar-h2:focus-visible,
 .nav-bar-info:focus-visible, slot[name=nav-section]::slotted(*:focus-visible),

From c34dddfab715f6efd9ab12e55392452a3127148a Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Mon, 12 May 2025 17:38:17 +0200
Subject: [PATCH 08/19] remove primary button hover style

---
 src/styles/input-styles.js | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/styles/input-styles.js b/src/styles/input-styles.js
index d69fb6ea..fd6e9f82 100644
--- a/src/styles/input-styles.js
+++ b/src/styles/input-styles.js
@@ -24,11 +24,6 @@ export default css`
   background-color: var(--primary-color);
   color: var(--primary-btn-text-color);
 }
-.m-btn.primary:hover,
-.m-btn.primary:focus-visible {
-  color: var(--primary-color);
-  background-color: var(--primary-btn-text-color);
-}
 .m-btn.outline-primary {
   color: var(--primary-color);
   background-color: var(--bg);
@@ -43,9 +38,9 @@ export default css`
 .m-btn.tiny { padding:5px 6px; }
 .m-btn.circle { border-radius: 50%; }
 .m-btn:hover,
-.m-btn:focus-visible { 
-  background-color: var(--primary-color);
-  color: var(--primary-btn-text-color);
+.m-btn:focus-visible {
+  border-color: var(--secondary-color);
+  color: var(--secondary-color);
 }
 .m-btn.nav { border: 2px solid var(--secondary-color); }
 .m-btn.nav:hover,

From d27c15da473a254095923b76a4684559dd280000 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Mon, 12 May 2025 18:07:53 +0200
Subject: [PATCH 09/19] fix unselectable request body

---
 src/components/api-request.js | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/api-request.js b/src/components/api-request.js
index a50a2176..5b573b3f 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -384,7 +384,7 @@ export default class ApiRequest extends LitElement {
     this.selectedRequestBodyExample = e.target.value;
     const exampleDropdownEl = e.target;
     window.setTimeout((selectEl) => {
-      const exampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param');
+      const exampleTextareaEl = selectEl.closest('.example-panel').querySelector(`.request-body-param[data-example="${this.selectedRequestBodyExample}"`);
       const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');
       userInputExampleTextareaEl.value = exampleTextareaEl.value;
       this.computeCurlSyntax();
@@ -501,19 +501,20 @@ export default class ApiRequest extends LitElement {
                   .value="${this.fillRequestWithDefault === 'true' ? (displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)) : ''}"
                 ></textarea>
               </slot>
-
-              <!-- This textarea(hidden) is to store the original example value, this will remain unchanged when users switches from one example to another, its is used to populate the editable textarea -->
-              <textarea
-                class = "textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}" 
-                spellcheck = "false"
-                data-ptype = "${reqBody.mimeType}" 
-                style="width:100%; resize:vertical; display:none"
-                .value="${(displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8))}"
-              ></textarea>
             </div>`
           : ''}
-
-        </div>
+          ${reqBodyExamples.map((bodyExample) => html`
+            <!-- This textarea(hidden) is to store the original example value, this will remain unchanged when users switches from one example to another, its is used to populate the editable textarea -->
+            <textarea
+              class = "textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}" 
+              spellcheck = "false"
+              data-ptype = "${reqBody.mimeType}"
+              data-example = "${bodyExample.exampleId}"
+              style="width:100%; resize:vertical; display:none"
+              .value="${(bodyExample.exampleFormat === 'text' ? bodyExample.exampleValue : JSON.stringify(bodyExample.exampleValue, null, 8))}"
+            ></textarea>
+          `)}
+      </div>
       `;
     } else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
       bodyTabNameUseBody = false;

From 76acc7fd5bcea77c3505e01e27753437b5c252f9 Mon Sep 17 00:00:00 2001
From: Warren Parad <gpg@warrenparad.net>
Date: Tue, 13 May 2025 07:46:08 +0200
Subject: [PATCH 10/19] Adding missing labels.

---
 .vscode/settings.json         | 1 +
 src/components/api-request.js | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e8ec85a9..2abc10dd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,7 @@
         "esmodules",
         "exportparts",
         "kyleshockey",
+        "labelledby",
         "prismjs",
         "randombytes",
         "rapidoc",
diff --git a/src/components/api-request.js b/src/components/api-request.js
index bc00e330..a9cedb37 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -175,7 +175,7 @@ export default class ApiRequest extends LitElement {
                   <tag-input class="request-param" 
                     autocomplete="on"
                     id = "request-param-${paramName}"
-                    aria-labelledby = "request-${paramName}"
+                    aria-labelledby = "request-${paramName}-label"
                     style = "width:100%;" 
                     data-ptype = "${paramLocation}"
                     data-pname = "${paramName}"
@@ -191,7 +191,7 @@ export default class ApiRequest extends LitElement {
                   <textarea
                     autocomplete="on"
                     id = "request-param-${paramName}"
-                    aria-labelledby = "request-${paramName}"
+                    aria-labelledby = "request-${paramName}-label"
                     @input="${() => { this.computeCurlSyntax(); }}"
                     class = "textarea small request-param"
                     part = "textarea small textarea-param"
@@ -221,7 +221,7 @@ export default class ApiRequest extends LitElement {
                   <input type="${generatedParamSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%; margin-top: 1rem; margin-bottom: 1rem;"
                     autocomplete="on"
                     id="request-param-${paramName}"
-                    aria-labelledby = "request-${paramName}"
+                    aria-labelledby = "request-${paramName}-label"
                     @input="${() => { this.computeCurlSyntax(); }}"
                     placeholder="${generatedParamSchema.example || defaultVal || ''}"
                     class="request-param"

From 8a74fae3b8899586f10d3accff0ace2a9d647be5 Mon Sep 17 00:00:00 2001
From: Warren Parad <gpg@warrenparad.net>
Date: Tue, 13 May 2025 07:48:49 +0200
Subject: [PATCH 11/19] Reduce complexity of color changes for tab and button
 selection.

---
 src/styles/input-styles.js |  9 ++++++++-
 src/styles/tab-styles.js   | 11 +++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/styles/input-styles.js b/src/styles/input-styles.js
index fd6e9f82..b55abe8f 100644
--- a/src/styles/input-styles.js
+++ b/src/styles/input-styles.js
@@ -37,10 +37,17 @@ export default css`
 .m-btn.small { padding:5px 12px; }
 .m-btn.tiny { padding:5px 6px; }
 .m-btn.circle { border-radius: 50%; }
+
 .m-btn:hover,
-.m-btn:focus-visible {
+.m-btn:focus-visible,
+.m-btn.outline-primary:focus-visible {
+  color: var(--secondary-color);
   border-color: var(--secondary-color);
+}
+.m-btn.primary:focus-visible {
   color: var(--secondary-color);
+  background-color: var(--primary-color);
+  border-color: var(--secondary-color);
 }
 .m-btn.nav { border: 2px solid var(--secondary-color); }
 .m-btn.nav:hover,
diff --git a/src/styles/tab-styles.js b/src/styles/tab-styles.js
index dc60a9e6..2efe1c04 100644
--- a/src/styles/tab-styles.js
+++ b/src/styles/tab-styles.js
@@ -22,7 +22,6 @@ export default css`
   color: var(--light-fg);
   background-color: transparent;
   white-space: nowrap;
-  cursor: pointer;
   outline:none;
   font-family:var(--font-regular); 
   font-size:var(--font-size-small);
@@ -35,16 +34,16 @@ export default css`
   color:var(--primary-color);
 }
 
+.tab-btn:not(.active) {
+  cursor: pointer;
+}
+
 .tab-btn:hover {
   color:var(--primary-color);
 }
-.tab-btn.active:hover {
-  color:var(--secondary-color);
-}
 
 .tab-btn:focus-visible {
-  outline:thin solid var(--secondary-color);
-  outline-offset: -2px;
+  color:var(--secondary-color);
 }
 
 .tab-content {

From 0380a099c865d16379f2de09cf474511db54b84c Mon Sep 17 00:00:00 2001
From: Warren Parad <gpg@warrenparad.net>
Date: Tue, 13 May 2025 07:53:15 +0200
Subject: [PATCH 12/19] Remove Space so nav links are only triggerable by Enter
 for now.

---
 src/templates/expanded-endpoint-template.js |  2 +-
 src/templates/navbar-template.js            | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
index c1f82d3f..a565a2c8 100644
--- a/src/templates/expanded-endpoint-template.js
+++ b/src/templates/expanded-endpoint-template.js
@@ -111,7 +111,7 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
       <div class='nav-bar-paths-under-tag' style="max-width: 300px">
         ${tag.paths.map((p) => html`
         <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}' role="link" tabindex="0"
-          data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'>
+          data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'>
           <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
             ${this.usePathInNavBar
               ? html`<div class='mono-font' style="display: flex; align-items: center;">
diff --git a/src/templates/navbar-template.js b/src/templates/navbar-template.js
index ff869004..e873e11b 100644
--- a/src/templates/navbar-template.js
+++ b/src/templates/navbar-template.js
@@ -62,7 +62,7 @@ export default function navbarTemplate() {
     ${html`<nav class='nav-scroll' part="navbar-scroll">
       ${(this.hideInfo || !this.resolvedSpec.info)
         ? ''
-        : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}';
+        : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}';
       }>
           ${this.resolvedSpec.info.title || getI18nText('menu.overview')}
         </div>`
@@ -70,11 +70,11 @@ export default function navbarTemplate() {
     
       ${this.hideServerSelection
         ? ''
-        : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.api-servers')} </div>`
+        : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.api-servers')} </div>`
       }
       ${(this.hideAuthentication || !this.resolvedSpec.securitySchemes)
         ? ''
-        : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.authentication')} </div>`
+        : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.authentication')} </div>`
       }
 
       <slot name="nav-section" class="custom-nav-section" data-content-id='section' @click = '${(e) => this.scrollToCustomNavSectionTarget(e, false)}'></slot>
@@ -105,7 +105,7 @@ export default function navbarTemplate() {
                 : html`
                   <div class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}' role="link" tabindex="0"
                     @click='${e => { onExpandCollapseTag.call(this, e, tag.elementId); }}'
-                    @keydown='${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'
+                    @keydown='${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'
                     >
 
                     <div style="display: flex; justify-content: space-between; width: 100%;">
@@ -132,7 +132,7 @@ export default function navbarTemplate() {
                   <!-- Paths in each tag (endpoints) -->
                   ${tag.paths.filter((v) => pathIsInSearch(this.matchPaths, v)).map((p) => html`
                   <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}'
-                    data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter', 'Space'].includes(e.key)) { e.target.click(); }}}'>
+                    data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'>
                     <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
                       ${this.usePathInNavBar
                         ? html`<div class='mono-font' style="display: flex; align-items: center;">
@@ -175,7 +175,7 @@ export default function navbarTemplate() {
                     this.scrollToEventTarget(e, false);
                   }}"
                   @keydown="${(e) => {
-                    if (['Enter', 'Space'].includes(e.key)) {
+                    if (['Enter'].includes(e.key)) {
                       e.target.click();
                     }
                   }}">

From 536ffa4c791185a66c4679e7ffe3c49b4c60af53 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 13 May 2025 11:20:50 +0200
Subject: [PATCH 13/19] remove array includes for single match

---
 src/templates/expanded-endpoint-template.js |  2 +-
 src/templates/navbar-template.js            | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
index a565a2c8..d8f54c1f 100644
--- a/src/templates/expanded-endpoint-template.js
+++ b/src/templates/expanded-endpoint-template.js
@@ -111,7 +111,7 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
       <div class='nav-bar-paths-under-tag' style="max-width: 300px">
         ${tag.paths.map((p) => html`
         <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}' role="link" tabindex="0"
-          data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'>
+          data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'>
           <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
             ${this.usePathInNavBar
               ? html`<div class='mono-font' style="display: flex; align-items: center;">
diff --git a/src/templates/navbar-template.js b/src/templates/navbar-template.js
index e873e11b..ce3e3705 100644
--- a/src/templates/navbar-template.js
+++ b/src/templates/navbar-template.js
@@ -62,7 +62,7 @@ export default function navbarTemplate() {
     ${html`<nav class='nav-scroll' part="navbar-scroll">
       ${(this.hideInfo || !this.resolvedSpec.info)
         ? ''
-        : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}';
+        : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}';
       }>
           ${this.resolvedSpec.info.title || getI18nText('menu.overview')}
         </div>`
@@ -70,11 +70,11 @@ export default function navbarTemplate() {
     
       ${this.hideServerSelection
         ? ''
-        : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.api-servers')} </div>`
+        : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'> ${getI18nText('menu.api-servers')} </div>`
       }
       ${(this.hideAuthentication || !this.resolvedSpec.securitySchemes)
         ? ''
-        : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'> ${getI18nText('menu.authentication')} </div>`
+        : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'> ${getI18nText('menu.authentication')} </div>`
       }
 
       <slot name="nav-section" class="custom-nav-section" data-content-id='section' @click = '${(e) => this.scrollToCustomNavSectionTarget(e, false)}'></slot>
@@ -105,7 +105,7 @@ export default function navbarTemplate() {
                 : html`
                   <div class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}' role="link" tabindex="0"
                     @click='${e => { onExpandCollapseTag.call(this, e, tag.elementId); }}'
-                    @keydown='${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'
+                    @keydown='${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'
                     >
 
                     <div style="display: flex; justify-content: space-between; width: 100%;">
@@ -132,7 +132,7 @@ export default function navbarTemplate() {
                   <!-- Paths in each tag (endpoints) -->
                   ${tag.paths.filter((v) => pathIsInSearch(this.matchPaths, v)).map((p) => html`
                   <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}'
-                    data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' role="link" tabindex="0" @keydown = '${(e) => { if (['Enter'].includes(e.key)) { e.target.click(); }}}'>
+                    data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'>
                     <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
                       ${this.usePathInNavBar
                         ? html`<div class='mono-font' style="display: flex; align-items: center;">
@@ -175,7 +175,7 @@ export default function navbarTemplate() {
                     this.scrollToEventTarget(e, false);
                   }}"
                   @keydown="${(e) => {
-                    if (['Enter'].includes(e.key)) {
+                    if (e.key == 'Enter') {
                       e.target.click();
                     }
                   }}">

From 2d6ec861b2c3a0fa4a531a6c10195e26a5407327 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 13 May 2025 11:21:58 +0200
Subject: [PATCH 14/19] linting

---
 src/templates/expanded-endpoint-template.js |  2 +-
 src/templates/navbar-template.js            | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
index d8f54c1f..9fea291a 100644
--- a/src/templates/expanded-endpoint-template.js
+++ b/src/templates/expanded-endpoint-template.js
@@ -111,7 +111,7 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
       <div class='nav-bar-paths-under-tag' style="max-width: 300px">
         ${tag.paths.map((p) => html`
         <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}' role="link" tabindex="0"
-          data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'>
+          data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' @keydown = '${(e) => { if (e.key === 'Enter') { e.target.click(); }}}'>
           <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
             ${this.usePathInNavBar
               ? html`<div class='mono-font' style="display: flex; align-items: center;">
diff --git a/src/templates/navbar-template.js b/src/templates/navbar-template.js
index ce3e3705..43ab0c14 100644
--- a/src/templates/navbar-template.js
+++ b/src/templates/navbar-template.js
@@ -62,7 +62,7 @@ export default function navbarTemplate() {
     ${html`<nav class='nav-scroll' part="navbar-scroll">
       ${(this.hideInfo || !this.resolvedSpec.info)
         ? ''
-        : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}';
+        : html`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key === 'Enter') { e.target.click(); }}}';
       }>
           ${this.resolvedSpec.info.title || getI18nText('menu.overview')}
         </div>`
@@ -70,11 +70,11 @@ export default function navbarTemplate() {
     
       ${this.hideServerSelection
         ? ''
-        : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'> ${getI18nText('menu.api-servers')} </div>`
+        : html`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key === 'Enter') { e.target.click(); }}}'> ${getI18nText('menu.api-servers')} </div>`
       }
       ${(this.hideAuthentication || !this.resolvedSpec.securitySchemes)
         ? ''
-        : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'> ${getI18nText('menu.authentication')} </div>`
+        : html`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key === 'Enter') { e.target.click(); }}}'> ${getI18nText('menu.authentication')} </div>`
       }
 
       <slot name="nav-section" class="custom-nav-section" data-content-id='section' @click = '${(e) => this.scrollToCustomNavSectionTarget(e, false)}'></slot>
@@ -105,7 +105,7 @@ export default function navbarTemplate() {
                 : html`
                   <div class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}' role="link" tabindex="0"
                     @click='${e => { onExpandCollapseTag.call(this, e, tag.elementId); }}'
-                    @keydown='${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'
+                    @keydown='${(e) => { if (e.key === 'Enter') { e.target.click(); }}}'
                     >
 
                     <div style="display: flex; justify-content: space-between; width: 100%;">
@@ -132,7 +132,7 @@ export default function navbarTemplate() {
                   <!-- Paths in each tag (endpoints) -->
                   ${tag.paths.filter((v) => pathIsInSearch(this.matchPaths, v)).map((p) => html`
                   <div class='nav-bar-path ${this.usePathInNavBar ? 'small-font' : ''}'
-                    data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key == 'Enter') { e.target.click(); }}}'>
+                    data-content-id='${p.elementId}' id='link-${p.elementId}' @click = '${(e) => { this.scrollToEventTarget(e, false); }}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key === 'Enter') { e.target.click(); }}}'>
                     <span style="${p.deprecated ? 'filter:opacity(0.5)' : ''}">
                       ${this.usePathInNavBar
                         ? html`<div class='mono-font' style="display: flex; align-items: center;">
@@ -175,7 +175,7 @@ export default function navbarTemplate() {
                     this.scrollToEventTarget(e, false);
                   }}"
                   @keydown="${(e) => {
-                    if (e.key == 'Enter') {
+                    if (e.key === 'Enter') {
                       e.target.click();
                     }
                   }}">

From d8a57d0cb6179256f505bf71ffca34edce5c8cab Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 13 May 2025 13:03:57 +0200
Subject: [PATCH 15/19] additional I18n phrases

---
 src/components/api-request.js               | 14 +++++++-------
 src/components/api-response.js              |  2 +-
 src/languages/en.js                         | 21 +++++++++++++++++++--
 src/languages/fr.js                         | 21 +++++++++++++++++++--
 src/templates/callback-template.js          |  2 +-
 src/templates/code-samples-template.js      |  3 ++-
 src/templates/expanded-endpoint-template.js |  5 +++--
 src/templates/security-scheme-template.js   | 16 ++++++++--------
 8 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/src/components/api-request.js b/src/components/api-request.js
index a9cedb37..f2f0d9d7 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -80,7 +80,7 @@ export default class ApiRequest extends LitElement {
       <div id="api-request-${id}"
         class="api-request col regular-font request-panel ${(this.renderStyle === 'focused' || this.callback === 'true') ? 'focused-mode' : 'view-mode'}">
         <div class=" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} "> 
-          ${this.callback === 'true' ? 'CALLBACK REQUEST' : getI18nText('operations.request')}
+          ${this.callback === 'true' ? getI18nText('operations.callback-request') : getI18nText('operations.request')}
         </div>
         <div>
           ${this.inputParametersTemplate('path')}
@@ -127,10 +127,10 @@ export default class ApiRequest extends LitElement {
     }
 
     const title = {
-      path: 'PATH PARAMETERS',
-      query: 'QUERY-STRING PARAMETERS',
-      header: 'REQUEST HEADERS',
-      cookie: 'COOKIES'
+      path: getI18nText('parameters.path'),
+      query: getI18nText('parameters.string'),
+      header: getI18nText('parameters.headers'),
+      cookie: getI18nText('parameters.cookies')
     }[paramLocation];
 
     const tableRows = [];
@@ -624,7 +624,7 @@ export default class ApiRequest extends LitElement {
           </div>` : ''
         }
         <div style="flex:1"></div>
-        ${!hasResponse ? '' : html`<button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">CLEAR RESPONSE</button>`}
+        ${!hasResponse ? '' : html`<button class="m-btn" part="btn btn-outline" @click="${this.clearResponseData}">${getI18nText('operations.clear-response')}</button>`}
       </div>
       <div class="tab-panel col" style="border-width:0 0 1px 0;">
         <div id="tab_buttons" class="tab-buttons row" @click="${(e) => {
@@ -633,7 +633,7 @@ export default class ApiRequest extends LitElement {
         }}">
         <br>
         <div style="width: 100%">
-        <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>REQUEST</button>
+        <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>`
diff --git a/src/components/api-response.js b/src/components/api-response.js
index 43e88862..5e6991de 100644
--- a/src/components/api-response.js
+++ b/src/components/api-response.js
@@ -104,7 +104,7 @@ export default class ApiResponse extends LitElement {
     return html`
     <div class="col regular-font response-panel ${this.renderStyle}-mode">
       <div class=" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} "> 
-        ${this.callback === 'true' ? 'CALLBACK RESPONSE' : getI18nText('operations.response')}
+        ${this.callback === 'true' ? getI18nText('operations.callback-response') : getI18nText('operations.response')}
       </div>
       <div>
         ${this.responseTemplate()}
diff --git a/src/languages/en.js b/src/languages/en.js
index 06ea8d4b..3acd69c2 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -9,7 +9,8 @@ export default {
       'authentication': 'Authentication',
       'operations': 'OPERATIONS',
       'components': 'COMPONENTS',
-      'schemas': 'Schemas'
+      'schemas': 'Schemas',
+      'callbacks': 'CALLBACKS'
     },
     'headers': {
       'api-servers': 'API SERVER',
@@ -24,6 +25,7 @@ export default {
       'selected': 'SELECTED'
     },
     'authentication': {
+      'auth-header': 'Authorization header',
       'no-api-key-applied': 'No API key applied',
       'http-basic': 'HTTP Basic',
       'http-basic-desc': 'Sends the <code>Authorization header</code> containing the token type <code>Basic</code> followed by the base64 encoded <code>username:password</code> string.',
@@ -32,10 +34,15 @@ export default {
       'requires': 'Requires',
       'http-basic-note': 'Base 64 encoded username:password',
       'in-auth-header': 'in Authorization header',
-      'set': 'SET'
+      'set': 'SET',
+      'remove': 'REMOVE',
+      'clear': 'CLEAR ALL API KEYS',
+      'update': 'UPDATE',
+      'get': 'GET TOKEN'
     },
     'operations': {
       'request': 'REQUEST',
+      'callback-request': 'CALLBACK REQUEST',
       'request-body': 'REQUEST BODY',
       'model': 'MODEL',
       'body': 'BODY',
@@ -47,11 +54,21 @@ export default {
       'response': 'RESPONSE',
       'response-headers': 'RESPONSE HEADERS',
       'example': 'EXAMPLE',
+      'webhook': 'WEBHOOK',
+      'deprecated': 'DEPRECATED',
+      'callback-response': 'CALLBACK RESPONSE',
       'response-status': 'Response Status',
       'fetch-fail': 'Failed to fetch (Check the browser network tab for more information.)',
       'copy': 'Copy',
       'copied': 'Copied'
     },
+    'parameters': {
+      path: 'PATH PARAMETERS',
+      string: 'QUERY-STRING PARAMETERS',
+      headers: 'REQUEST HEADERS',
+      cookies: 'COOKIES',
+      samples: 'CODE SAMPLES'
+    },
     'schemas': {
       'collapse-desc': 'Collapse',
       'expand-desc': 'Expand',
diff --git a/src/languages/fr.js b/src/languages/fr.js
index a60423e4..241ac56f 100644
--- a/src/languages/fr.js
+++ b/src/languages/fr.js
@@ -9,7 +9,8 @@ export default {
       'authentication': 'Authentification',
       'operations': 'OPÉRATIONS',
       'components': 'COMPOSANTS',
-      'schemas': 'Schémas'
+      'schemas': 'Schémas',
+      'callbacks': 'RAPPELS'
     },
     'headers': {
       'api-servers': 'SERVEUR API',
@@ -24,6 +25,7 @@ export default {
       'selected': 'CHOISI'
     },
     'authentication': {
+      'auth-header': "l'en-tête Authorization",
       'no-api-key-applied': "Aucune clé d'API appliquée",
       'http-basic': 'HTTP Basique',
       'http-basic-desc': "Envoyez l'en-tête <code>Authorization contenant</code> le type <code>Basic</code> suivi d'un espace et d'une chaîne encodée en base64 de nom <code>d'utilisateur:mot</code> de passe",
@@ -32,10 +34,15 @@ export default {
       'requires': 'Nécessite',
       'http-basic-note': "un nom d'utilisateur/mot de passe encodé en base64",
       'in-auth-header': "dans l'en-tête Authorization",
-      'set': 'DÉFINIR'
+      'set': 'DÉFINIR',
+      'remove': 'RETIRER',
+      'clear': 'EFFACER TOUTES LES CLÉS API',
+      'update': 'MISE À JOUR',
+      'get': 'OBTENIR UN JETON'
     },
     'operations': {
       'request': 'REQUÊTE',
+      'callback-request': 'REQUÊTE DE RAPPEL',
       'request-body': 'CORPS DE LA REQUÊTE',
       'model': 'MODÈLE',
       'body': 'CORPS',
@@ -45,13 +52,23 @@ export default {
       'clear-response': 'VIDER LA RÉPONSE',
       'execute': 'EXÉCUTER',
       'response': 'RÉPONSE',
+      'callback-response': 'RÉPONSE DE RAPPEL',
       'response-headers': 'EN-TÊTES DE LA RÉPONSE',
       'example': 'EXEMPLE',
+      'webhook': 'WEBHOOK',
+      'deprecated': 'OBSOLÈTE',
       'response-status': 'Statut de réponse',
       'fetch-fail': "Échec d'obtenir (Consultez l'onglet Réseau de navigateur pour plus d'information.)",
       'copy': 'Copier',
       'copied': 'Copié'
     },
+    'parameters': {
+      path: 'PARAMÈTRES DE CHEMIN',
+      string: 'PARAMÈTRES DE CHAÎNE DE REQUÊTE',
+      headers: 'EN-TÊTES DE REQUÊTE',
+      cookies: 'COOKIES',
+      samples: 'EXEMPLES DE CODES'
+    },
     'schemas': {
       'collapse-desc': 'Réduire',
       'expand-desc': 'Agrandir',
diff --git a/src/templates/callback-template.js b/src/templates/callback-template.js
index dc87e635..91f294c2 100644
--- a/src/templates/callback-template.js
+++ b/src/templates/callback-template.js
@@ -6,7 +6,7 @@ export default function callbackTemplate(callbacks) {
   <div class="api-request col regular-font request-panel ${this.renderStyle}-mode">
     ${Object.entries(callbacks).map((kv) => html`
       <div class="${this.renderStyle}-request"> 
-        <div class="req-res-title">CALLBACKS</div>
+        <div class="req-res-title">${getI18nText('menu.callbacks')}</div>
         <div class="table-title">${kv[0]}</div>
         ${Object.entries(kv[1]).map((pathObj) => html`
           <div class="mono-font small-font-size" style="display:flex;">
diff --git a/src/templates/code-samples-template.js b/src/templates/code-samples-template.js
index f73c96e5..9724daef 100644
--- a/src/templates/code-samples-template.js
+++ b/src/templates/code-samples-template.js
@@ -1,9 +1,10 @@
 import { html } from 'lit';
+import { getI18nText } from '../languages/index.js';
 
 /* eslint-disable indent */
 export default function codeSamplesTemplate(xCodeSamples) {
   return html`
-  <section class="table-title top-gap"> CODE SAMPLES </div>
+  <section class="table-title top-gap">${getI18nText('parameters.samples')}</div>
   <div class="tab-panel col"
     @click="${
       (e) => {
diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
index ae93d86e..43d0d302 100644
--- a/src/templates/expanded-endpoint-template.js
+++ b/src/templates/expanded-endpoint-template.js
@@ -4,6 +4,7 @@ import { getSanitizedUrl, toMarkdown } from '../utils/common-utils.js';
 import { pathSecurityTemplate } from './security-scheme-template.js';
 import codeSamplesTemplate from './code-samples-template.js';
 import callbackTemplate from './callback-template.js';
+import { getI18nText } from '../languages/index.js';
 import '../components/api-request.js';
 import '../components/api-response.js';
 
@@ -25,10 +26,10 @@ export function expandedEndpointBodyTemplate(path, tag) {
         <div style="flex-grow: 1">
           <h2 style="display: flex; align-items: center;">
             <div>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</div>
-            <div>${path.deprecated ? html`<div>&nbsp;-<span class="bold-text red-text" style="font-size: var(--font-size-regular)"> DEPRECATED</small></div>` : ''}</div>
+            <div>${path.deprecated ? html`<div>&nbsp;-<span class="bold-text red-text" style="font-size: var(--font-size-regular)"> ${getI18nText('operations.deprecated')}</small></div>` : ''}</div>
           </h2>
           <div class='mono-font part="section-operation-url" regular-font-size' style='padding: 8px 0; color:var(--fg3)'> 
-            ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''}
+            ${path.isWebhook ? html`<span style="color:var(--primary-color)">${getI18nText('operations.webhook')}</span>` : ''}
             <span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}</span> 
             <span part="label-operation-path">${path.path}</span>
           </div>
diff --git a/src/templates/security-scheme-template.js b/src/templates/security-scheme-template.js
index 5a74a676..310c0f96 100644
--- a/src/templates/security-scheme-template.js
+++ b/src/templates/security-scheme-template.js
@@ -292,8 +292,8 @@ function oAuthFlowTemplate(flowName, securityObj, authFlow) {
                 ? html`
                   <input id="oauth-client-secret" type="password" part="textbox textbox-auth-client-secret" value="" placeholder="Client Secret" spellcheck="false" class="oauth-client-input">
                     <select id="oauth-send-client-secret-in" aria-label='oauth client secret location' style="margin-right:5px;" class="oauth-client-input">
-                      <option value = 'header' selected> Authorization Header </option> 
-                      <option value = 'request-body'> Request Body </option> 
+                      <option value = 'header' selected>${getI18nText('authentication.auth-header')}</option> 
+                      <option value = 'request-body'>${getI18nText('operations.request-body')}</option> 
                     </select>
                   </div>`
                 : html`<div style='width:5px'></div>`
@@ -303,7 +303,7 @@ function oAuthFlowTemplate(flowName, securityObj, authFlow) {
               ? html`
                 <div class="oauth-client-input" style="margin-left: 1rem;">
                   <button class="m-btn thin-border" part="btn btn-outline"
-                    @click="${(e) => { onInvokeOAuthFlow.call(this, apiKeyId, flowName, authorizationUrl, tokenUrl, e); }}">GET TOKEN</button>
+                    @click="${(e) => { onInvokeOAuthFlow.call(this, apiKeyId, flowName, authorizationUrl, tokenUrl, e); }}">${getI18nText('authentication.get')}</button>
                 </div>`
               : ''
             }
@@ -351,7 +351,7 @@ function renderSecurityScheme(v) {
                 ${getI18nText('authentication.set')}
               </button>`
             : html`<span class="blue-text" style="margin-right: 1rem">Key Applied</span>
-              <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { v.finalKeyValue = ''; this.requestUpdate(); }}>REMOVE</button>`
+              <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { v.finalKeyValue = ''; this.requestUpdate(); }}>${getI18nText('authentication.remove')}</button>`
         }
       </form>`;
   }
@@ -365,7 +365,7 @@ function renderSecurityScheme(v) {
         <div style="padding-top: 1rem">${unsafeHTML(getI18nText('authentication.http-basic-desc'))}</div>
         <div style="height: 50px; margin-top: 1rem; padding: 10px 0; margin-bottom: 10px;">
           <span class="blue-text" style="margin-right: 1rem">Key Applied</span>
-          <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { v.finalKeyValue = ''; this.requestUpdate(); }}>REMOVE</button>
+          <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { v.finalKeyValue = ''; this.requestUpdate(); }}>${getI18nText('authentication.remove')}</button>
         </div>`;
     }
     return html`
@@ -382,7 +382,7 @@ function renderSecurityScheme(v) {
             @click="${(e) => { onUserEnteredNewApiKeyValue.call(this, v.apiKeyId, e); }}"
             part = "btn btn-outline"
           > 
-            ${v.finalKeyValue ? 'UPDATE' : getI18nText('authentication.set')}
+            ${v.finalKeyValue ? getI18nText('authentication.update') : getI18nText('authentication.set')}
           </button>
         </form>
       </div>`;
@@ -405,14 +405,14 @@ export default function securitySchemeTemplate() {
     <slot name="authentication">
       <div class="section-padding">
         <slot name="authentication-header">
-          <div class='sub-title regular-font'>${getI18nText('headers.authentication')}</div>
+          <div class="sub-title regular-font">${getI18nText('headers.authentication')}</div>
         </slot>
         <div class="small-font-size" style="display:flex; align-items: center; min-height:40px">
           ${providedApiKeys.length > 0
             ? html`
               <div class="blue-text"> ${providedApiKeys.length} API key applied </div>
               <div style="flex:1"></div>
-              <button class="m-btn thin-border" part="btn btn-outline" @click=${() => { onClearAllApiKeys.call(this); }}>CLEAR ALL API KEYS</button>`
+              <button class="m-btn thin-border" part="btn btn-outline" @click=${() => { onClearAllApiKeys.call(this); }}>${getI18nText('authentication.clear')}</button>`
             : html`<div class="red-text">${getI18nText('authentication.no-api-key-applied')}</div>`
           }
         </div>

From 2c546f71b12b3641ed1a12738d12631cbefe879e Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 13 May 2025 13:05:53 +0200
Subject: [PATCH 16/19] missed import

---
 src/templates/callback-template.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/templates/callback-template.js b/src/templates/callback-template.js
index 91f294c2..4675923f 100644
--- a/src/templates/callback-template.js
+++ b/src/templates/callback-template.js
@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { getI18nText } from '../languages/index.js';
 
 /* eslint-disable indent */
 export default function callbackTemplate(callbacks) {

From f977c3a68ac5daea47067d87bc8b037821ffc7d4 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 13 May 2025 13:28:46 +0200
Subject: [PATCH 17/19] one more I18n

---
 src/templates/endpoint-template.js          | 5 +++--
 src/templates/expanded-endpoint-template.js | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/templates/endpoint-template.js b/src/templates/endpoint-template.js
index f7188745..a68971b1 100644
--- a/src/templates/endpoint-template.js
+++ b/src/templates/endpoint-template.js
@@ -6,6 +6,7 @@ import codeSamplesTemplate from './code-samples-template.js';
 import callbackTemplate from './callback-template.js';
 import { pathSecurityTemplate } from './security-scheme-template.js';
 import { getCurrentElement, pathIsInSearch, replaceState, toMarkdown } from '../utils/common-utils.js';
+import { getI18nText } from '../languages/index.js';
 
 function toggleExpand(path) {
   if (path.expanded) {
@@ -49,7 +50,7 @@ function endpointHeadTemplate(path) {
         ? html`<div class="path">${path.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</div>`
         : html`<div class="">${path.summary || path.shortSummary}</div>`
       }
-      ${path.isWebhook ? html`<span style="color:var(--primary-color)"> (Webhook) </span>` : ''}
+      ${path.isWebhook ? html`<span style="color:var(--primary-color)"> (${getI18nText('operations.webhook')}) </span>` : ''}
     </div>
   </summary>
   `;
@@ -67,7 +68,7 @@ function endpointBodyTemplate(path) {
         ? path.summary ? html`<div class="title" role="heading" aria-level="1">${path.summary}<div>` : path.shortSummary !== path.description ? html`<div class="title" role="heading" aria-level="1">${path.shortSummary}</div>` : ''
         : html`
           <div class='title mono-font regular-font-size' part="section-operation-url" style='display: flex; flex-wrap: wrap; color:var(--fg3)'> 
-            ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''}
+            ${path.isWebhook ? html`<span style="color:var(--primary-color)">${getI18nText('operations.webhook')}</span>` : ''}
             <span part="label-operation-method" class='regular-font upper method-fg bold-text ${path.method}'>${path.method}&nbsp;</span> 
             <span style="display: flex; flex-wrap: wrap;" part="label-operation-path">${path.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</span>
           </div>`
diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
index 43d0d302..c87a5e99 100644
--- a/src/templates/expanded-endpoint-template.js
+++ b/src/templates/expanded-endpoint-template.js
@@ -121,7 +121,7 @@ export function expandedTagTemplate(tagId, subsectionFullId) {
                 </div>`
               : p.summary || p.shortSummary
             }
-            ${p.isWebhook ? '(Webhook)' : ''}
+            ${p.isWebhook ? `(${getI18nText('operations.webhook')})` : ''}
           </span>
         </div>`)}
       </div>

From 0dfa4bd439a14caa64ecb1cd7216979bb46937e1 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 13 May 2025 13:36:02 +0200
Subject: [PATCH 18/19] additional heading levels

---
 src/components/api-request.js             | 2 +-
 src/components/api-response.js            | 2 +-
 src/templates/callback-template.js        | 2 +-
 src/templates/endpoint-template.js        | 4 ++--
 src/templates/security-scheme-template.js | 2 +-
 src/templates/server-template.js          | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/api-request.js b/src/components/api-request.js
index f2f0d9d7..d315f61a 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -79,7 +79,7 @@ export default class ApiRequest extends LitElement {
     return keyed(id, html`
       <div id="api-request-${id}"
         class="api-request col regular-font request-panel ${(this.renderStyle === 'focused' || this.callback === 'true') ? 'focused-mode' : 'view-mode'}">
-        <div class=" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} "> 
+        <div class=" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} " role="heading" aria-level="${this.renderStyle === 'focused' ? 3 : 4}"> 
           ${this.callback === 'true' ? getI18nText('operations.callback-request') : getI18nText('operations.request')}
         </div>
         <div>
diff --git a/src/components/api-response.js b/src/components/api-response.js
index 5e6991de..2abbd5bd 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`
     <div class="col regular-font response-panel ${this.renderStyle}-mode">
-      <div class=" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} "> 
+      <div class=" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} " role="heading" aria-level="${this.renderStyle === 'focused' ? 3 : 4}"> 
         ${this.callback === 'true' ? getI18nText('operations.callback-response') : getI18nText('operations.response')}
       </div>
       <div>
diff --git a/src/templates/callback-template.js b/src/templates/callback-template.js
index 4675923f..2d619001 100644
--- a/src/templates/callback-template.js
+++ b/src/templates/callback-template.js
@@ -7,7 +7,7 @@ export default function callbackTemplate(callbacks) {
   <div class="api-request col regular-font request-panel ${this.renderStyle}-mode">
     ${Object.entries(callbacks).map((kv) => html`
       <div class="${this.renderStyle}-request"> 
-        <div class="req-res-title">${getI18nText('menu.callbacks')}</div>
+        <div class="req-res-title" role="heading" aria-level="3">${getI18nText('menu.callbacks')}</div>
         <div class="table-title">${kv[0]}</div>
         ${Object.entries(kv[1]).map((pathObj) => html`
           <div class="mono-font small-font-size" style="display:flex;">
diff --git a/src/templates/endpoint-template.js b/src/templates/endpoint-template.js
index a68971b1..38afbb12 100644
--- a/src/templates/endpoint-template.js
+++ b/src/templates/endpoint-template.js
@@ -44,7 +44,7 @@ export function expandCollapseComponent(component) {
 function endpointHeadTemplate(path) {
   return html`
   <summary @click="${(e) => { toggleExpand.call(this, path, e); }}" class='endpoint-head ${path.method} ${path.expanded ? 'expanded' : 'collapsed'}'>
-    <div class="method ${path.method}"><span style="line-height: 1;">${path.method}</span></div> 
+    <div class="method ${path.method}" role="heading" aria-level="3"><span style="line-height: 1;">${path.method}</span></div> 
     <div style="${path.deprecated ? 'text-decoration: line-through;' : ''}">
       ${this.usePathInNavBar
         ? html`<div class="path">${path.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</div>`
@@ -133,7 +133,7 @@ export default function endpointTemplate() {
     <div class='regular-font method-section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}'> 
     
       <div class='section-tag-header' @click="${(e) => toggleTag.call(this, e, tag.elementId)}">
-        <div id='${tag.elementId}' class="sub-title tag" style="color:var(--primary-color)">${tag.name}</div>
+        <div id='${tag.elementId}' class="sub-title tag" role="heading" aria-level="2" style="color:var(--primary-color)">${tag.name}</div>
       </div>
       <div class='section-tag-body'>
         <slot name="${tag.elementId}"></slot>
diff --git a/src/templates/security-scheme-template.js b/src/templates/security-scheme-template.js
index 310c0f96..7c6b829d 100644
--- a/src/templates/security-scheme-template.js
+++ b/src/templates/security-scheme-template.js
@@ -405,7 +405,7 @@ export default function securitySchemeTemplate() {
     <slot name="authentication">
       <div class="section-padding">
         <slot name="authentication-header">
-          <div class="sub-title regular-font">${getI18nText('headers.authentication')}</div>
+          <div class="sub-title regular-font" role="heading" aria-level="2">${getI18nText('headers.authentication')}</div>
         </slot>
         <div class="small-font-size" style="display:flex; align-items: center; min-height:40px">
           ${providedApiKeys.length > 0
diff --git a/src/templates/server-template.js b/src/templates/server-template.js
index 5004751d..81d49e2a 100644
--- a/src/templates/server-template.js
+++ b/src/templates/server-template.js
@@ -78,7 +78,7 @@ export default function serverTemplate() {
   }
   return html`
   <section id = 'servers' part="section-servers" style="margin-top:24px; margin-bottom:24px;" class='regular-font observe-me section-padding ${this.renderStyle === 'read' ? 'section-gap--read-mode' : (this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap')}'>
-    <div class = 'sub-title'>${getI18nText('headers.api-servers')}</div>
+    <div class = 'sub-title' role="heading" aria-level="2">${getI18nText('headers.api-servers')}</div>
     <div class = 'mono-font' style='margin: 12px 0; font-size:calc(var(--font-size-small) + 1px);'>
       ${!this.resolvedSpec.servers || !this.resolvedSpec.servers.length
         ? ''

From 79048a4bd1be4b673fa270a52d3ff4be6039fa3f Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 13 May 2025 13:55:33 +0200
Subject: [PATCH 19/19] aria tagging for tab buttons

---
 src/components/api-request.js          | 6 +++---
 src/components/api-response.js         | 9 +++++----
 src/templates/code-samples-template.js | 4 ++--
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/api-request.js b/src/components/api-request.js
index d315f61a..ba4f3ff7 100644
--- a/src/components/api-request.js
+++ b/src/components/api-request.js
@@ -586,9 +586,9 @@ export default class ApiRequest extends LitElement {
         ${reqBodySchemaHtml || reqBodyDefaultHtml
           ? html`
             <div class="tab-panel col" style="border-width:0 0 1px 0;">
-              <div class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}">
-                <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model" >${getI18nText('operations.model')}</button>
-                <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab="body">${bodyTabNameUseBody ? getI18nText('operations.body') : getI18nText('operations.form')}</button>
+              <div class="tab-buttons row" role="group" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}">
+                <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" aria-current="${this.activeSchemaTab === 'model'}" data-tab="model" >${getI18nText('operations.model')}</button>
+                <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" aria-current="${this.activeSchemaTab !== 'model'}" data-tab="body">${bodyTabNameUseBody ? getI18nText('operations.body') : getI18nText('operations.form')}</button>
               </div>
               ${html`<div class="tab-content col" style="display: ${this.activeSchemaTab === 'model' ? 'block' : 'none'}"> ${reqBodySchemaHtml}</div>`}
               ${html`<div class="tab-content col" style="display: ${this.activeSchemaTab === 'model' ? 'none' : 'block'}"> ${reqBodyDefaultHtml}</div>`}
diff --git a/src/components/api-response.js b/src/components/api-response.js
index 2abbd5bd..c62af743 100644
--- a/src/components/api-response.js
+++ b/src/components/api-response.js
@@ -158,7 +158,7 @@ export default class ApiResponse extends LitElement {
       this.headersForEachRespStatus[statusCode] = tempHeaders;
       this.mimeResponsesForEachStatus[statusCode] = allMimeResp;
     }
-    return html`<div class='row' style='flex-wrap:wrap'>
+    return html`<div class='row' style='flex-wrap:wrap' role="group">
       ${Object.keys(this.responses).map((respStatus) => html`
         ${respStatus === '$$ref' // Swagger-Client parser creates '$$ref' object if JSON references are used to create responses - this should be ignored
           ? ''
@@ -172,6 +172,7 @@ export default class ApiResponse extends LitElement {
                   this.selectedMimeType = undefined;
                 }
               }}"
+              aria-current="${this.selectedStatus === 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'> 
@@ -194,9 +195,9 @@ export default class ApiResponse extends LitElement {
             ? ''
             : html`
               <div class="tab-panel col">
-                <div class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}" >
-                  <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab='model'>${getI18nText('operations.model')}</button>
-                  <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab='body'>${getI18nText('operations.example')}</button>
+                <div class="tab-buttons row" role="group" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}" >
+                  <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" aria-current="${this.activeSchemaTab === 'model'}" data-tab='model'>${getI18nText('operations.model')}</button>
+                  <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" aria-current="${this.activeSchemaTab !== 'model'}" data-tab='body'>${getI18nText('operations.example')}</button>
                   <div style="flex:1"></div>
                   ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1
                     ? html`<span class='small-font-size gray-text' style='align-self:center; margin-top:8px;'> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>`
diff --git a/src/templates/code-samples-template.js b/src/templates/code-samples-template.js
index 9724daef..e9bbdeab 100644
--- a/src/templates/code-samples-template.js
+++ b/src/templates/code-samples-template.js
@@ -17,8 +17,8 @@ export default function codeSamplesTemplate(xCodeSamples) {
         tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); });
       }
     }">
-    <div class="tab-buttons row" style="width:100; overflow">
-      ${xCodeSamples.map((v, i) => html`<button class="tab-btn ${i === 0 ? 'active' : ''}" data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}
+    <div class="tab-buttons row" role="group" style="width:100; overflow">
+      ${xCodeSamples.map((v, i) => html`<button class="tab-btn ${i === 0 ? 'active' : ''}" aria-current='${i === 0}' data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}
     </div>
     ${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