feat: highlight currently selected editor tab

client/src/templates/Challenges/classic/Editor.js

@@ -136,9 +136,11 @@ class Editor extends Component {
 
     const { challengeFiles } = this.props;
 
-    // NOTE: for consitency with this.data (and this.options) currentFileKey
-    // is just a property, not state.
-    this.currentFileKey = sortFiles(challengeFiles)[0].key;
+    // NOTE: the ARIA state is controlled by fileKey, so changes to it must
+    // trigger a re-render.  Hence state:
+    this.state = {
+      fileKey: sortFiles(challengeFiles)[0].key
+    };
 
     this.options = {
       fontSize: '18px',
@@ -192,7 +194,7 @@ class Editor extends Component {
             modeMap[challengeFiles[key].ext]
           );
     });
-    return { model: this.data[this.currentFileKey].model };
+    return { model: this.data[this.state.fileKey].model };
   };
 
   // Updates the model if the contents has changed. This is only necessary for
@@ -282,11 +284,11 @@ class Editor extends Component {
 
   onChange = editorValue => {
     const { updateFile } = this.props;
-    updateFile({ key: this.currentFileKey, editorValue });
+    updateFile({ key: this.state.fileKey, editorValue });
   };
 
-  changeTab = fileKey => {
-    this.currentFileKey = fileKey;
+  changeTab = newFileKey => {
+    this.setState({ fileKey: newFileKey });
     const editor = this._editor;
     const currentState = editor.saveViewState();
 
@@ -301,8 +303,8 @@ class Editor extends Component {
       this.data.indexjsx.state = currentState;
     }
 
-    editor.setModel(this.data[fileKey].model);
-    editor.restoreViewState(this.data[fileKey].state);
+    editor.setModel(this.data[newFileKey].model);
+    editor.restoreViewState(this.data[newFileKey].state);
     editor.focus();
   };
 
@@ -319,7 +321,7 @@ class Editor extends Component {
   }
 
   componentWillUnmount() {
-    this.currentFileKey = null;
+    this.setState({ fileKey: null });
     this.data = null;
   }
 
@@ -335,6 +337,7 @@ class Editor extends Component {
           <div className='monaco-editor-tabs'>
             {challengeFiles['indexjsx'] && (
               <button
+                aria-selected={this.state.fileKey === 'indexjsx'}
                 className='monaco-editor-tab'
                 onClick={() => this.changeTab('indexjsx')}
                 role='tab'
@@ -344,6 +347,7 @@ class Editor extends Component {
             )}
             {challengeFiles['indexhtml'] && (
               <button
+                aria-selected={this.state.fileKey === 'indexhtml'}
                 className='monaco-editor-tab'
                 onClick={() => this.changeTab('indexhtml')}
                 role='tab'
@@ -353,6 +357,7 @@ class Editor extends Component {
             )}
             {challengeFiles['indexjs'] && (
               <button
+                aria-selected={this.state.fileKey === 'indexjs'}
                 className='monaco-editor-tab'
                 onClick={() => this.changeTab('indexjs')}
                 role='tab'
@@ -362,6 +367,7 @@ class Editor extends Component {
             )}
             {challengeFiles['indexcss'] && (
               <button
+                aria-selected={this.state.fileKey === 'indexcss'}
                 className='monaco-editor-tab'
                 onClick={() => this.changeTab('indexcss')}
                 role='tab'

client/src/templates/Challenges/classic/editor.css

@@ -14,6 +14,11 @@
   background-color: var(--secondary-background);
 }
 
+button.monaco-editor-tab:hover {
+  color: var(--quaternary-color);
+  background-color: var(--quaternary-background);
+}
+
 .monaco-editor-tab:first-child {
   border-left: 2px solid var(--primary-color);
 }
@@ -22,3 +27,9 @@
   background-color: var(--primary-background);
   border-bottom: 2px solid var(--primary-background);
 }
+
+.monaco-editor-tab[role='tab'][aria-selected='true'] {
+  border-color: var(--secondary-color);
+  background-color: var(--secondary-color);
+  color: var(--secondary-background);
+}