fix: editor tabs keyboard navigation (#2371)

makes visual tabs in editor behave like aria tabs

Co-authored-by: Sébastien Levert <[email protected]>
Co-authored-by: Musale Martin <[email protected]>

Author: 3 people

.storybook/addons/codeEditorAddon/editor.js

@@ -41,6 +41,7 @@ export class EditorElement extends LitElement {
         color: #616161;
         font-family: -apple-system, BlinkMacSystemFont, sans-serif;
         font-size: 11px;
+        font-weight: 400;
         padding: 8px 18px;
         display: inline-block;
         cursor: pointer;
@@ -49,11 +50,12 @@ export class EditorElement extends LitElement {
         border: 1px solid transparent;
       }
 
-      .tab.selected {
+      .tab[aria-selected='true'] {
         background-color: white;
         color: rgb(51, 51, 51);
-        font-weight: 400;
+        font-weight: 600;
         border: 2px solid transparent;
+        text-decoration: underline;
       }
     `;
   }
@@ -90,6 +92,7 @@ export class EditorElement extends LitElement {
     this.editorRoot = document.createElement('div');
     this.editorRoot.setAttribute('slot', 'editor');
     this.editorRoot.style.height = '100%';
+    this.tabFocus = 0;
 
     this.updateCurrentFile = debounce(() => {
       this.files[this.currentType] = this.editor.getValue();
@@ -181,9 +184,8 @@ export class EditorElement extends LitElement {
     window.removeEventListener('resize', this.handleResize);
   }
 
-  showTab(type, event) {
+  showTab(type) {
     this.editor.updateOptions({ readOnly: false });
-    if (event && event.keyCode != 13) return;
 
     this.currentType = type;
     if (this.files && typeof this.files[type] !== 'undefined') {
@@ -199,26 +201,73 @@ export class EditorElement extends LitElement {
     }
   }
 
+  tabKeyDown = e => {
+    const tabs = this.renderRoot.querySelectorAll('.tab');
+    // Move right
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+      tabs[this.tabFocus].setAttribute('tabindex', -1);
+      if (e.key === 'ArrowRight') {
+        this.tabFocus++;
+        // If we're at the end, go to the start
+        if (this.tabFocus >= tabs.length) {
+          this.tabFocus = 0;
+        }
+        // Move left
+      } else if (e.key === 'ArrowLeft') {
+        this.tabFocus--;
+        // If we're at the start, move to the end
+        if (this.tabFocus < 0) {
+          this.tabFocus = tabs.length - 1;
+        }
+      }
+
+      tabs[this.tabFocus].setAttribute('tabindex', 0);
+      tabs[this.tabFocus].focus();
+    }
+  };
+
   render() {
     return html`
-      <div class="root" tabindex=0>
-        <div class="tab-root" tabindex=0">
+      <div class="root">
+        <div class="tab-root" role="tablist" tabindex="0" @keydown="${this.tabKeyDown}" >
           ${this.fileTypes.map(
             type => html`
-              <div
-                @keydown=${e => this.showTab(type, e)}
-                tabindex=0
+              <button
+                tabindex="${type === this.currentType ? 0 : -1}"
                 @click="${_ => this.showTab(type)}"
                 id="${type}"
-                class="tab ${type === this.currentType ? 'selected' : ''}">
+                role="tab"
+                class="tab"
+                aria-selected="${type === this.currentType}"
+                aria-controls="${`tab-${type}`}"
+              >
                 ${type}
-              </div>
+              </button>
             `
           )}
         </div>
-        <div class="editor-root">
+        <div
+          class="editor-root"
+          role="tabpanel"
+          id="${`tab-${this.currentType}`}"
+          aria-labelledby="${this.currentType}"
+          tabindex=0
+        >
           <slot name="editor"></slot>
         </div>
+        ${this.fileTypes.map(type =>
+          type !== this.currentType
+            ? html`
+            <div
+              role="tabpanel"
+              id="${`tab-${type}`}"
+              aria-labelledby="${type}"
+              tabindex=0 
+              hidden
+            ></div>
+          `
+            : ''
+        )}
       </div>
     `;
   }