fix(menu): focus first non disabled item (#9228)

Previously, menu would attempt to focus first item. If the item
was disabled, no attempts were made to seek another focusable item.

* Iterate through menu items until it finds a non-disabled item
* Add more menu items to autofocus spec tests

Fixes #9165

Author: clshortfuse

src/components/menu/js/menuController.js

@@ -162,7 +162,7 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
     var focusTarget = menuContainer[0]
       .querySelector(prefixer.buildSelector(['md-menu-focus-target', 'md-autofocus']));
 
-    if (!focusTarget) focusTarget = menuContainer[0].querySelector('.md-button');
+    if (!focusTarget) focusTarget = menuContainer[0].querySelector('.md-button:not([disabled])');
     focusTarget.focus();
   };
 

src/components/menu/js/menuServiceProvider.js

@@ -210,14 +210,23 @@ function MenuProvider($$interimElementProvider) {
         opts.menuContentEl.on('keydown', onMenuKeyDown);
         opts.menuContentEl[0].addEventListener('click', captureClickListener, true);
 
-        // kick off initial focus in the menu on the first element
+        // kick off initial focus in the menu on the first enabled element
         var focusTarget = opts.menuContentEl[0]
           .querySelector(prefixer.buildSelector(['md-menu-focus-target', 'md-autofocus']));
 
         if ( !focusTarget ) {
-          var firstChild = opts.menuContentEl[0].firstElementChild;
-
-          focusTarget = firstChild && (firstChild.querySelector('.md-button:not([disabled])') || firstChild.firstElementChild);
+          var childrenLen = opts.menuContentEl[0].children.length;
+          for(var childIndex = 0; childIndex < childrenLen; childIndex++) {
+            var child = opts.menuContentEl[0].children[childIndex];
+            focusTarget = child.querySelector('.md-button:not([disabled])');
+            if (focusTarget) {
+              break;
+            }
+            if (child.firstElementChild && !child.firstElementChild.disabled) {
+              focusTarget = child.firstElementChild;
+              break;
+            }
+          }
         }
 
         focusTarget && focusTarget.focus();

src/components/menu/menu.spec.js

@@ -152,13 +152,62 @@ describe('material.components.menu', function() {
       expect(getOpenMenuContainer(menu).length).toBe(0);
     }));
 
+    describe('default focus', function() {
+      it('should focus on first item automatically', inject(function($compile, $rootScope, $document) {
+        var menu = $compile(
+          '<md-menu>' +
+            '<button ng-click="$mdOpenMenu($event)">Hello World</button>' +
+            '<md-menu-content>' +
+              '<md-menu-item>' +
+                '<button id="menuItem0" ng-click="doSomething($event)"></button>' +
+              '</md-menu-item>' +
+              '<md-menu-item>' +
+                '<button ng-click="doSomething($event)"></button>' +
+              '</md-menu-item>' +
+            '</md-menu-content>' +
+          '</md-menu>'
+        )($rootScope);
+
+        openMenu(menu);
+
+        var menuTarget = $document[0].querySelector('#menuItem0');
+
+        expect(document.activeElement).toBe(menuTarget);
+      }));
+
+      it('should focus on first non-disabled item', inject(function($compile, $rootScope, $document) {
+        var menu = $compile(
+          '<md-menu>' +
+            '<button ng-click="$mdOpenMenu($event)">Hello World</button>' +
+            '<md-menu-content>' +
+              '<md-menu-item>' +
+                '<button disabled ng-click="doSomething($event)"></button>' +
+              '</md-menu-item>' +
+              '<md-menu-item>' +
+                '<button id="menuItem1" ng-click="doSomething($event)"></button>' +
+              '</md-menu-item>' +
+            '</md-menu-content>' +
+          '</md-menu>'
+        )($rootScope);
+
+        openMenu(menu);
+
+        var menuTarget = $document[0].querySelector('#menuItem1');
+
+        expect(document.activeElement).toBe(menuTarget);
+      }));
+    });
+
     describe('autofocus', function() {
 
       it('should focus a button with md-menu-focus-target', inject(function($compile, $rootScope, $document) {
         var menu = $compile(
           '<md-menu>' +
             '<button ng-click="$mdOpenMenu($event)">Hello World</button>' +
             '<md-menu-content>' +
+              '<md-menu-item>' +
+                '<button ng-click="doSomething($event)"></button>' +
+              '</md-menu-item>' +
               '<md-menu-item>' +
                 '<button id="menuFocus" md-menu-focus-target ng-click="doSomething($event)"></button>' +
               '</md-menu-item>' +
@@ -178,6 +227,9 @@ describe('material.components.menu', function() {
           '<md-menu>' +
             '<button ng-click="$mdOpenMenu($event)">Hello World</button>' +
             '<md-menu-content>' +
+              '<md-menu-item>' +
+                '<button ng-click="doSomething($event)"></button>' +
+              '</md-menu-item>' +
               '<md-menu-item>' +
                 '<button id="menuFocus" md-autofocus ng-click="doSomething($event)"></button>' +
               '</md-menu-item>' +