MDL-35590 block_navigation: fix keyboard nav

Fixed up the left/right keyboard navigation to match
the aria specification. Also stopped the root node from
being collapsible.

blocks/navigation/renderer.php

@@ -140,7 +140,8 @@ class block_navigation_renderer extends plugin_renderer_base {
                 $liclasses[] = 'contains_branch';
                 if ($depth == 1) {
                     $liexpandable = array(
-                        'data-expandable' => 'false'
+                        'data-expandable' => 'false',
+                        'data-collapsible' => 'false'
                     );
                 } else {
                     $liexpandable = array(

lib/amd/src/tree.js

@@ -127,6 +127,28 @@ define(['jquery'], function($) {
         return item.is(SELECTORS.GROUP);
     };
 
+    /**
+     * Determines if the given group item (contains child tree items) is collapsed.
+     *
+     * @method isGroupCollapsed
+     * @param {object} item jquery object representing a group item on the tree.
+     * @returns {bool}
+     */
+    Tree.prototype.isGroupCollapsed = function(item) {
+        return item.attr('aria-expanded') === 'false';
+    };
+
+    /**
+     * Determines if the given group item (contains child tree items) can be collapsed.
+     *
+     * @method isGroupCollapsible
+     * @param {object} item jquery object representing a group item on the tree.
+     * @returns {bool}
+     */
+    Tree.prototype.isGroupCollapsible = function(item) {
+        return item.attr('data-collapsible') !== 'false';
+    };
+
     /**
      * Performs the tree initialisation for all child items from the given node,
      * such as removing everything from the tab order and setting aria selected
@@ -207,7 +229,7 @@ define(['jquery'], function($) {
     Tree.prototype.expandGroup = function(item) {
         var promise = $.Deferred();
         // Ignore nodes that are explicitly maked as not expandable or are already expanded.
-        if (item.attr('data-expandable') !== 'false' && item.attr('aria-expanded') !== 'true') {
+        if (item.attr('data-expandable') !== 'false' && this.isGroupCollapsed(item)) {
             // If this node requires ajax load and we haven't already loaded it.
             if (item.attr('data-requires-ajax') === 'true' && item.attr('data-loaded') !== 'true') {
                 item.attr('data-loaded', false);
@@ -266,8 +288,8 @@ define(['jquery'], function($) {
      * @param {Object} item is the jquery id of the parent item of the group.
      */
     Tree.prototype.collapseGroup = function(item) {
-        // If the item is already collapsed then do nothing.
-        if (item.attr('aria-expanded') === 'false') {
+        // If the item is not collapsible or already collapsed then do nothing.
+        if (!this.isGroupCollapsible(item) || this.isGroupCollapsed(item)) {
             return;
         }
 
@@ -344,15 +366,22 @@ define(['jquery'], function($) {
                 return false;
             }
             case this.keys.left: {
+                var focusParent = function(tree) {
+                    // Get the immediate visible parent group item that contains this element.
+                    var parentGroup = tree.getVisibleItems().filter(SELECTORS.GROUP).has(item).last();
+                    parentGroup.focus();
+                };
+
                 // If this is a goup item then collapse it and focus the parent group
                 // in accordance with the aria spec.
                 if (this.isGroupItem(item)) {
-                    this.collapseGroup(item);
-                    // Move up to the parent.
-                    var visibleGroups = this.getVisibleItems().filter(SELECTORS.GROUP);
-                    var index = visibleGroups.index(item);
-                    var prevIndex = (index - 1) > 0 ? index - 1 : 0;
-                    visibleGroups.eq(prevIndex).focus();
+                    if (this.isGroupCollapsed(item)) {
+                        focusParent(this);
+                    } else {
+                        this.collapseGroup(item);
+                    }
+                } else {
+                    focusParent(this);
                 }
 
                 e.stopPropagation();
@@ -362,10 +391,12 @@ define(['jquery'], function($) {
                 // If this is a group item then expand it and focus the first child item
                 // in accordance with the aria spec.
                 if (this.isGroupItem(item)) {
-                    this.expandGroup(item).done(function() {
+                    if (this.isGroupCollapsed(item)) {
+                        this.expandGroup(item);
+                    } else {
                         // Move to the first item in the child group.
                         item.find(SELECTORS.ITEM).first().focus();
-                    });
+                    }
                 }
 
                 e.stopPropagation();