Implement support for <audio> in ChromeVox Next.

- pick up the decsription attribute in buttons
- add the help attribute in sliders

TEST=chromevox_tests --gtest_filter=OutputE2ETest.Audio

Review URL: https://codereview.chromium.org/1099023005

Cr-Commit-Position: refs/heads/master@{#326841}

chrome/browser/resources/chromeos/chromevox/cvox2/background/automation_predicate.js

@@ -57,6 +57,7 @@ AutomationPredicate.link =
 AutomationPredicate.leaf = function(node) {
   return !node.firstChild ||
       node.role == chrome.automation.RoleType.button ||
+      node.role == chrome.automation.RoleType.slider ||
       node.children.every(function(n) {
         return n.state.invisible;
       });

chrome/browser/resources/chromeos/chromevox/cvox2/background/output.js

@@ -156,7 +156,7 @@ Output.STATE_INFO_ = {
 Output.RULES = {
   navigate: {
     'default': {
-      speak: '$name $value $role',
+      speak: '$name $value $description $role',
       braille: ''
     },
     alert: {
@@ -207,7 +207,7 @@ Output.RULES = {
           '@describe_radio_unselected($name))'
     },
     slider: {
-      speak: '@describe_slider($value, $name)'
+      speak: '@describe_slider($value, $name) $help'
     },
     staticText: {
       speak: '$value $name'
@@ -303,13 +303,26 @@ Output.EventType = {
 Output.prototype = {
   /**
    * Gets the output buffer for speech.
+   * @param {string=} opt_separator Used to join components of the output.
    * @return {!cvox.Spannable}
    */
-  toSpannable: function() {
+  toSpannable: function(opt_separator) {
+    opt_separator = opt_separator || '';
     return this.buffer_.reduce(function(prev, cur) {
+      if (prev === null)
+        return cur;
+      prev.append(opt_separator);
       prev.append(cur);
       return prev;
-    }, new cvox.Spannable());
+    }, null);
+  },
+
+  /**
+   * Gets the output buffer for speech with separator '|'.
+   * @return {!cvox.Spannable}
+   */
+  toSpannableForTest: function() {
+    return this.toSpannable('|');
   },
 
   /**

chrome/browser/resources/chromeos/chromevox/cvox2/background/output_test.extjs

@@ -137,3 +137,34 @@ TEST_F('OutputE2ETest', 'Headings', function() {
       ]}, o.toSpannable());
   });
 });
+
+TEST_F('OutputE2ETest', 'Audio', function() {
+  this.runWithLoadedTree('<audio src="foo.mp3" controls></audio>',
+    function(root) {
+      var el = root.firstChild.firstChild.firstChild.firstChild;
+      var range = cursors.Range.fromNode(el);
+      var o = new Output().withSpeechAndBraille(range, null, 'navigate');
+      assertEqualsJSON({string_: 'media control|Tool bar|||play|Button',
+          spans_:
+              // Entered container toolbar.
+
+              // Button.
+              [{value: 'name', start: 23, end: 23},
+              {value: 'value', start: 24, end: 24},
+              {value: 'description', start: 25, end: 29},
+              {value: 'role', start: 30, end: 36},
+
+              // Button earcon.
+              {value: {}, start: 30, end: 36}]
+          }, o.toSpannableForTest());
+
+      el = el.nextSibling;
+      var prevRange = range;
+      range = cursors.Range.fromNode(el);
+      var o = new Output().withSpeechAndBraille(range, prevRange, 'navigate');
+      assertEqualsJSON({string_: '0, , slider|audio time scrubber',
+          spans_:
+              [{value: 'help', start: 12, end: 31}]
+          }, o.toSpannableForTest());
+  });
+});