WebUI: add announcement for <cr-toast> when shown

Add optional text and shouldAnnounceA11y boolean params to show() method to be able to show text and announce a11y

Bug: 1033660
Change-Id: I484afd8158d04d33d55592d21dc621bdb7f55221
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2144427
Commit-Queue: Yuheng Huang <yuhengh@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#760174}

chrome/test/data/webui/cr_elements/cr_toast_test.js

@@ -133,4 +133,14 @@ suite('cr-toast', function() {
     mockTimer.tick(duration);
     assertFalse(toast.open);
   });
+
+  test('setting text', function() {
+    const duration = 100;
+    const text = 'foo';
+    assertEquals('', toast.textContent);
+    toast.show(undefined, text);
+    assertEquals(text, toast.textContent);
+    toast.show(duration);
+    assertEquals(text, toast.textContent);
+  });
 });

ui/webui/resources/cr_elements/cr_toast/cr_toast.html

 <link rel="import" href="../../html/polymer.html">
 
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="../shared_vars_css.html">
 

ui/webui/resources/cr_elements/cr_toast/cr_toast.js

@@ -46,6 +46,15 @@ Polymer({
     }
   },
 
+  /**
+   * Announce a11y message
+   * @param {string} text
+   */
+  announceA11yMessage_(text) {
+    Polymer.IronA11yAnnouncer.requestAvailability();
+    this.fire('iron-announce', { text });
+  },
+
   /**
    * Shows the toast and auto-hides after |this.duration| milliseconds has
    * passed. If the toast is currently being shown, any preexisting auto-hide
@@ -56,9 +65,26 @@ Polymer({
    *
    * When |duration| is passed in the non-negative number, |this.duration|
    * is updated to that value.
+   *
+   * If text is set, replace the toast content with text,
+   * can also optionally announce a11y with text
+   *
    * @param {number=} duration
+   * @param {string=} text
+   * @param {boolean=} shouldAnnounceA11y
    */
-  show(duration) {
+  show(duration, text, shouldAnnounceA11y) {
+    if (text !== undefined) {
+      this.textContent = '';
+      const span = document.createElement('span');
+      span.textContent = text;
+      this.appendChild(span);
+
+      if (shouldAnnounceA11y) {
+        this.announceA11yMessage_(text);
+      }
+    }
+
     // |this.resetAutoHide_| is called whenever |this.duration| or |this.open|
     // is changed. If neither is changed, we will still need to reset auto-hide.
     let shouldResetAutoHide = true;