Mark the active Text or Image tab.

The active tab stays solid green, and the other tab is pale with green
text. A tab whose field failed validation now shows red text.

tests/js/helpers.js

@@ -19,6 +19,7 @@ const STORY_FORM = `
     <label for="author">Author:</label><input id="author" name="author">
     <label for="email">Email address:</label><input id="email" name="email">
     <label for="story">Story:</label>
+    <span id="texttab" class="tab active">Text:</span><span id="uploadtab" class="tab">Image:</span>
     <div id="textparent"><textarea id="story" name="story"></textarea></div>
     <div id="uploadparent" style="display: none;"><input type="file" id="upload" name="upload"></div>
     <span id="wordcounter" class="counter" style="display: none;">0 words</span>

tests/js/utilities.test.js

@@ -91,6 +91,16 @@ test("showHide switches between the text and the image tabs", () => {
   assert.equal(w.showHide("other"), false);
 });
 
+test("showHide marks the tab that is showing", () => {
+  const w = publishWindow();
+  const text = w.document.getElementById("texttab");
+  const upload = w.document.getElementById("uploadtab");
+  w.showHide("upload");
+  assert.deepEqual([text.classList.contains("active"), upload.classList.contains("active")], [false, true]);
+  w.showHide("text");
+  assert.deepEqual([text.classList.contains("active"), upload.classList.contains("active")], [true, false]);
+});
+
 test("review asks for a title, then an author", () => {
   const w = publishWindow("<p>words</p>");
   assert.equal(w.review(), false);