Split spoken feedback up on a per format rule basis.

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

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Provides output services for ChromeVox.
  */
 
 goog.provide('Output');
 goog.provide('Output.EventType');
@@ skipping 28 matching lines @@
  * @ prefix: used to substitute a message. Note the ability to specify params to
  *     the message.  For example, '@tag_html' '@selected_index($text_sel_start,
  *     $text_sel_end').
  * = suffix: used to specify substitution only if not previously appended.
  *     For example, $name= would insert the name attribute only if no name
  * attribute had been inserted previously.
  * @constructor
  */
 Output = function() {
   // TODO(dtseng): Include braille specific rules.
-  /** @type {!cvox.Spannable} */
-  this.buffer_ = new cvox.Spannable();
-  /** @type {!cvox.Spannable} */
-  this.brailleBuffer_ = new cvox.Spannable();
+  /** @type {!Array<cvox.Spannable>} */
+  this.buffer_ = [];
+  /** @type {!Array<cvox.Spannable>} */
+  this.brailleBuffer_ = [];
   /** @type {!Array<Object>} */
   this.locations_ = [];
   /** @type {function()} */
   this.speechStartCallback_;
   /** @type {function()} */
   this.speechEndCallback_;
 
   /**
    * Current global options.
    * @type {{speech: boolean, braille: boolean, location: boolean}}
@@ skipping 20 matching lines @@
  */
 Output.ROLE_INFO_ = {
   alert: {
     msgId: 'aria_role_alert',
     earcon: 'ALERT_NONMODAL',
   },
   button: {
     msgId: 'tag_button',
     earcon: 'BUTTON'
   },
-  checkbox: {
+  checkBox: {
     msgId: 'input_type_checkbox'
   },
+  dialog: {
+    msgId: 'dialog'
+  },
   heading: {
     msgId: 'aria_role_heading',
   },
   link: {
     msgId: 'tag_link',
     earcon: 'LINK'
   },
   listItem: {
     msgId: 'ARIA_ROLE_LISTITEM',
     earcon: 'list_item'
@@ skipping 14 matching lines @@
   textField: {
     msgId: 'input_type_text',
     earcon: 'EDITABLE_TEXT'
   },
   toolbar: {
     msgId: 'aria_role_toolbar'
   }
 };
 
 /**
+ * Metadata about supported automation states.

[dmazzoni, 2015/04/13 22:56:52]

To clarify, this will eventually include other states like selected, etc?

[David Tseng, 2015/04/15 17:58:35]

Yes; that's right.

+ * @const {!Object<string,
+ *           {on: {msgId: string, earconId: string},
+ *            off: {msgId: string, earconId: string}}>}
+ * @private
+ */
+Output.STATE_INFO_ = {
+  checked: {
+    on: {
+      earconId: 'CHECK_ON',
+      msgId: 'checkbox_checked_state'
+    },
+    off: {
+      earconId: 'CHECK_OFF',
+      msgId: 'checkbox_unchecked_state'
+    }
+  }
+};
+
+/**
  * Rules specifying format of AutomationNodes for output.
  * @type {!Object<string, Object<string, Object<string, string>>>}
  */
 Output.RULES = {
   navigate: {
     'default': {
       speak: '$name $value $role',
       braille: ''
     },
     alert: {
-      speak: '!doNotInterrupt ' +
-          '@aria_role_alert $name $earcon(ALERT_NONMODAL) $descendants'
+      speak: '!doNotInterrupt $role $descendants'
     },
     checkBox: {
-      speak: '$if($checked, @describe_checkbox_checked($name), ' +
-          '@describe_checkbox_unchecked($name)) ' +
-          '$if($checked, ' +
-              '$earcon(CHECK_ON, @input_type_checkbox), ' +
-              '$earcon(CHECK_OFF, @input_type_checkbox))'
+      speak: '$name $role $checked'
     },
     dialog: {
       enter: '$name $role'
     },
     heading: {
       enter: '@aria_role_heading',
       speak: '@aria_role_heading $name='
     },
     inlineTextBox: {
       speak: '$value='
     },
     link: {
-      enter: '$name= $visited $earcon(LINK, @tag_link)=',
-      stay: '$name= $visited @tag_link',
-      speak: '$name= $visited $earcon(LINK, @tag_link)='
+      enter: '$name $visited $role',
+      stay: '$name= $visited $role',
+      speak: '$name= $visited $role'
     },
     list: {
       enter: '@aria_role_list @list_with_items($parentChildCount)'
     },
     listItem: {
       enter: '$role'
     },
     menuItem: {
       speak: '$if($haspopup, @describe_menu_item_with_submenu($name), ' +
           '@describe_menu_item($name)) ' +
           '@describe_index($indexInParent, $parentChildCount)'
     },
     menuListOption: {
       speak: '$name $value @aria_role_menuitem ' +
           '@describe_index($indexInParent, $parentChildCount)'
     },
     paragraph: {
       speak: '$value'
     },
     popUpButton: {
-      speak: '$value $name @tag_button @aria_has_popup $earcon(LISTBOX) ' +
+      speak: '$value $name $role @aria_has_popup ' +
           '$if($collapsed, @aria_expanded_false, @aria_expanded_true)'
     },
     radioButton: {
       speak: '$if($checked, @describe_radio_selected($name), ' +
-          '@describe_radio_unselected($name)) ' +
-          '$if($checked, ' +
-              '$earcon(CHECK_ON, @input_type_radio), ' +
-              '$earcon(CHECK_OFF, @input_type_radio))'
+          '@describe_radio_unselected($name))'
     },
     slider: {
       speak: '@describe_slider($value, $name)'
     },
     staticText: {
       speak: '$value $name'
     },
     tab: {
       speak: '@describe_tab($name)'
     },
     toolbar: {
       enter: '$name $role'
     },
     window: {
       enter: '$name',
       speak: '@describe_window($name) $earcon(OBJECT_OPEN)'
     }
   },
   menuStart: {
     'default': {
-      speak: '@chrome_menu_opened($name) $role $earcon(OBJECT_OPEN)'
+      speak: '@chrome_menu_opened($name)  $earcon(OBJECT_OPEN)'
     }
   },
   menuEnd: {
     'default': {
-      speak: '$earcon(OBJECT_CLOSE)'
+      speak: '@chrome_menu_closed $earcon(OBJECT_CLOSE)'
     }
   },
   menuListValueChanged: {
     'default': {
       speak: '$value $name ' +
           '$find({"state": {"selected": true, "invisible": false}}, ' +
               '@describe_index($indexInParent, $parentChildCount)) '
     }
   },
   alert: {
     default: {
       speak: '!doNotInterrupt ' +
           '@aria_role_alert $name $earcon(ALERT_NONMODAL) $descendants'
     }
   }
 };
 
 /**
- * Alias equivalent attributes.
- * @type {!Object<string, string>}
- */
-Output.ATTRIBUTE_ALIAS = {
-  name: 'value',
-  value: 'name'
-};
-
-/**
  * Custom actions performed while rendering an output string.
  * @param {function()} action
  * @constructor
  */
 Output.Action = function(action) {
   this.action_ = action;
 };
 
 Output.Action.prototype = {
   run: function() {
     this.action_();
   }
 };
 
 /**
+ * Action to play a earcon.
+ * @param {string} earconId
+ * @constructor
+ * @extends {Output.Action}
+ */
+Output.EarconAction = function(earconId) {
+  Output.Action.call(this, function() {
+    cvox.ChromeVox.earcons.playEarcon(
+        cvox.AbstractEarcons[earconId]);
+  });
+};
+
+Output.EarconAction.prototype = {
+  __proto__: Output.Action.prototype
+};
+
+/**
  * Annotation for selection.
  * @param {number} startIndex
  * @param {number} endIndex
  * @constructor
  */
 Output.SelectionSpan = function(startIndex, endIndex) {
   // TODO(dtseng): Direction lost below; should preserve for braille panning.
   this.startIndex = startIndex < endIndex ? startIndex : endIndex;
   this.endIndex = endIndex > startIndex ? endIndex : startIndex;
 };
 
 /**
  * Possible events handled by ChromeVox internally.
  * @enum {string}
  */
 Output.EventType = {
   NAVIGATE: 'navigate'
 };
 
 Output.prototype = {
   /**
    * Gets the output buffer for speech.
    * @return {!cvox.Spannable}
    */
-  getBuffer: function() {
-    return this.buffer_;
+  toSpannable: function() {
+    return this.buffer_.reduce(function(prev, cur) {
+      prev.append(cur);
+      return prev;
+    }, new cvox.Spannable());
   },
 
   /**
    * Specify ranges for speech.
    * @param {!cursors.Range} range
    * @param {cursors.Range} prevRange
    * @param {chrome.automation.EventType|Output.EventType} type
    * @return {!Output}
    */
   withSpeech: function(range, prevRange, type) {
@@ skipping 60 matching lines @@
   onSpeechEnd: function(callback) {
     this.speechEndCallback_ = callback;
     return this;
   },
 
   /**
    * Executes all specified output.
    */
   go: function() {
     // Speech.
-    var buff = this.buffer_;
-    if (buff.toString()) {
-      if (this.speechStartCallback_)
-        this.speechProperties_['startCallback'] = this.speechStartCallback_;
-      if (this.speechEndCallback_) {
-        this.speechProperties_['endCallback'] = this.speechEndCallback_;
+    var queueMode = cvox.QueueMode.FLUSH;
+    this.buffer_.forEach(function(buff) {
+      if (buff.toString()) {
+        if (this.speechStartCallback_)
+          this.speechProperties_['startCallback'] = this.speechStartCallback_;

[dmazzoni, 2015/04/13 22:56:52]

It seems to me like this will execute the start and end callbacks once for each
buffer in the list, is that what you intended? I think it should execute the
start callback only once for the first buffer, and the end one only once for the
last buffer.

[David Tseng, 2015/04/15 18:00:51]

Done.

+        else
+          this.speechProperties_['startCallback'] = null;
+        if (this.speechEndCallback_)
+          this.speechProperties_['endCallback'] = this.speechEndCallback_;
+        else
+          this.speechProperties_['endCallback'] = null;
+        cvox.ChromeVox.tts.speak(
+            buff.toString(), queueMode, this.speechProperties_);
+        queueMode = cvox.QueueMode.QUEUE;
       }
-
-      cvox.ChromeVox.tts.speak(
-          buff.toString(), cvox.QueueMode.FLUSH, this.speechProperties_);
-    }
-
-    var actions = buff.getSpansInstanceOf(Output.Action);
-    if (actions) {
-      actions.forEach(function(a) {
-        a.run();
-      });
-    }
+      var actions = buff.getSpansInstanceOf(Output.Action);
+      if (actions) {
+        actions.forEach(function(a) {
+          a.run();
+        });
+      }
+    }.bind(this));
 
     // Braille.
+    var buff = this.brailleBuffer_.reduce(function(prev, cur) {
+      if (prev.getLength() > 0 && cur.getLength() > 0)
+        prev.append(Output.SPACE);
+      prev.append(cur);
+      return prev;
+    }, new cvox.Spannable());
+
     var selSpan =
-        this.brailleBuffer_.getSpanInstanceOf(Output.SelectionSpan);
+        buff.getSpanInstanceOf(Output.SelectionSpan);
     var startIndex = -1, endIndex = -1;
     if (selSpan) {
       // Casts ok, since the span is known to be in the spannable.
       var valueStart =
-          /** @type {number} */ (this.brailleBuffer_.getSpanStart(selSpan));
+          /** @type {number} */ (buff.getSpanStart(selSpan));
       var valueEnd =
-          /** @type {number} */ (this.brailleBuffer_.getSpanEnd(selSpan));
+          /** @type {number} */ (buff.getSpanEnd(selSpan));
       startIndex = valueStart + selSpan.startIndex;
       endIndex = valueStart + selSpan.endIndex;
-      this.brailleBuffer_.setSpan(new cvox.ValueSpan(0),
+        buff.setSpan(new cvox.ValueSpan(0),
                                   valueStart, valueEnd);
-      this.brailleBuffer_.setSpan(new cvox.ValueSelectionSpan(),
+      buff.setSpan(new cvox.ValueSelectionSpan(),
                                   startIndex, endIndex);
     }
 
     var output = new cvox.NavBraille({
-      text: this.brailleBuffer_,
+      text: buff,
       startIndex: startIndex,
       endIndex: endIndex
     });
 
     if (this.brailleBuffer_)
       cvox.ChromeVox.braille.write(output);
 
     // Display.
     chrome.accessibilityPrivate.setFocusRing(this.locations_);
   },
 
   /**
    * Renders the given range using optional context previous range and event
    * type.
    * @param {!cursors.Range} range
    * @param {cursors.Range} prevRange
    * @param {chrome.automation.EventType|string} type
-   * @param {!cvox.Spannable} buff Buffer to receive rendered output.
+   * @param {!Array<cvox.Spannable>} buff Buffer to receive rendered output.
    * @private
    */
   render_: function(range, prevRange, type, buff) {
     if (range.isSubNode())
       this.subNode_(range, prevRange, type, buff);
     else
       this.range_(range, prevRange, type, buff);
   },
 
   /**
    * Format the node given the format specifier.
    * @param {chrome.automation.AutomationNode} node
    * @param {string|!Object} format The output format either specified as an
    * output template string or a parsed output format tree.
-   * @param {!cvox.Spannable} buff Buffer to receive rendered output.
+   * @param {!Array<cvox.Spannable>} buff Buffer to receive rendered output.
    * @param {!Object=} opt_exclude A set of attributes to exclude.
    * @private
    */
   format_: function(node, format, buff, opt_exclude) {
     opt_exclude = opt_exclude || {};
     var tokens = [];
     var args = null;
 
     // Hacky way to support args.
     if (typeof(format) == 'string') {
@@ skipping 13 matching lines @@
       if (typeof(token) == 'string')
         tree = this.createParseTree(token);
       else
         tree = token;
 
       // Obtain the operator token.
       token = tree.value;
 
       // Set suffix options.
       var options = {};
-      options.ifEmpty = token[token.length - 1] == '=';
-      if (options.ifEmpty)
+      options.annotation = [];
+      options.isUnique = token[token.length - 1] == '=';
+      if (options.isUnique)
         token = token.substring(0, token.length - 1);
 
       // Process token based on prefix.
       var prefix = token[0];
       token = token.slice(1);
 
       if (opt_exclude[token])
         return;
 
       // All possible tokens based on prefix.
       if (prefix == '$') {
-        options.annotation = token;
         if (token == 'value') {
           var text = node.attributes.value;
           if (text !== undefined) {
-            var offset = buff.getLength();
             if (node.attributes.textSelStart !== undefined) {
-              options.annotation = new Output.SelectionSpan(
+              options.annotation.push(new Output.SelectionSpan(
                   node.attributes.textSelStart,
-                  node.attributes.textSelEnd);
+                  node.attributes.textSelEnd));
             }
-          } else if (node.role == chrome.automation.RoleType.staticText) {
-            // TODO(dtseng): Remove once Blink treats staticText values as
-            // names.
-            text = node.attributes.name;
           }
-          this.addToSpannable_(buff, text, options);
+          // Annotate this as a name so we don't duplicate names from ancestors.
+          if (node.role == chrome.automation.RoleType.inlineTextBox)
+            token = 'name';
+          options.annotation.push(token);
+          this.append_(buff, text, options);
         } else if (token == 'indexInParent') {
-          this.addToSpannable_(buff, node.indexInParent + 1);
+          options.annotation.push(token);
+          this.append_(buff, node.indexInParent + 1);
         } else if (token == 'parentChildCount') {
+          options.annotation.push(token);
           if (node.parent)
-          this.addToSpannable_(buff, node.parent.children.length);
+          this.append_(buff, node.parent.children.length);
         } else if (token == 'state') {
+          options.annotation.push(token);
           Object.getOwnPropertyNames(node.state).forEach(function(s) {
-            this.addToSpannable_(buff, s, options);
+            this.append_(buff, s, options);
           }.bind(this));
         } else if (token == 'find') {
           // Find takes two arguments: JSON query string and format string.
           if (tree.firstChild) {
             var jsonQuery = tree.firstChild.value;
             node = node.find(
                 /** @type {Object}*/(JSON.parse(jsonQuery)));
             var formatString = tree.firstChild.nextSibling;
             if (node)
               this.format_(node, formatString, buff);
           }
         } else if (token == 'descendants') {
           if (AutomationPredicate.leaf(node))
             return;
 
           // Construct a range to the leftmost and rightmost leaves.
           var leftmost = AutomationUtil.findNodePre(
               node, Dir.FORWARD, AutomationPredicate.leaf);
           var rightmost = AutomationUtil.findNodePre(
               node, Dir.BACKWARD, AutomationPredicate.leaf);
           if (!leftmost || !rightmost)
             return;
 
           var subrange = new cursors.Range(
               new cursors.Cursor(leftmost, 0),
               new cursors.Cursor(rightmost, 0));
           this.range_(subrange, null, 'navigate', buff);
         } else if (token == 'role') {
+          options.annotation.push(token);
           var msg = node.role;
           var earconId = null;
           var info = Output.ROLE_INFO_[node.role];
           if (info) {
             if (this.formatOptions_.braille)
               msg = cvox.ChromeVox.msgs.getMsg(info.msgId + '_brl');
             else
               msg = cvox.ChromeVox.msgs.getMsg(info.msgId);
             earconId = info.earcon;
           } else {
             console.error('Missing role info for ' + node.role);
           }
-          if (earconId) {
-            options.annotation = new Output.Action(function() {
-              cvox.ChromeVox.earcons.playEarcon(
-                  cvox.AbstractEarcons[earconId]);
-            });
-          }
-          this.addToSpannable_(buff, msg, options);
-        } else if (node.attributes[token]) {
-          this.addToSpannable_(buff, node.attributes[token], options);
-        } else if (node.state[token]) {
-          this.addToSpannable_(buff, token, options);
+          if (earconId)
+            options.annotation.push(new Output.EarconAction(earconId));
+          this.append_(buff, msg, options);
+        } else if (node.attributes[token] !== undefined) {
+          options.annotation.push(token);
+          this.append_(buff, node.attributes[token], options);
+        } else if (Output.STATE_INFO_[token]) {
+          options.annotation.push('state');
+          var stateInfo = Output.STATE_INFO_[token];
+          var resolvedInfo = node.state[token] ? stateInfo.on : stateInfo.off;
+          options.annotation.push(
+              new Output.EarconAction(resolvedInfo.earconId));
+          var msgId =
+              this.formatOptions_.braille ? resolvedInfo.msgId + '_brl' :
+              resolvedInfo.msgId;
+          var msg = cvox.ChromeVox.msgs.getMsg(msgId);
+          this.append_(buff, msg, options);
         } else if (tree.firstChild) {
           // Custom functions.
           if (token == 'if') {
             var cond = tree.firstChild;
             var attrib = cond.value.slice(1);
             if (node.attributes[attrib] || node.state[attrib])
               this.format_(node, cond.nextSibling, buff);
             else
               this.format_(node, cond.nextSibling.nextSibling, buff);
           } else if (token == 'earcon') {
-            var contentBuff = new cvox.Spannable();
-            if (tree.firstChild.nextSibling)
-              this.format_(node, tree.firstChild.nextSibling, contentBuff);
-            options.annotation = new Output.Action(function() {
-              cvox.ChromeVox.earcons.playEarcon(
-                  cvox.AbstractEarcons[tree.firstChild.value]);
-            });
-            this.addToSpannable_(buff, contentBuff, options);
+            // Assumes there's existing output in our buffer.
+            var lastBuff = buff[buff.length - 1];
+            if (!lastBuff)
+              return;
+
+            lastBuff.setSpan(
+                new Output.EarconAction(tree.firstChild.value), 0, 0);
           }
         }
       } else if (prefix == '@') {
         var msgId = token;
         var msgArgs = [];
         var curMsg = tree.firstChild;
 
         while (curMsg) {
           var arg = curMsg.value;
           if (arg[0] != '$') {
             console.error('Unexpected value: ' + arg);
             return;
           }
-          var msgBuff = new cvox.Spannable();
+          var msgBuff = [];
           this.format_(node, arg, msgBuff);
-          msgArgs.push(msgBuff.toString());
+          msgArgs = msgArgs.concat(msgBuff);
           curMsg = curMsg.nextSibling;
         }
           var msg = cvox.ChromeVox.msgs.getMsg(msgId, msgArgs);
         try {
           if (this.formatOptions_.braille)
             msg = cvox.ChromeVox.msgs.getMsg(msgId + '_brl', msgArgs) || msg;
         } catch(e) {}
 
         if (msg) {
-          this.addToSpannable_(buff, msg, options);
+          this.append_(buff, msg, options);
         }
       } else if (prefix == '!') {
         this.speechProperties_[token] = true;
       }
     }.bind(this));
   },
 
   /**
    * @param {!cursors.Range} range
    * @param {cursors.Range} prevRange
    * @param {chrome.automation.EventType|string} type
-   * @param {!cvox.Spannable} rangeBuff
+   * @param {!Array<cvox.Spannable>} rangeBuff
    * @private
    */
   range_: function(range, prevRange, type, rangeBuff) {
     if (!prevRange)
       prevRange = cursors.Range.fromNode(range.getStart().getNode().root);
 
     var cursor = range.getStart();
     var prevNode = prevRange.getStart().getNode();
 
     var formatNodeAndAncestors = function(node, prevNode) {
-      var buff = new cvox.Spannable();
+      var buff = [];
       this.ancestry_(node, prevNode, type, buff);
       this.node_(node, prevNode, type, buff);
       if (this.formatOptions_.location)
         this.locations_.push(node.location);
       return buff;
     }.bind(this);
 
     while (cursor.getNode() != range.getEnd().getNode()) {
       var node = cursor.getNode();
-      this.addToSpannable_(
-          rangeBuff, formatNodeAndAncestors(node, prevNode));
+        rangeBuff.push.apply(rangeBuff, formatNodeAndAncestors(node, prevNode));
       prevNode = node;
       cursor = cursor.move(cursors.Unit.NODE,
                            cursors.Movement.DIRECTIONAL,
                            Dir.FORWARD);
     }
     var lastNode = range.getEnd().getNode();
-    this.addToSpannable_(rangeBuff, formatNodeAndAncestors(lastNode, prevNode));
+    rangeBuff.push.apply(rangeBuff, formatNodeAndAncestors(lastNode, prevNode));
   },
 
   /**
    * @param {!chrome.automation.AutomationNode} node
    * @param {!chrome.automation.AutomationNode} prevNode
    * @param {chrome.automation.EventType|string} type
-   * @param {!cvox.Spannable} buff
+   * @param {!Array<cvox.Spannable>} buff
    * @param {!Object=} opt_exclude A list of attributes to exclude from
    * processing.
    * @private
    */
   ancestry_: function(node, prevNode, type, buff, opt_exclude) {
     opt_exclude = opt_exclude || {};
     var prevUniqueAncestors =
         AutomationUtil.getUniqueAncestors(node, prevNode);
     var uniqueAncestors = AutomationUtil.getUniqueAncestors(prevNode, node);
 
     // First, look up the event type's format block.
     // Navigate is the default event.
     var eventBlock = Output.RULES[type] || Output.RULES['navigate'];
 
     for (var i = 0, formatPrevNode;
          (formatPrevNode = prevUniqueAncestors[i]);
          i++) {
       var roleBlock = eventBlock[formatPrevNode.role] || eventBlock['default'];
       if (roleBlock.leave)
         this.format_(formatPrevNode, roleBlock.leave, buff, opt_exclude);
     }
 
-    var enterOutput = [];
+    var enterOutputs = [];
     var enterRole = {};
     for (var j = uniqueAncestors.length - 2, formatNode;
          (formatNode = uniqueAncestors[j]);
          j--) {
       var roleBlock = eventBlock[formatNode.role] || eventBlock['default'];
       if (roleBlock.enter) {
         if (enterRole[formatNode.role])
           continue;
         enterRole[formatNode.role] = true;
-        var tempBuff = new cvox.Spannable('');
+        var tempBuff = [];
         this.format_(formatNode, roleBlock.enter, tempBuff, opt_exclude);
-        enterOutput.unshift(tempBuff);
+        enterOutputs.unshift(tempBuff);
       }
+        if (formatNode.role == 'window')
+            break;
     }
-    enterOutput.forEach(function(c) {
-      this.addToSpannable_(buff, c);
-    }.bind(this));
+    enterOutputs.forEach(function(b) {
+      buff.push.apply(buff, b);
+    });
 
     if (!opt_exclude.stay) {
       var commonFormatNode = uniqueAncestors[0];
       while (commonFormatNode && commonFormatNode.parent) {
         commonFormatNode = commonFormatNode.parent;
         var roleBlock =
             eventBlock[commonFormatNode.role] || eventBlock['default'];
         if (roleBlock.stay)
           this.format_(commonFormatNode, roleBlock.stay, buff, opt_exclude);
       }
     }
   },
 
   /**
    * @param {!chrome.automation.AutomationNode} node
    * @param {!chrome.automation.AutomationNode} prevNode
    * @param {chrome.automation.EventType|string} type
-   * @param {!cvox.Spannable} buff
+   * @param {!Array<cvox.Spannable>} buff
    * @private
    */
   node_: function(node, prevNode, type, buff) {
     // Navigate is the default event.
     var eventBlock = Output.RULES[type] || Output.RULES['navigate'];
     var roleBlock = eventBlock[node.role] || eventBlock['default'];
     var speakFormat = roleBlock.speak || eventBlock['default'].speak;
     this.format_(node, speakFormat, buff);
   },
 
   /**
    * @param {!cursors.Range} range
    * @param {cursors.Range} prevRange
    * @param {chrome.automation.EventType|string} type
-   * @param {!cvox.Spannable} buff
+   * @param {!Array<cvox.Spannable>} buff
    * @private
    */
   subNode_: function(range, prevRange, type, buff) {
     if (!prevRange)
       prevRange = range;
     var dir = cursors.Range.getDirection(prevRange, range);
     var prevNode = prevRange.getBound(dir).getNode();
     this.ancestry_(
         range.getStart().getNode(), prevNode, type, buff,
         {stay: true, name: true, value: true});
     var startIndex = range.getStart().getIndex();
     var endIndex = range.getEnd().getIndex();
     if (startIndex === endIndex)
       endIndex++;
-    this.addToSpannable_(
+    this.append_(
         buff, range.getStart().getText().substring(startIndex, endIndex));
   },
 
   /**
-   * Adds to the given buffer with proper delimiters added.
-   * @param {!cvox.Spannable} spannable
+   * Appends output to the |buff|.
+   * @param {!Array<cvox.Spannable>} buff
    * @param {string|!cvox.Spannable} value
-   * @param {{ifEmpty: boolean,
-   *      annotation: (string|Output.Action|undefined)}=} opt_options
+   * @param {{isUnique: (boolean|undefined),
+   *      annotation: !Array<*>}=} opt_options
    */
-  addToSpannable_: function(spannable, value, opt_options) {
-    opt_options = opt_options || {ifEmpty: false, annotation: undefined};
-    if ((!value || value.length == 0) && !opt_options.annotation)
+  append_: function(buff, value, opt_options) {
+    opt_options = opt_options || {isUnique: false, annotation: []};
+
+    // Reject empty values without annotations.
+    if ((!value || value.length == 0) && opt_options.annotation.length == 0)
       return;
 
-    var spannableToAdd = new cvox.Spannable(value, opt_options.annotation);
-    if (spannable.getLength() == 0) {
-      spannable.append(spannableToAdd);
+    var spannableToAdd = new cvox.Spannable(value);
+    opt_options.annotation.forEach(function(a) {
+      spannableToAdd.setSpan(a, 0, spannableToAdd.getLength());
+    });
+
+    // Early return if the buffer is empty.
+    if (buff.length == 0) {
+      buff.push(spannableToAdd);
       return;
     }
 
-    if (opt_options.ifEmpty &&
-        opt_options.annotation &&
-        (spannable.getSpanStart(opt_options.annotation) != undefined ||
-            spannable.getSpanStart(
-                Output.ATTRIBUTE_ALIAS[opt_options.annotation]) != undefined))
-      return;
+    // |isUnique| specifies an annotation that cannot be duplicated.
+    if (opt_options.isUnique) {
+      var alreadyAnnotated = buff.some(function(s) {
+        return opt_options.annotation.some(function(annotation) {
+          return s.getSpanStart(annotation) != undefined;
+        });
+      });
+      if (alreadyAnnotated)
+        return;
+    }
 
-    var prefixed = new cvox.Spannable(Output.SPACE);
-    prefixed.append(spannableToAdd);
-    spannable.append(prefixed);
+    buff.push(spannableToAdd);
   },
 
   /**
    * Parses the token containing a custom function and returns a tree.
    * @param {string} inputStr
    * @return {Object}
    */
   createParseTree: function(inputStr) {
     var root = {value: ''};
     var currentNode = root;
@@ skipping 23 matching lines @@
     }
 
     if (currentNode != root)
       throw 'Unbalanced parenthesis.';
 
     return root;
   }
 };
 
 });  // goog.scope