feedback: Only read empty text box error once.

This improves on the previous a11y fix in a few ways:
1. It only reads the error text once, as opposed to twice.
2. It indicates to the user that the description is required when they
first see it.
3. It marks the description field as "invalid" when the user doesn't
fill it out.

This change also cleans up the error if the user correctly populates the
description field.

BUG=chromium:1107656
TEST=Open feedback, ensure chromevox says "required" when first reading\
     field. Then, click "send" and ensure focus returns to the text box\
     and reads both error message and description.
TEST=Artificially induce a later failure in sendReport(), enter text \
     in the description textarea, click send, and verify alert is \
     cleared.

Change-Id: I9f56bb1e0377a04d2c23cf99b6fad012d3a7c4e2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2473138
Commit-Queue: Miriam Zimmerman <mutexlox@chromium.org>
Reviewed-by: Ian Barkley-Yeung <iby@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#817574}

chrome/browser/resources/feedback/html/default.html

@@ -31,9 +31,11 @@
   </div>
   <div id="content-pane" class="content">
     <p id="free-form-text" i18n-content="freeFormText"></p>
-    <textarea id="description-text" aria-labelledby="free-form-text"></textarea>
-    <div id="description-empty-error" class="description-empty-notification"
-        role="alert" i18n-content="noDescription" hidden></div>
+    <textarea id="description-text" aria-labelledby="free-form-text"
+      aria-required="true">
+    </textarea>
+    <p id="description-empty-error" class="description-empty-notification"
+       i18n-content="noDescription" aria-hidden="true" hidden></p>
     <div>
       <p id="additional-info-label" i18n-content="additionalInfo"><p>
     </div>

chrome/browser/resources/feedback/js/feedback.js

@@ -181,6 +181,36 @@ function checkForBluetoothKeywords(inputEvent) {
   $('bluetooth-checkbox-container').hidden = !isRelatedToBluetooth;
 }
 
+/**
+ * Updates the description-text box based on whether it was valid.
+ * If invalid, indicate an error to the user. If valid, remove indication of the
+ * error.
+ */
+function updateDescription(wasValid) {
+  // Set visibility of the alert text for users who don't use a screen
+  // reader.
+  $('description-empty-error').hidden = wasValid;
+
+  // Change the textarea's aria-labelled by to ensure the screen reader does
+  // (or doesn't) read the error, as appropriate.
+  // If it does read the error, it should do so _before_ it reads the normal
+  // description.
+  const description = $('description-text');
+  description.setAttribute(
+      'aria-labelledby',
+      (wasValid ? '' : 'description-empty-error ') + 'free-form-text');
+  // Indicate whether input is valid.
+  description.setAttribute('aria-invalid', !wasValid);
+  if (!wasValid) {
+    // Return focus to field so user can correct error.
+    description.focus();
+  }
+
+  // We may have added or removed a line of text, so make sure the app window
+  // is the right size.
+  resizeAppWindow();
+}
+
 /**
  * Sends the report; after the report is sent, we need to be redirected to
  * the landing page, but we shouldn't be able to navigate back, hence
@@ -189,20 +219,13 @@ function checkForBluetoothKeywords(inputEvent) {
  */
 function sendReport() {
   if ($('description-text').value.length == 0) {
-    // Don't need to re-hide this or reset the aria label in the non-empty case
-    // because the report will always be sent if we get past this if statement.
-    $('description-empty-error').hidden = false;
-
-    // Return focus to the textarea but first change its aria-labelledby so that
-    // the screen reader reads the error first when describing it.
-    const description = $('description-text');
-    description.setAttribute('aria-labelledby', 'description-empty-error');
-    description.focus();
-
-    // We added a line of text, so make sure the app window is big enough.
-    resizeAppWindow();
+    updateDescription(false);
     return false;
   }
+  // This isn't strictly necessary, since if we get past this point we'll
+  // succeed, but for future-compatibility (and in case we later add more
+  // failure cases after this), re-hide the alert and reset the aria label.
+  updateDescription(true);
 
   // Prevent double clicking from sending additional reports.
   $('send-report-button').disabled = true;