Merge pull request #312 from ahamelers/accessibility/focus

Correct lost/incorrect focus after interactions

Author: wparad

src/openapi-explorer.js

@@ -423,6 +423,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 +460,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 +605,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 +646,7 @@ export default class OpenApiExplorer extends LitElement {
       if (waitForComponentToExpand) {
         setTimeout(() => newNavEl.scrollIntoView({ behavior: 'auto', block: 'center' }), 600);
       }
+      newNavEl.focus();
     }
 
     await sleep(0);