BASELINE: Update Chromium to 55.0.2883.105

And updates ninja to 1.7.2

Change-Id: I20d43c737f82764d857ada9a55586901b18b9243
Reviewed-by: Michael Brüning <michael.bruning@qt.io>

16 files changed, 142 insertions, 115 deletions

diff --git a/chromium/ui/webui/resources/js/cr/ui/autocomplete_list.js b/chromium/ui/webui/resources/js/cr/ui/autocomplete_list.js
index b9515e44543..71e3e2fbce3 100644
--- a/chromium/ui/webui/resources/js/cr/ui/autocomplete_list.js
+++ b/chromium/ui/webui/resources/js/cr/ui/autocomplete_list.js
@@ -239,8 +239,8 @@ cr.define('cr.ui', function() {
       if (this.hidden)
         return;
       var handled = false;
-      switch (event.keyIdentifier) {
-        case 'U+001B':  // Esc
+      switch (event.key) {
+        case 'Escape':
           this.suggestions = [];
           handled = true;
           break;
@@ -250,11 +250,9 @@ cr.define('cr.ui', function() {
           // handle the event as well.
           this.handleEnterKeydown();
           break;
-        case 'Up':
-        case 'Down':
-          var newEvent = new Event(event.type);
-          newEvent.keyIdentifier = event.keyIdentifier;
-          this.dispatchEvent(newEvent);
+        case 'ArrowUp':
+        case 'ArrowDown':
+          this.dispatchEvent(new KeyboardEvent(event.type, event));
           handled = true;
           break;
       }
diff --git a/chromium/ui/webui/resources/js/cr/ui/command.js b/chromium/ui/webui/resources/js/cr/ui/command.js
index 8663a373bdf..ec967796e41 100644
--- a/chromium/ui/webui/resources/js/cr/ui/command.js
+++ b/chromium/ui/webui/resources/js/cr/ui/command.js
@@ -26,7 +26,7 @@ cr.define('cr.ui', function() {
   function KeyboardShortcut(shortcut) {
     var mods = {};
     var ident = '';
-    shortcut.split('-').forEach(function(part) {
+    shortcut.split('|').forEach(function(part) {
       var partLc = part.toLowerCase();
       switch (partLc) {
         case 'alt':
@@ -53,7 +53,7 @@ cr.define('cr.ui', function() {
      * @return {boolean} Whether we found a match or not.
      */
     matchesEvent: function(e) {
-      if (e.keyIdentifier == this.ident_) {
+      if (e.key == this.ident_) {
         // All keyboard modifiers needs to match.
         var mods = this.mods_;
         return ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'].every(function(k) {
@@ -114,17 +114,17 @@ cr.define('cr.ui', function() {
 
     /**
      * The keyboard shortcut that triggers the command. This is a string
-     * consisting of a keyIdentifier (as reported by WebKit in keydown) as
-     * well as optional key modifiers joinded with a '-'.
+     * consisting of a key (as reported by WebKit in keydown) as
+     * well as optional key modifiers joinded with a '|'.
      *
      * Multiple keyboard shortcuts can be provided by separating them by
      * whitespace.
      *
      * For example:
      *   "F1"
-     *   "U+0008-Meta" for Apple command backspace.
-     *   "U+0041-Ctrl" for Control A
-     *   "U+007F U+0008-Meta" for Delete and Command Backspace
+     *   "Backspace|Meta" for Apple command backspace.
+     *   "a|Ctrl" for Control A
+     *   "Delete Backspace|Meta" for Delete and Command Backspace
      *
      * @type {string}
      */
diff --git a/chromium/ui/webui/resources/js/cr/ui/compiled_resources2.gyp b/chromium/ui/webui/resources/js/cr/ui/compiled_resources2.gyp
index 1bc7c7fcb1e..afb4b273963 100644
--- a/chromium/ui/webui/resources/js/cr/ui/compiled_resources2.gyp
+++ b/chromium/ui/webui/resources/js/cr/ui/compiled_resources2.gyp
@@ -20,6 +20,14 @@
       'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
     {
+      'target_name': 'drag_wrapper',
+      'dependencies': [
+        '../../compiled_resources2.gyp:assert',
+        '../../compiled_resources2.gyp:cr',
+      ],
+      'includes': ['../../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'focus_grid',
       'dependencies': [
         '../../compiled_resources2.gyp:assert',
diff --git a/chromium/ui/webui/resources/js/cr/ui/context_menu_handler.js b/chromium/ui/webui/resources/js/cr/ui/context_menu_handler.js
index 0c9bb7ad9d1..7a48736e36a 100644
--- a/chromium/ui/webui/resources/js/cr/ui/context_menu_handler.js
+++ b/chromium/ui/webui/resources/js/cr/ui/context_menu_handler.js
@@ -137,8 +137,7 @@ cr.define('cr.ui', function() {
         case 'keydown':
           this.keyIsDown_ = !e.ctrlKey && !e.altKey &&
               // context menu key or Shift-F10
-              (e.keyCode == 93 && !e.shiftKey ||
-               e.keyIdentifier == 'F10' && e.shiftKey);
+              (e.keyCode == 93 && !e.shiftKey || e.key == 'F10' && e.shiftKey);
           break;
 
         case 'keyup':
@@ -169,8 +168,7 @@ cr.define('cr.ui', function() {
           break;
 
         case 'keydown':
-          // keyIdentifier does not report 'Esc' correctly
-          if (e.keyCode == 27 /* Esc */) {
+          if (e.key == 'Escape') {
             this.hideMenu();
             e.stopPropagation();
             e.preventDefault();
diff --git a/chromium/ui/webui/resources/js/cr/ui/drag_wrapper.js b/chromium/ui/webui/resources/js/cr/ui/drag_wrapper.js
index fc83d788d42..c2b175369dc 100644
--- a/chromium/ui/webui/resources/js/cr/ui/drag_wrapper.js
+++ b/chromium/ui/webui/resources/js/cr/ui/drag_wrapper.js
@@ -8,22 +8,45 @@
  * handle the nitty gritty of nested drag enters and leaves.
  */
 cr.define('cr.ui', function() {
+  /** @interface */
+  var DragWrapperDelegate = function() {};
+
+  // TODO(devlin): The only method this "delegate" actually needs is
+  // shouldAcceptDrag(); the rest can be events emitted by the DragWrapper.
+  DragWrapperDelegate.prototype = {
+    /**
+     * @param {MouseEvent} e The event for the drag.
+     * @return {boolean} Whether the drag should be accepted. If false,
+     *     subsequent methods (doDrag*) will not be called.
+     */
+    shouldAcceptDrag: assertNotReached,
+
+    /** @param {MouseEvent} e */
+    doDragEnter: assertNotReached,
+
+    /** @param {MouseEvent} e */
+    doDragLeave: assertNotReached,
+
+    /** @param {MouseEvent} e */
+    doDragOver: assertNotReached,
+
+    /** @param {MouseEvent} e */
+    doDrop: assertNotReached,
+  };
+
   /**
    * Creates a DragWrapper which listens for drag target events on |target| and
-   * delegates event handling to |handler|. The |handler| must implement:
-   *   shouldAcceptDrag
-   *   doDragEnter
-   *   doDragLeave
-   *   doDragOver
-   *   doDrop
+   * delegates event handling to |delegate|.
+   * @param {!Element} target
+   * @param {!cr.ui.DragWrapperDelegate} delegate
    * @constructor
    */
-  function DragWrapper(target, handler) {
-    this.initialize(target, handler);
+  function DragWrapper(target, delegate) {
+    this.initialize(target, delegate);
   }
 
   DragWrapper.prototype = {
-    initialize: function(target, handler) {
+    initialize: function(target, delegate) {
       target.addEventListener('dragenter',
                               this.onDragEnter_.bind(this));
       target.addEventListener('dragover', this.onDragOver_.bind(this));
@@ -31,7 +54,7 @@ cr.define('cr.ui', function() {
       target.addEventListener('dragleave', this.onDragLeave_.bind(this));
 
       this.target_ = target;
-      this.handler_ = handler;
+      this.delegate_ = delegate;
     },
 
     /**
@@ -55,20 +78,20 @@ cr.define('cr.ui', function() {
     },
 
     /**
-     * Handler for dragenter events fired on |target_|.
-     * @param {Event} e A MouseEvent for the drag.
+     * Delegate for dragenter events fired on |target_|.
+     * @param {MouseEvent} e A MouseEvent for the drag.
      * @private
      */
     onDragEnter_: function(e) {
       if (++this.dragEnters_ == 1) {
-        if (this.handler_.shouldAcceptDrag(e)) {
+        if (this.delegate_.shouldAcceptDrag(e)) {
           this.target_.classList.add('drag-target');
-          this.handler_.doDragEnter(e);
+          this.delegate_.doDragEnter(e);
         }
       } else {
         // Sometimes we'll get an enter event over a child element without an
         // over event following it. In this case we have to still call the
-        // drag over handler so that we make the necessary updates (one visible
+        // drag over delegate so that we make the necessary updates (one visible
         // symptom of not doing this is that the cursor's drag state will
         // flicker during drags).
         this.onDragOver_(e);
@@ -83,7 +106,7 @@ cr.define('cr.ui', function() {
     onDragOver_: function(e) {
       if (!this.target_.classList.contains('drag-target'))
         return;
-      this.handler_.doDragOver(e);
+      this.delegate_.doDragOver(e);
     },
 
     /**
@@ -96,7 +119,7 @@ cr.define('cr.ui', function() {
       if (!this.target_.classList.contains('drag-target'))
         return;
       this.target_.classList.remove('drag-target');
-      this.handler_.doDrop(e);
+      this.delegate_.doDrop(e);
     },
 
     /**
@@ -109,11 +132,12 @@ cr.define('cr.ui', function() {
         return;
 
       this.target_.classList.remove('drag-target');
-      this.handler_.doDragLeave(e);
+      this.delegate_.doDragLeave(e);
     },
   };
 
   return {
-    DragWrapper: DragWrapper
+    DragWrapper: DragWrapper,
+    DragWrapperDelegate: DragWrapperDelegate,
   };
 });
diff --git a/chromium/ui/webui/resources/js/cr/ui/focus_grid.js b/chromium/ui/webui/resources/js/cr/ui/focus_grid.js
index 4eda10b6af0..cd3205ef2f7 100644
--- a/chromium/ui/webui/resources/js/cr/ui/focus_grid.js
+++ b/chromium/ui/webui/resources/js/cr/ui/focus_grid.js
@@ -53,13 +53,13 @@ cr.define('cr.ui', function() {
 
       var newRow = -1;
 
-      if (e.keyIdentifier == 'Up')
+      if (e.key == 'ArrowUp')
         newRow = rowIndex - 1;
-      else if (e.keyIdentifier == 'Down')
+      else if (e.key == 'ArrowDown')
         newRow = rowIndex + 1;
-      else if (e.keyIdentifier == 'PageUp')
+      else if (e.key == 'PageUp')
         newRow = 0;
-      else if (e.keyIdentifier == 'PageDown')
+      else if (e.key == 'PageDown')
         newRow = this.rows.length - 1;
 
       var rowToFocus = this.rows[newRow];
diff --git a/chromium/ui/webui/resources/js/cr/ui/focus_row.js b/chromium/ui/webui/resources/js/cr/ui/focus_row.js
index a545d14d7be..432c8a6dbeb 100644
--- a/chromium/ui/webui/resources/js/cr/ui/focus_row.js
+++ b/chromium/ui/webui/resources/js/cr/ui/focus_row.js
@@ -132,7 +132,7 @@ cr.define('cr.ui', function() {
     },
 
     /**
-     * @param {Element} sampleElement An element for to find an equivalent for.
+     * @param {!Element} sampleElement An element for to find an equivalent for.
      * @return {!Element} An equivalent element to focus for |sampleElement|.
      * @protected
      */
@@ -271,13 +271,13 @@ cr.define('cr.ui', function() {
 
       var index = -1;
 
-      if (e.keyIdentifier == 'Left')
+      if (e.key == 'ArrowLeft')
         index = elementIndex + (isRTL() ? 1 : -1);
-      else if (e.keyIdentifier == 'Right')
+      else if (e.key == 'ArrowRight')
         index = elementIndex + (isRTL() ? -1 : 1);
-      else if (e.keyIdentifier == 'Home')
+      else if (e.key == 'Home')
         index = 0;
-      else if (e.keyIdentifier == 'End')
+      else if (e.key == 'End')
         index = elements.length - 1;
 
       var elementToFocus = elements[index];
diff --git a/chromium/ui/webui/resources/js/cr/ui/list.js b/chromium/ui/webui/resources/js/cr/ui/list.js
index c1208864046..d85af804b45 100644
--- a/chromium/ui/webui/resources/js/cr/ui/list.js
+++ b/chromium/ui/webui/resources/js/cr/ui/list.js
@@ -333,19 +333,6 @@ cr.define('cr.ui', function() {
       // Make list focusable
       if (!this.hasAttribute('tabindex'))
         this.tabIndex = 0;
-
-      // Try to get an unique id prefix from the id of this element or the
-      // nearest ancestor with an id.
-      var element = this;
-      while (element && !element.id)
-        element = element.parentElement;
-      if (element && element.id)
-        this.uniqueIdPrefix_ = element.id;
-      else
-        this.uniqueIdPrefix_ = 'list';
-
-      // The next id suffix to use when giving each item an unique id.
-      this.nextUniqueIdSuffix_ = 0;
     },
 
     /**
@@ -626,6 +613,8 @@ cr.define('cr.ui', function() {
             self.scrollIndexIntoView(e.newValue);
           }, 0);
         }
+      } else {
+        this.removeAttribute('aria-activedescendant');
       }
     },
 
@@ -817,7 +806,6 @@ cr.define('cr.ui', function() {
     createItem: function(value) {
       var item = new this.itemConstructor_(value);
       item.label = value;
-      item.id = this.uniqueIdPrefix_ + '-' + this.nextUniqueIdSuffix_++;
       if (typeof item.decorate == 'function')
         item.decorate();
       return item;
diff --git a/chromium/ui/webui/resources/js/cr/ui/list_item.js b/chromium/ui/webui/resources/js/cr/ui/list_item.js
index e548a808018..cb6aacfc123 100644
--- a/chromium/ui/webui/resources/js/cr/ui/list_item.js
+++ b/chromium/ui/webui/resources/js/cr/ui/list_item.js
@@ -11,6 +11,13 @@ cr.define('cr.ui', function() {
    */
   var ListItem = cr.ui.define('li');
 
+  /**
+   * The next id suffix to use when giving each item an unique id.
+   * @type {number}
+   * @private
+   */
+  ListItem.nextUniqueIdSuffix_ = 0;
+
   ListItem.prototype = {
     __proto__: HTMLLIElement.prototype,
 
@@ -36,6 +43,8 @@ cr.define('cr.ui', function() {
      */
     decorate: function() {
       this.setAttribute('role', 'listitem');
+      if (!this.id)
+        this.id = 'listitem-' + ListItem.nextUniqueIdSuffix_++;
     },
 
     /**
diff --git a/chromium/ui/webui/resources/js/cr/ui/list_selection_controller.js b/chromium/ui/webui/resources/js/cr/ui/list_selection_controller.js
index 9b840d0edd7..b2a7abf580d 100644
--- a/chromium/ui/webui/resources/js/cr/ui/list_selection_controller.js
+++ b/chromium/ui/webui/resources/js/cr/ui/list_selection_controller.js
@@ -177,7 +177,6 @@ cr.define('cr.ui', function() {
      * @param {Event} e The keydown event.
      */
     handleKeyDown: function(e) {
-      var SPACE_KEY_CODE = 32;
       var tagName = e.target.tagName;
       // If focus is in an input field of some kind, only handle navigation keys
       // that aren't likely to conflict with input interaction (e.g., text
@@ -186,10 +185,10 @@ cr.define('cr.ui', function() {
         var inputType = e.target.type;
         // Just protect space (for toggling) for checkbox and radio.
         if (inputType == 'checkbox' || inputType == 'radio') {
-          if (e.keyCode == SPACE_KEY_CODE)
+          if (e.key == ' ')
             return;
         // Protect all but the most basic navigation commands in anything else.
-        } else if (e.keyIdentifier != 'Up' && e.keyIdentifier != 'Down') {
+        } else if (e.key != 'ArrowUp' && e.key != 'ArrowDown') {
           return;
         }
       }
@@ -210,8 +209,7 @@ cr.define('cr.ui', function() {
         return;
       }
 
-      // Space
-      if (e.keyCode == SPACE_KEY_CODE) {
+      if (e.key == ' ') {
         if (leadIndex != -1) {
           var selected = sm.getIndexSelected(leadIndex);
           if (e.ctrlKey || !selected) {
@@ -221,27 +219,27 @@ cr.define('cr.ui', function() {
         }
       }
 
-      switch (e.keyIdentifier) {
+      switch (e.key) {
         case 'Home':
           newIndex = this.getFirstIndex();
           break;
         case 'End':
           newIndex = this.getLastIndex();
           break;
-        case 'Up':
+        case 'ArrowUp':
           newIndex = leadIndex == -1 ?
               this.getLastIndex() : this.getIndexAbove(leadIndex);
           break;
-        case 'Down':
+        case 'ArrowDown':
           newIndex = leadIndex == -1 ?
               this.getFirstIndex() : this.getIndexBelow(leadIndex);
           break;
-        case 'Left':
+        case 'ArrowLeft':
         case 'MediaPreviousTrack':
           newIndex = leadIndex == -1 ?
               this.getLastIndex() : this.getIndexBefore(leadIndex);
           break;
-        case 'Right':
+        case 'ArrowRight':
         case 'MediaNextTrack':
           newIndex = leadIndex == -1 ?
               this.getFirstIndex() : this.getIndexAfter(leadIndex);
diff --git a/chromium/ui/webui/resources/js/cr/ui/menu.js b/chromium/ui/webui/resources/js/cr/ui/menu.js
index abcb79c7190..fbf0522c48b 100644
--- a/chromium/ui/webui/resources/js/cr/ui/menu.js
+++ b/chromium/ui/webui/resources/js/cr/ui/menu.js
@@ -241,17 +241,17 @@ cr.define('cr.ui', function() {
           self.selectedIndex = i;
       }
 
-      switch (e.keyIdentifier) {
-        case 'Down':
+      switch (e.key) {
+        case 'ArrowDown':
           selectNextAvailable(1);
           this.focusSelectedItem();
           return true;
-        case 'Up':
+        case 'ArrowUp':
           selectNextAvailable(-1);
           this.focusSelectedItem();
           return true;
         case 'Enter':
-        case 'U+0020': // Space
+        case ' ':
           if (item) {
             // Store |contextElement| since it'll be removed when handling the
             // 'activate' event.
diff --git a/chromium/ui/webui/resources/js/cr/ui/menu_button.js b/chromium/ui/webui/resources/js/cr/ui/menu_button.js
index 3a7bae5fc78..ff6c256045c 100644
--- a/chromium/ui/webui/resources/js/cr/ui/menu_button.js
+++ b/chromium/ui/webui/resources/js/cr/ui/menu_button.js
@@ -266,20 +266,19 @@ cr.define('cr.ui', function() {
      * Handles the keydown event for the menu button.
      */
     handleKeyDown: function(e) {
-      switch (e.keyIdentifier) {
-        case 'Down':
-        case 'Up':
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
           if (!this.respondToArrowKeys)
             break;
         case 'Enter':
-        case 'U+0020': // Space
+        case ' ':
           if (!this.isMenuShown())
             this.showMenu(true);
           e.preventDefault();
           break;
-        case 'Esc':
-        case 'U+001B': // Maybe this is remote desktop playing a prank?
-        case 'U+0009': // Tab
+        case 'Escape':
+        case 'Tab':
           this.hideMenu();
           break;
       }
diff --git a/chromium/ui/webui/resources/js/cr/ui/menu_item.js b/chromium/ui/webui/resources/js/cr/ui/menu_item.js
index b4726f282f9..bfe7eaac1f5 100644
--- a/chromium/ui/webui/resources/js/cr/ui/menu_item.js
+++ b/chromium/ui/webui/resources/js/cr/ui/menu_item.js
@@ -143,7 +143,7 @@ cr.define('cr.ui', function() {
       var shortcut = shortcuts[0];
       var mods = {};
       var ident = '';
-      shortcut.split('-').forEach(function(part) {
+      shortcut.split('|').forEach(function(part) {
         var partUc = part.toUpperCase();
         switch (partUc) {
           case 'CTRL':
@@ -160,25 +160,19 @@ cr.define('cr.ui', function() {
 
       var shortcutText = '';
 
-      // TODO(zvorygin): if more cornercases appear - optimize following
-      // code. Currently 'Enter' keystroke is passed as 'Enter', but 'Space'
-      // and 'Backspace' are passed as 'U+0020' and 'U+0008'.
-      if (ident == 'U+0020')
-        ident = 'Space';
-      else if (ident == 'U+0008')
-        ident = 'Backspace';
-
       ['CTRL', 'ALT', 'SHIFT', 'META'].forEach(function(mod) {
         if (mods[mod])
           shortcutText += loadTimeData.getString('SHORTCUT_' + mod) + '+';
       });
 
-      if (ident.indexOf('U+') != 0) {
+      if (ident == ' ')
+        ident = 'Space';
+
+      if (ident.length != 1) {
         shortcutText +=
             loadTimeData.getString('SHORTCUT_' + ident.toUpperCase());
       } else {
-        shortcutText +=
-            String.fromCharCode(parseInt(ident.substring(2), 16));
+        shortcutText += ident.toUpperCase();
       }
 
       this.setAttribute('shortcutText', shortcutText);
diff --git a/chromium/ui/webui/resources/js/cr/ui/overlay.js b/chromium/ui/webui/resources/js/cr/ui/overlay.js
index 7d02f13999b..c7b19e614a7 100644
--- a/chromium/ui/webui/resources/js/cr/ui/overlay.js
+++ b/chromium/ui/webui/resources/js/cr/ui/overlay.js
@@ -50,13 +50,13 @@ cr.define('cr.ui.overlay', function() {
           return;
 
         // Close the overlay on escape.
-        if (e.keyIdentifier == 'U+001B')
+        if (e.key == 'Escape')
           cr.dispatchSimpleEvent(overlay, 'cancelOverlay');
 
         // Execute the overlay's default button on enter, unless focus is on an
         // element that has standard behavior for the enter key.
         var forbiddenTagNames = /^(A|BUTTON|SELECT|TEXTAREA)$/;
-        if (e.keyIdentifier == 'Enter' &&
+        if (e.key == 'Enter' &&
             !forbiddenTagNames.test(document.activeElement.tagName)) {
           var button = getDefaultButton(overlay);
           if (button) {
diff --git a/chromium/ui/webui/resources/js/cr/ui/tabs.js b/chromium/ui/webui/resources/js/cr/ui/tabs.js
index 512c729444a..d3256d8f345 100644
--- a/chromium/ui/webui/resources/js/cr/ui/tabs.js
+++ b/chromium/ui/webui/resources/js/cr/ui/tabs.js
@@ -150,13 +150,13 @@ cr.define('cr.ui', function() {
      */
     handleKeyDown_: function(e) {
       var delta = 0;
-      switch (e.keyIdentifier) {
-        case 'Left':
-        case 'Up':
+      switch (e.key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
           delta = -1;
           break;
-        case 'Right':
-        case 'Down':
+        case 'ArrowRight':
+        case 'ArrowDown':
           delta = 1;
           break;
       }
diff --git a/chromium/ui/webui/resources/js/cr/ui/tree.js b/chromium/ui/webui/resources/js/cr/ui/tree.js
index 8f5ab0858cb..1eed9e1dc9c 100644
--- a/chromium/ui/webui/resources/js/cr/ui/tree.js
+++ b/chromium/ui/webui/resources/js/cr/ui/tree.js
@@ -57,6 +57,8 @@ cr.define('cr.ui', function() {
       this.addEventListener('mousedown', this.handleMouseDown);
       this.addEventListener('dblclick', this.handleDblClick);
       this.addEventListener('keydown', this.handleKeyDown);
+
+      this.setAttribute('role', 'group');
     },
 
     /**
@@ -146,23 +148,22 @@ cr.define('cr.ui', function() {
 
       var rtl = getComputedStyle(item).direction == 'rtl';
 
-      switch (e.keyIdentifier) {
-        case 'Up':
+      switch (e.key) {
+        case 'ArrowUp':
           itemToSelect = item ? getPrevious(item) :
               this.items[this.items.length - 1];
           break;
-        case 'Down':
+        case 'ArrowDown':
           itemToSelect = item ? getNext(item) :
               this.items[0];
           break;
-        case 'Left':
-        case 'Right':
+        case 'ArrowLeft':
+        case 'ArrowRight':
           // Don't let back/forward keyboard shortcuts be used.
           if (!cr.isMac && e.altKey || cr.isMac && e.metaKey)
             break;
 
-          if (e.keyIdentifier == 'Left' && !rtl ||
-              e.keyIdentifier == 'Right' && rtl) {
+          if (e.key == 'ArrowLeft' && !rtl || e.key == 'ArrowRight' && rtl) {
             if (item.expanded)
               item.expanded = false;
             else
@@ -253,11 +254,11 @@ cr.define('cr.ui', function() {
   var treeItemProto = (function() {
     var treeItem = cr.doc.createElement('div');
     treeItem.className = 'tree-item';
-    treeItem.innerHTML = '<div class=tree-row>' +
-        '<span class=expand-icon></span>' +
-        '<span class=tree-label></span>' +
+    treeItem.innerHTML = '<div class="tree-row">' +
+        '<span class="expand-icon"></span>' +
+        '<span class="tree-label"></span>' +
         '</div>' +
-        '<div class=tree-children></div>';
+        '<div class="tree-children" role="group"></div>';
     treeItem.setAttribute('role', 'treeitem');
     return treeItem;
   })();
@@ -281,7 +282,10 @@ cr.define('cr.ui', function() {
      * Initializes the element.
      */
     decorate: function() {
-
+      var labelId = 'tree-item-label-autogen-id-' +
+          treeItemAutoGeneratedIdCounter;
+      this.labelElement.id = labelId;
+      this.setAttribute('aria-labelledby', labelId);
     },
 
     /**
@@ -394,6 +398,7 @@ cr.define('cr.ui', function() {
       if (b) {
         if (this.mayHaveChildren_) {
           this.setAttribute('expanded', '');
+          this.setAttribute('aria-expanded', 'true');
           treeChildren.setAttribute('expanded', '');
           cr.dispatchSimpleEvent(this, 'expand', true);
           this.scrollIntoViewIfNeeded(false);
@@ -406,6 +411,10 @@ cr.define('cr.ui', function() {
             this.selected = true;
         }
         this.removeAttribute('expanded');
+        if (this.mayHaveChildren_)
+          this.setAttribute('aria-expanded', 'false');
+        else
+          this.removeAttribute('aria-expanded');
         treeChildren.removeAttribute('expanded');
         cr.dispatchSimpleEvent(this, 'collapse', true);
       }
@@ -521,8 +530,10 @@ cr.define('cr.ui', function() {
       var rowItem = this.firstElementChild;
       this.setAttribute('has-children', b);
       rowItem.setAttribute('has-children', b);
-      if (b)
+      if (b) {
         this.mayHaveChildren_ = true;
+        this.setAttribute('aria-expanded', 'false');
+      }
     },
 
     /**
@@ -559,8 +570,8 @@ cr.define('cr.ui', function() {
 
         // Calling tree.focus blurs the input which will make the tree item
         // non editable.
-        switch (e.keyIdentifier) {
-          case 'U+001B':  // Esc
+        switch (e.key) {
+          case 'Escape':
             input.value = text;
             // fall through
           case 'Enter':