diff --git a/src/components/json-tree.js b/src/components/json-tree.js
index 699b658c..c424fb06 100644
--- a/src/components/json-tree.js
+++ b/src/components/json-tree.js
@@ -75,10 +75,12 @@ export default class JsonTree extends LitElement {
         animation-duration: 0s !important;
       }
       .open-bracket:not(.collapsed) + .inside-bracket-wrapper {
+        visibility: visible;
         animation: linear 0.2s expand-height;
       }
       .open-bracket.collapsed + .inside-bracket-wrapper {
         animation: linear 0.2s collapse-height;
+        visibility: hidden;
         max-height: 0;
       }
       .inside-bracket {
@@ -149,12 +151,12 @@ export default class JsonTree extends LitElement {
   render() {
     return html`
       <div class="json-tree tree ${this.interactive ? 'interactive' : ''}">
-        ${this.generateTree(this.data, true)}
+        ${this.generateTree(this.data, 'root', true)}
       </div>  
     `;
   }
 
-  generateTree(data, isLast = false) {
+  generateTree(data, id, isLast = false) {
     if (data === null) {
       return html`<div class="null" style="display:inline;">null</div>`;
     }
@@ -164,13 +166,13 @@ export default class JsonTree extends LitElement {
         return html`${(Array.isArray(data) ? '[ ],' : '{ },')}`;
       }
       return html`
-      <div class="open-bracket ${detailType === 'array' ? 'array' : 'object'} " @click="${this.toggleExpand}" > ${detailType === 'array' ? '[' : '{'}</div>
-      <div class="inside-bracket-wrapper">
+      <div aria-label="JSON ${detailType.replace('pure_', '')}" class="open-bracket ${detailType === 'array' ? 'array' : 'object'} " @click="${this.toggleExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}"> ${detailType === 'array' ? '[' : '{'}</div>
+      <div class="inside-bracket-wrapper" id="${id}">
         <div class="inside-bracket">
           ${Object.keys(data).map((key, i, a) => html`
             <div class="item"> 
               ${detailType === 'pure_object' ? html`"${key}":` : ''}
-              ${this.generateTree(data[key], i === (a.length - 1))}
+              ${this.generateTree(data[key], `${id}${key}${i}`, i === (a.length - 1))}
             </div>`)
           }
         </div>
@@ -188,6 +190,7 @@ export default class JsonTree extends LitElement {
   toggleExpand(e) {
     const openBracketEl = e.target;
     openBracketEl.classList.toggle('collapsed');
+    openBracketEl.setAttribute('aria-expanded', !openBracketEl.classList.contains('collapsed'));
     if (openBracketEl.classList.contains('collapsed')) {
       e.target.innerHTML = e.target.classList.contains('array') ? '[...]' : '{...}';
     } else {
diff --git a/src/components/schema-tree.js b/src/components/schema-tree.js
index 97cca90c..b4614000 100644
--- a/src/components/schema-tree.js
+++ b/src/components/schema-tree.js
@@ -99,10 +99,12 @@ export default class SchemaTree extends LitElement {
         animation-duration: 0s !important;
       }
       .tr:not(.collapsed) + .inside-bracket-wrapper {
+        visibility: visible;
         animation: linear 0.2s expand-height;
       }
       .tr.collapsed + .inside-bracket-wrapper {
         animation: linear 0.2s collapse-height;
+        visibility: hidden;
         max-height: 0;
       }
 
@@ -147,6 +149,7 @@ export default class SchemaTree extends LitElement {
   }
 
   generateTree(data, dataType = 'object', arrayType = '', flags = {}, key = '', title = '', description = '', schemaLevel = 0, indentLevel = 0) {
+    const id = `row-${key}${schemaLevel}${indentLevel}`;
     if (!data) {
       return html`<div class="null" style="display:inline;">
         <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span>
@@ -189,43 +192,43 @@ export default class SchemaTree extends LitElement {
         if (dataType === 'array') {
           const arrType = arrayType !== 'object' ? arrayType : '';
           if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
-            return [html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`, ']]'];
+            return [html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">[[ ${arrType} </span>`, ']]'];
           }
 
-          return [html`<span class="open-bracket array-of-array"  data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`];
+          return [html`<span class="open-bracket array-of-array"  data-array-type="${arrType}" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">[[...]]</span>`];
         }
 
         if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
-          return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`, ']'];
+          return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">[</span>`, ']'];
         }
 
-        return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`];
+        return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">[...]</span>`];
       }
       
       if (data['::type'] === 'xxx-of-option') {
         if (dataType === 'array') {
           if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
-            return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`, ']'];
+            return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">[</span>`, ']'];
           }
 
-          return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`];
+          return [html`<span class="open-bracket array" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">[...]</span>`];
         }
       }
       
       if (data['::type']) {
         if (dataType === 'array') {
           if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
-            return [html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`, '}]'];
+            return [html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">[{</span>`, '}]'];
           }
           
-          return [html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`];
+          return [html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">[{...}]</span>`];
         }
 
         if (schemaLevel < this.schemaExpandLevel && !data['::circular']) {
-          return [html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`, '}'];
+          return [html`<span class="open-bracket object" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">{</span>`, '}'];
         }
 
-        return [html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`];
+        return [html`<span class="open-bracket object" @click="${this.toggleObjectExpand}" role="button" tabindex="0" aria-expanded="true" aria-controls="${id}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}">{...}</span>`];
       }
 
       return [''];
@@ -263,7 +266,7 @@ export default class SchemaTree extends LitElement {
               ${data['::metadata']?.constraints?.length ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''}
           </div>
         </div>
-        <div class="inside-bracket-wrapper">
+        <div class="inside-bracket-wrapper" id="${id}">
           <div class='inside-bracket ${data['::type'] || 'no-type-info'}' style='padding-left:${data['::type'] === 'xxx-of-option' ? 0 : leftPadding}px;'>
             ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}`
               : html`
@@ -326,6 +329,7 @@ export default class SchemaTree extends LitElement {
     const rowEl = e.target.closest('.tr');
 
     rowEl.classList.toggle('collapsed');
+    e.target.setAttribute('aria-expanded', !rowEl.classList.contains('collapsed'));
     if (rowEl.classList.contains('collapsed')) {
       e.target.innerHTML = e.target.classList.contains('array-of-object')
         ? '[{...}]'
diff --git a/src/openapi-explorer.js b/src/openapi-explorer.js
index 88cc7a55..ad61cca6 100644
--- a/src/openapi-explorer.js
+++ b/src/openapi-explorer.js
@@ -311,6 +311,7 @@ export default class OpenApiExplorer extends LitElement {
   async onShowSearchModalClicked() {
     this.showAdvancedSearchDialog = true;
     // wait for the dialog to render
+    this.shadowRoot.getElementById('nav-advanced-search').setAttribute('aria-expanded', true);
     await sleep(10);
     const inputEl = this.shadowRoot.getElementById('advanced-search-dialog-input');
     if (inputEl) {
@@ -423,6 +424,7 @@ export default class OpenApiExplorer extends LitElement {
       const gotoEl = this.shadowRoot.getElementById(tmpElementId);
       if (gotoEl) {
         gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });
+        gotoEl.focus();
         replaceState(tmpElementId);
       }
     }, isExpandingNeeded ? 150 : 0);
@@ -459,6 +461,7 @@ export default class OpenApiExplorer extends LitElement {
         const gotoEl = this.shadowRoot.getElementById(anchor.replace('#', ''));
         if (gotoEl) {
           gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });
+          gotoEl.focus();
         }
       }
     }
@@ -603,19 +606,21 @@ export default class OpenApiExplorer extends LitElement {
         component.expanded = true;
       }
       contentEl.scrollIntoView({ behavior: 'auto', block: 'start' });
+      contentEl.focus();
 
       // Update Location Hash
       replaceState(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
     } else if (elementId.match('cmp--') || elementId.match('tag--') || elementId.match('overview--') || elementId.match('auth--') || elementId.match('servers--')) {
       contentEl.scrollIntoView({ behavior: 'auto', block: 'start' });
+      contentEl.focus();
 
       // Update Location Hash
       replaceState(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
     } else {
       this.shadowRoot.getElementById('operations-root').scrollIntoView({ behavior: 'auto', block: 'start' });
-
+      this.shadowRoot.getElementById('operations-root').focus();
       // Update Location Hash
       replaceState(elementId);
       newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
@@ -642,6 +647,7 @@ export default class OpenApiExplorer extends LitElement {
       if (waitForComponentToExpand) {
         setTimeout(() => newNavEl.scrollIntoView({ behavior: 'auto', block: 'center' }), 600);
       }
+      newNavEl.focus();
     }
 
     await sleep(0);
diff --git a/src/styles/endpoint-styles.js b/src/styles/endpoint-styles.js
index 1af72bb4..2e4daf36 100644
--- a/src/styles/endpoint-styles.js
+++ b/src/styles/endpoint-styles.js
@@ -21,7 +21,7 @@ export default css`
 }
 
 .m-endpoint.expanded{margin-bottom:16px; }
-.m-endpoint > .endpoint-head{
+.m-endpoint .endpoint-head{
   border-width:1px 1px 1px 5px;
   border-style:solid;
   border-color:transparent;
@@ -31,45 +31,45 @@ export default css`
   align-items: center;
   cursor: pointer;
 }
-.m-endpoint > .endpoint-head.put:hover,
-.m-endpoint > .endpoint-head.put.expanded{
+.m-endpoint .endpoint-head.put:hover,
+.m-endpoint .endpoint-head.put.expanded{
   border-color: var(--orange); 
   background-color: var(--light-orange);
 }
-.m-endpoint > .endpoint-head.post:hover,
-.m-endpoint > .endpoint-head.post.expanded {
+.m-endpoint .endpoint-head.post:hover,
+.m-endpoint .endpoint-head.post.expanded {
   border-color:var(--green); 
   background-color: var(--light-green);
 }
-.m-endpoint > .endpoint-head.get:hover,
-.m-endpoint > .endpoint-head.get.expanded,
-.m-endpoint > .endpoint-head.head:hover,
-.m-endpoint > .endpoint-head.head.expanded {
+.m-endpoint .endpoint-head.get:hover,
+.m-endpoint .endpoint-head.get.expanded,
+.m-endpoint .endpoint-head.head:hover,
+.m-endpoint .endpoint-head.head.expanded {
   border-color:var(--blue); 
   background-color: var(--light-blue);
 }
-.m-endpoint > .endpoint-head.delete:hover,
-.m-endpoint > .endpoint-head.delete.expanded {
+.m-endpoint .endpoint-head.delete:hover,
+.m-endpoint .endpoint-head.delete.expanded {
   border-color:var(--red); 
   background-color: var(--light-red);
 }
-.m-endpoint > .endpoint-head.patch:hover,
-.m-endpoint > .endpoint-head.patch.expanded {
+.m-endpoint .endpoint-head.patch:hover,
+.m-endpoint .endpoint-head.patch.expanded {
   border-color :var(--yellow); 
   background-color: var(--light-yellow);
 }
-.m-endpoint > .endpoint-head.query:hover,
-.m-endpoint > .endpoint-head.query.expanded {
+.m-endpoint .endpoint-head.query:hover,
+.m-endpoint .endpoint-head.query.expanded {
   border-color: var(--purple);
   background-color: var(--light-purple);
 }
-.m-endpoint > .endpoint-head.trace:hover,
-.m-endpoint > .endpoint-head.trace.expanded {
+.m-endpoint .endpoint-head.trace:hover,
+.m-endpoint .endpoint-head.trace.expanded {
   border-color: var(--purple);
   background-color: var(--light-purple);
 }
-.m-endpoint > .endpoint-head.options:hover,
-.m-endpoint > .endpoint-head.options.expanded {
+.m-endpoint .endpoint-head.options:hover,
+.m-endpoint .endpoint-head.options.expanded {
   border-color: var(--gray);
   background-color: var(--light-gray);
 }
diff --git a/src/templates/advance-search-template.js b/src/templates/advance-search-template.js
index 56f7e113..d81e6ea2 100644
--- a/src/templates/advance-search-template.js
+++ b/src/templates/advance-search-template.js
@@ -12,6 +12,7 @@ export default function searchByPropertiesModalTemplate() {
     // Trigger the event to force it to be removed from the DOM
     document.dispatchEvent(new CustomEvent('keydown', { detail: { code: 'Escape' } }));
     document.removeEventListener('keydown', keyDownEventListenerAdvancedSearch, { once: true });
+    this.shadowRoot.getElementById('nav-advanced-search').setAttribute('aria-expanded', false);
   };
 
   document.addEventListener('keydown', keyDownEventListenerAdvancedSearch, { once: true });
@@ -20,10 +21,10 @@ export default function searchByPropertiesModalTemplate() {
   ${this.showAdvancedSearchDialog
     ? html`
       <div class="dialog-box-overlay">
-        <div class="dialog-box">
+        <div class="dialog-box" aria-modal="true" role="dialog" aria-labelledby="dialog-title">
           <header class="dialog-box-header">
-            <span class="dialog-box-title">Advanced Search</span>
-            <button class="m-btn thin-border" @click="${() => { closeAdvancedSearchDialog(); }}" part="btn btn-outline">&times;</button>
+            <span class="dialog-box-title" id="dialog-title">Advanced Search</span>
+            <button class="m-btn thin-border" @click="${() => { closeAdvancedSearchDialog(); }}" part="btn btn-outline" aria-label="Close">&times;</button>
           </header>
           <div id="advanced-search-modal" class="dialog-box-content">
             <span class="advanced-search-options">
diff --git a/src/templates/endpoint-template.js b/src/templates/endpoint-template.js
index 38afbb12..ce07017b 100644
--- a/src/templates/endpoint-template.js
+++ b/src/templates/endpoint-template.js
@@ -43,16 +43,18 @@ export function expandCollapseComponent(component) {
 /* eslint-disable indent */
 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}" 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>`
-        : html`<div class="">${path.summary || path.shortSummary}</div>`
-      }
-      ${path.isWebhook ? html`<span style="color:var(--primary-color)"> (${getI18nText('operations.webhook')}) </span>` : ''}
+  <div role="heading" aria-level="3">
+    <div role="button" tabindex="0" class='endpoint-head ${path.method} ${path.expanded ? 'expanded' : 'collapsed'}' @click="${(e) => { toggleExpand.call(this, path, e); }}" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}" aria-controls="${path.elementId}" aria-expanded="${path.expanded}">
+      <div class="method ${path.method}" role="img" aria-label="${path.method}"><span style="line-height: 1;" aria-hidden="true">${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>`
+          : html`<div class="">${path.summary || path.shortSummary}</div>`
+        }
+        ${path.isWebhook ? html`<span style="color:var(--primary-color)"> (${getI18nText('operations.webhook')}) </span>` : ''}
+      </div>
     </div>
-  </summary>
+  </div>
   `;
 }
 
@@ -125,9 +127,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'}'> 
diff --git a/src/templates/expanded-endpoint-template.js b/src/templates/expanded-endpoint-template.js
index 07eb0f68..6b38caac 100644
--- a/src/templates/expanded-endpoint-template.js
+++ b/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>
 
diff --git a/src/templates/navbar-template.js b/src/templates/navbar-template.js
index b6016030..b03d3295 100644
--- a/src/templates/navbar-template.js
+++ b/src/templates/navbar-template.js
@@ -50,17 +50,17 @@ export default function navbarTemplate() {
     <slot name="nav-header"></slot>
     ${this.hideSearch ? ''
       : html`
-        <div style="display:flex; flex-direction:row; justify-content:center; align-items:center; padding:24px;">
-          <div style="display:flex; flex:1; line-height:22px;">
+        <div style="display:flex; flex-direction:column; padding:24px;">
+          <div style="display:flex; flex:1; align-items: center; flex-wrap: wrap; column-gap: 1ch; line-height: 22px;">
+            <label for="nav-bar-search" style="color:var(--fg);">${getI18nText('menu.filter')}</label>
             <input id="nav-bar-search" 
               part = "textbox textbox-nav-filter"
-              style = "width:100%; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--secondary-color); background-color:var(--nav-hover-bg-color)" 
+              style = "flex: 1 0 auto; color:var(--nav-hover-text-color); border-color:var(--secondary-color); background-color:var(--nav-hover-bg-color)" 
               type = "text"
-              placeholder = "${getI18nText('menu.filter')}"
               @input = "${this.onSearchChange}"  
               spellcheck = "false">
           </div>
-          <button class="m-btn outline-primary" part="btn btn-fill btn-search" style="margin-left:5px;" @click="${this.onShowSearchModalClicked}">
+          <button class="m-btn outline-primary" part="btn btn-fill btn-search" @click="${this.onShowSearchModalClicked}" style="margin-left: auto; margin-top: 6px" aria-haspopup="true" aria-expanded="false" id="nav-advanced-search">
             ${getI18nText('menu.search')}
           </button>
         </div>
@@ -108,7 +108,7 @@ export default function navbarTemplate() {
 
       <slot name="nav-section" class="custom-nav-section" data-content-id='section' @click = '${(e) => this.scrollToCustomNavSectionTarget(e, false)}'></slot>
 
-      <div class="sticky-scroll-element ${this.operationsCollapsed ? 'collapsed' : ''}" @click="${() => { expandCollapseAll.call(this); }}">
+      <div class="sticky-scroll-element ${this.operationsCollapsed ? 'collapsed' : ''}" @click="${() => { expandCollapseAll.call(this); }}" role="button" tabindex="0" @keydown="${(e) => { if (e.key === 'Enter') { e.target.click(); }}}" aria-expanded="${!this.operationsCollapsed}" aria-controls="${this.resolvedSpec.tags.filter((tag) => !tag.paths.length && !this.matchPaths || tag.paths.some((path) => pathIsInSearch(this.matchPaths, path))).map((tag) => `nav-section-${tag.elementId}`).join(' ')}"">
         <div class='nav-bar-section' part="navbar-section-header navbar-operations-header">
           <slot name="operations-header">
             <div class='nav-bar-section-title'>${getI18nText('menu.operations')}</div>  
@@ -116,7 +116,7 @@ export default function navbarTemplate() {
           <div style="" part="navbar-operations-header-collapse">
             ${this.resolvedSpec.tags.length > 1 && this.resolvedSpec.tags.some((tag) => !tag.paths.length && !this.matchPaths || tag.paths.some((path) => pathIsInSearch(this.matchPaths, path)))
               ? html`
-                <div class="toggle">▾</div>`
+                <div class="toggle" aria-hidden="true">▾</div>`
               : ''
             }  
           </div>
@@ -133,19 +133,20 @@ export default function navbarTemplate() {
                 ? html``
                 : html`
                   <div class='nav-bar-tag' id="link-${tag.elementId}" data-content-id='${tag.elementId}' role="link" tabindex="0"
+                    aria-expanded="${tag.expanded}"
                     @click='${e => { onExpandCollapseTag.call(this, e, tag.elementId); }}'
                     @keydown='${(e) => { if (e.key === 'Enter') { e.target.click(); }}}'
                     >
 
                     <div style="display: flex; justify-content: space-between; width: 100%;">
                       <div style="margin-right: .5rem">${tag.name}</div>
-                      <div class="toggle">▾</div>
+                      <div class="toggle" aria-hidden="true">▾</div>
                     </div>
                   </div>
                 `
               }
 
-              <div class="nav-bar-section-wrapper">
+              <div class="nav-bar-section-wrapper" id="nav-section-${tag.elementId}" style="display: ${tag.expanded ? 'block' : 'none'}">
                 <div>
                   ${tag.headers.map((header) => html`
                     <div 
@@ -157,7 +158,7 @@ export default function navbarTemplate() {
                     </div>`
                   )}
                 </div>
-                <div class='nav-bar-paths-under-tag'>
+                <div class="nav-bar-paths-under-tag">
                   <!-- 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' : ''}'
@@ -203,6 +204,8 @@ export default function navbarTemplate() {
                     expandCollapseComponent.call(this, component);
                     this.scrollToEventTarget(e, false);
                   }}"
+                  aria-controls="nav-section-cmp--${componentInfo.name.toLowerCase()}"
+                  aria-expanded="${component.expanded}"
                   @keydown="${(e) => {
                     if (e.key === 'Enter') {
                       e.target.click();
@@ -213,14 +216,14 @@ export default function navbarTemplate() {
                   </div>
 
                   <div style="" part="navbar-components-header-collapse">
-                    <div class="toggle">▾</div>
+                    <div class="toggle" aria-hidden="true">▾</div>
                   </div>
                 </div>
 
-                <div class="nav-bar-section-wrapper">
+                <div class="nav-bar-section-wrapper" id="nav-section-cmp--${componentInfo.name.toLowerCase()}" style="display: ${component.expanded ? 'block' : 'none'}">
                   <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>`
                     )}
diff --git a/src/utils/common-utils.js b/src/utils/common-utils.js
index 84e534d4..d3d2f1f7 100644
--- a/src/utils/common-utils.js
+++ b/src/utils/common-utils.js
@@ -47,6 +47,7 @@ export function copyToClipboard(copyData, eventTarget) {
       setTimeout(() => {
         btnEl.innerText = getI18nText('operations.copy');
       }, 5000);
+      btnEl.focus();
     }
   } catch (err) {
     console.error('Unable to copy', err); // eslint-disable-line no-console