[MD Bookmarks] Add keyboard navigation to sidebar.

chrome/browser/resources/md_bookmarks/folder_node.js

 // Copyright 2016 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.
 
 Polymer({
   is: 'bookmarks-folder-node',
 
   behaviors: [
     bookmarks.StoreClient,
+    Polymer.IronA11yKeysBehavior,
   ],
 
   properties: {
     itemId: {
       type: String,
       observer: 'updateFromStore',
     },
 
     depth: {
       type: Number,
       observer: 'depthChanged_',
     },
 
+    focusable: {
+      type: Boolean,
+      value: false,
+    },
+
     /** @type {BookmarkNode} */
     item_: Object,
 
     /** @private */
     isClosed_: Boolean,
 
     /** @private */
     selectedFolder_: String,
 
     /** @private */
     searchActive_: Boolean,
 
     /** @private */
     isSelectedFolder_: {
       type: Boolean,
       value: false,
       reflectToAttribute: true,
       computed: 'computeIsSelected_(itemId, selectedFolder_, searchActive_)'
     },
   },
 
+  listeners: {
+    'keydown': 'onKeydown_',
+  },
+
   /** @override */
   attached: function() {
     this.watch('item_', function(state) {
       return state.nodes[this.itemId];
     }.bind(this));
     this.watch('isClosed_', function(state) {
       return state.closedFolders.has(this.itemId);
     }.bind(this));
     this.watch('selectedFolder_', function(state) {
       return state.selectedFolder;
     });
     this.watch('searchActive_', function(state) {
       return bookmarks.util.isShowingSearch(state);
     });
 
     this.updateFromStore();
+
+    if (this.selectedFolder_ == this.itemId)
+      this.fire('folder-node-focus-changed', this);
   },
 
   /** @return {HTMLElement} */
+  getFocusTarget: function() {
+    return this.$.container;
+  },
+
+  /** @return {HTMLElement} */
   getDropTarget: function() {
     return this.$.container;
   },
 
   /** @return {boolean} */
-  isPositiveDepth_: function() {
-    return this.depth >= 0;
+  isPositiveDepth_: function(depth) {
+    return depth >= 0;
   },
 
   /**
+   * @private
+   * @param {!Event} e
+   */
+  onKeydown_: function(e) {
+    var direction = 0;
+    var handled = true;
+    if (this.keyboardEventMatchesKeys(e, 'up')) {

[tsergeant, 2017/04/19 01:42:16]

Seems like overkill to use IronA11yKeysBehavior just for this: just do

e.key == 'ArrowUp'

instead.

[calamity, 2017/04/19 04:51:02]

Done.

+      direction = -1;
+    } else if (this.keyboardEventMatchesKeys(e, 'down')) {
+      direction = 1;
+    } else {
+      handled = false;
+    }
+

[tsergeant, 2017/04/19 01:42:16]

Is left/right going to be handled here too? Maybe add a TODO for it.

[calamity, 2017/04/19 04:51:02]

Yeah. It's in a follow-up.

+    if (direction) {
+      handled =
+          this.changeKeyboardSelection_(direction, this.root.activeElement);
+    }
+
+    if (!handled)
+      return;
+
+    e.preventDefault();
+    e.stopPropagation();
+  },
+
+  /**
+   * @private
+   * @param {number} direction
+   * @return {boolean} Whether the event should be treated as handled.
+   */
+  changeKeyboardSelection_: function(direction, currentFocus) {
+    var isCurrentlyFocused = currentFocus == this.$.container;
+
+    // Get the next folder node. If there is no next element, the event will
+    // bubble to the parent node which will handle it.
+    var newFocusFolderNode = this.getNextVisibleFolderNode_(
+        direction == -1, isCurrentlyFocused ? this : currentFocus);
+
+    if (!newFocusFolderNode || newFocusFolderNode.itemId != ROOT_NODE_ID) {

[tsergeant, 2017/04/19 01:42:16]

This can be simplified a little bit:

if (!newFocusFolderNode)
  return false;

if (newFocusFolderNode.itemId != ROOT_NODE_ID) {
  this.fire('folder-node-focus-changed', newFocusFolderNode);
  newFocusFolderNode.getFocusTarget().focus();
}

return true;

[calamity, 2017/04/19 04:51:02]

Done.

+      if (newFocusFolderNode) {
+        this.fire('folder-node-focus-changed', newFocusFolderNode);
+        newFocusFolderNode.getFocusTarget().focus();
+      } else {
+        // If there is no newly focused node, allow the event to bubble.
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /**
+   * Returns the next or previous visible bookmark node relative to |current|.
+   * @private
+   * @param {boolean} reverse
+   * @param {BookmarksFolderNodeElement} current Either this node, or an
+   *     immediate child.
+   * @return {HTMLElement|null} Returns null

[tsergeant, 2017/04/19 01:42:16]

Returns null...when?

[calamity, 2017/04/19 04:51:02]

Done.

+   */
+  getNextVisibleFolderNode_: function(reverse, current) {
+    var newFocus = null;
+    var children =
+        Array.from(this.root.querySelectorAll('bookmarks-folder-node'));
+
+    // The current node's successor can only be its first child.
+    if (this == current) {
+      if (!reverse && children.length && !this.isClosed_)
+        newFocus = children[0];
+
+      return newFocus;
+    }
+
+    var index = children.indexOf(current);
+    assert(index != -1);
+    if (reverse) {
+      // A child node's predecessor is either the previous child's last visible
+      // descendant, or this node, which is its immediate parent.
+      newFocus =
+          index == 0 ? this : children[index - 1].getLastVisibleDescendant_();
+    } else if (index < children.length - 1) {
+      // A successor to a child is the next child.
+      newFocus = children[index + 1];
+    }
+
+    return newFocus;
+  },
+
+  /**
+   * @private
+   * @return {BookmarksFolderNodeElement}
+   */
+  getLastVisibleDescendant_: function() {
+    var children =
+        Array.from(this.root.querySelectorAll('bookmarks-folder-node'));
+
+    if (this.isClosed_ || children.length == 0)
+      return this;
+
+    return children.pop().getLastVisibleDescendant_();
+  },
+
+  /**
    * @private
    * @return {string}
    */
   getFolderIcon_: function() {
     return this.isSelectedFolder_ ? 'bookmarks:folder-open' : 'cr:folder';
   },
 
   /** @private */
   selectFolder_: function() {
     this.dispatch(bookmarks.actions.selectFolder(this.item_.id));
@@ skipping 50 matching lines @@
     return !this.getState().nodes[itemId].url;
   },
 
   /**
    * @private
    * @return {boolean}
    */
   isRootFolder_: function() {
     return this.depth == 0;
   },
+
+  getTabIndex_: function(focusable) {
+    return focusable ? 0 : -1;
+  },
 });