feedback: Use aria alert for empty textarea.

When the user does not input any text in the free-form text box, we
bring them back to it and don't let them send the report. However, right
now we do this without signaling an alert to screen readers. Add an aria
alert outside of the textbox to signal this.

Also, update the text of the alert.

BUG=chromium:1107656
TEST=deploy, enable chromevox, click "Send" with empty textarea, verify\
     that alert text is read and focus is returned to textarea

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

chrome/app/generated_resources.grd

@@ -6374,7 +6374,7 @@ the Bookmarks menu.">
           Go to the <ph name="BEGIN_LINK1">&lt;a href="#" id="legal-help-page-url"&gt;</ph>Legal Help page<ph name="END_LINK1">&lt;/a&gt;</ph> to request content changes for legal reasons.  Some account and system information may be sent to Google.  We will use the information you give us to help address technical issues and to improve our services, subject to our <ph name="BEGIN_LINK2">&lt;a href="#" id="privacy-policy-url"&gt;</ph>Privacy Policy<ph name="END_LINK2">&lt;/a&gt;</ph> and <ph name="BEGIN_LINK3">&lt;a href="#" id="terms-of-service-url"&gt;</ph>Terms of Service<ph name="END_LINK3">&lt;/a&gt;</ph>.
         </message>
         <message name="IDS_FEEDBACK_NO_DESCRIPTION" desc="Message shown when no text is entered before hitting send feedback">
-          Please tell us what is happening before sending the feedback.
+          Please describe the problem before sending feedback.
         </message>
         <message name="IDS_FEEDBACK_SEND_REPORT" desc="Text for OK button of the send feedback dialog">
           Send

chrome/app/generated_resources_grd/IDS_FEEDBACK_NO_DESCRIPTION.png.sha1

+bcc758c32866264f6414228faa6ffdb96a5150a6
\ No newline at end of file

chrome/browser/resources/feedback/css/feedback.css

@@ -97,6 +97,11 @@ body {
   margin-inline-end: 9px;
 }
 
+.content .description-empty-notification {
+  color: rgb(204, 0, 0);
+  font-weight: bold;
+}
+
 .content .checkbox-field-container {
   -webkit-align-items: center;
   display: -webkit-flex;

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

@@ -32,6 +32,8 @@
   <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>
     <div>
       <p id="additional-info-label" i18n-content="additionalInfo"><p>
     </div>

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

@@ -189,9 +189,18 @@ 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.placeholder = loadTimeData.getString('noDescription');
+    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();
     return false;
   }