From ad059dc49c0bdeb1999bfda9c7e16ee07aca3364 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Fri, 12 Jun 2020 17:15:44 +0200
Subject: [PATCH] fix(a11y): improve tab navigation for Editor

---
 .../templates/Challenges/classic/Editor.js    | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js
index 746d43bb7c..104dc92198 100644
--- a/client/src/templates/Challenges/classic/Editor.js
+++ b/client/src/templates/Challenges/classic/Editor.js
@@ -328,43 +328,46 @@ class Editor extends Component {
     const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
 
     // TODO: tabs should be dynamically created from the challengeFiles
-    // TODO: a11y fixes.
     // TODO: is the key necessary? Try switching themes without it.
     return (
       <Suspense fallback={<Loader timeout={600} />}>
         <span className='notranslate'>
           <div className='monaco-editor-tabs'>
             {challengeFiles['indexjsx'] && (
-              <div
+              <button
                 className='monaco-editor-tab'
                 onClick={() => this.changeTab('indexjsx')}
+                role='tab'
               >
                 script.jsx
-              </div>
+              </button>
             )}
             {challengeFiles['indexhtml'] && (
-              <div
+              <button
                 className='monaco-editor-tab'
                 onClick={() => this.changeTab('indexhtml')}
+                role='tab'
               >
                 index.html
-              </div>
+              </button>
             )}
             {challengeFiles['indexjs'] && (
-              <div
+              <button
                 className='monaco-editor-tab'
                 onClick={() => this.changeTab('indexjs')}
+                role='tab'
               >
                 script.js
-              </div>
+              </button>
             )}
             {challengeFiles['indexcss'] && (
-              <div
+              <button
                 className='monaco-editor-tab'
                 onClick={() => this.changeTab('indexcss')}
+                role='tab'
               >
                 styles.css
-              </div>
+              </button>
             )}
           </div>
           <MonacoEditor