simple tabindex and keyboard access

Author: ahamelers

src/templates/endpoint-template.js

@@ -125,9 +125,9 @@ function endpointBodyTemplate(path) {
 export default function endpointTemplate() {
   return html`
     <div style="display:flex; justify-content:flex-end; padding-right: 1rem; font-size: 14px; margin-top: 16px;"> 
-      <span @click="${(e) => expandCollapseAll.call(this, e, true)}" style="color:var(--primary-color); cursor: pointer;">Expand</span> 
+      <span @click="${(e) => expandCollapseAll.call(this, e, true)}" style="color:var(--primary-color); cursor: pointer;" role="button" tabindex="0" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">Expand</span> 
       &nbsp;|&nbsp; 
-      <span @click="${(e) => expandCollapseAll.call(this, e, false)}" style="color:var(--primary-color); cursor: pointer;">Collapse</span>
+      <span @click="${(e) => expandCollapseAll.call(this, e, false)}" style="color:var(--primary-color); cursor: pointer;" role="button" tabindex="0" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">Collapse</span>
     </div>
     ${(this.resolvedSpec && this.resolvedSpec.tags || []).map((tag) => html`
     <div class='regular-font method-section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}'> 

src/templates/expanded-endpoint-template.js

@@ -20,8 +20,8 @@ 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`<h1 style="display: inline; align-self: center" class="title tag-link" role="heading" aria-level="1" data-content-id="${tag.elementId}"
-          @click="${(e) => this.scrollToEventTarget(e, false)}"> ${tag?.name} ${tagSummary}</h1>`
+        ? html`<h1 style="display: inline; align-self: center" class="title" data-content-id="${tag.elementId}"
+          ><span class="tag-link" role="link" tabindex="0" @click="${(e) => this.scrollToEventTarget(e, false)}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}"> ${tag?.name} ${tagSummary}</span></h1>`
         : ''}
       <slot name="${tag.elementId}"></slot>
 

src/templates/navbar-template.js

@@ -220,7 +220,7 @@ export default function navbarTemplate() {
                 <div class="nav-bar-section-wrapper">
                   <div class="nav-bar-paths-under-tag">
                     ${component.subComponents.filter(s => componentIsInSearch(this.matchPaths, s)).map((p) => html`
-                      <div class='nav-bar-path' data-content-id='cmp--${p.id}' id='link-cmp--${p.id}' @click='${(e) => this.scrollToEventTarget(e, false)}'>
+                      <div class='nav-bar-path' data-content-id='cmp--${p.id}' id='link-cmp--${p.id}' @click='${(e) => this.scrollToEventTarget(e, false)}' role="link" tabindex="0" @keydown = '${(e) => { if (e.key === 'Enter') { e.target.click(); }}}'>
                         <span> ${p.name} </span>
                       </div>`
                     )}