additional heading levels

Author: ahamelers

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>

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>

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;">

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>

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

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
         ? ''