From 089e33b7462b3203fd599f24c2bd08b5e4484f2d Mon Sep 17 00:00:00 2001
From: Ryan Schmukler <rschmukler@gmail.com>
Date: Tue, 8 Dec 2015 00:02:55 -0800
Subject: [PATCH 1/5] fix(menubar): fix menus overflow hiding behind menubar

---
 src/core/style/variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/style/variables.scss b/src/core/style/variables.scss
index b1057b19044..9387af06ca4 100644
--- a/src/core/style/variables.scss
+++ b/src/core/style/variables.scss
@@ -79,7 +79,7 @@ $whiteframe-shadow-24dp: 0px 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opac
 
 $z-index-toast: 105 !default;
 $z-index-tooltip: 100 !default;
-$z-index-menu: 95 !default;
+$z-index-menu: 100 !default;
 $z-index-select: 90 !default;
 $z-index-dialog: 80 !default;
 $z-index-bottom-sheet: 70 !default;

From d034e144faa96fe75e108a84efeb634b9fa18c74 Mon Sep 17 00:00:00 2001
From: Ryan Schmukler <rschmukler@gmail.com>
Date: Tue, 8 Dec 2015 00:03:11 -0800
Subject: [PATCH 2/5] fix(menubar): fix keyboard controls

---
 .../menuBar/js/menuBarController.js           | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/menuBar/js/menuBarController.js b/src/components/menuBar/js/menuBarController.js
index 314cde966a8..054f76ba47b 100644
--- a/src/components/menuBar/js/menuBarController.js
+++ b/src/components/menuBar/js/menuBarController.js
@@ -51,18 +51,16 @@ MenuBarController.prototype.init = function() {
       el[0].classList.remove('md-open');
     }
 
-    if (opts.closeAll) {
-      if ($element[0].contains(el[0])) {
-        var parentMenu = el[0];
-        while (parentMenu && rootMenus.indexOf(parentMenu) == -1) {
-          parentMenu = $mdUtil.getClosest(parentMenu, 'MD-MENU', true);
-        }
-        if (parentMenu) {
-          if (!opts.skipFocus) parentMenu.querySelector('button:not([disabled])').focus();
-          self.currentlyOpenMenu = undefined;
-          self.disableOpenOnHover();
-          self.setKeyboardMode(true);
-        }
+    if ($element[0].contains(el[0])) {
+      var parentMenu = el[0];
+      while (parentMenu && rootMenus.indexOf(parentMenu) == -1) {
+        parentMenu = $mdUtil.getClosest(parentMenu, 'MD-MENU', true);
+      }
+      if (parentMenu) {
+        if (!opts.skipFocus) parentMenu.querySelector('button:not([disabled])').focus();
+        self.currentlyOpenMenu = undefined;
+        self.disableOpenOnHover();
+        self.setKeyboardMode(true);
       }
     }
   }));

From 2ea692bd01d49d9a334c3836d645e5698e0596f2 Mon Sep 17 00:00:00 2001
From: Ryan Schmukler <rschmukler@gmail.com>
Date: Mon, 7 Dec 2015 15:37:29 -0800
Subject: [PATCH 3/5] amend(select): keep select in DOM but move to body on
 open

references #6071, references #6030
---
 src/components/select/select.js      | 18 +++++--
 src/components/select/select.spec.js | 74 +++++++++++++++++++---------
 2 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/src/components/select/select.js b/src/components/select/select.js
index 05bf3090ab2..ded804f2c5a 100755
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@@ -247,6 +247,7 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
         inputCheckValue();
       };
 
+
       attr.$observe('placeholder', ngModelCtrl.$render);
 
 
@@ -386,6 +387,10 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
       if (!element[0].hasAttribute('id')) {
         ariaAttrs.id = 'select_' + $mdUtil.nextUid();
       }
+
+      var containerId = 'select_container_' + $mdUtil.nextUid();
+      selectContainer.attr('id', containerId);
+      ariaAttrs['aria-owns'] = containerId;
       element.attr(ariaAttrs);
 
       scope.$on('$destroy', function() {
@@ -419,6 +424,9 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
         }
         selectMenuCtrl = selectContainer.find('md-select-menu').controller('mdSelectMenu');
         selectMenuCtrl.init(ngModelCtrl, attr.ngModel);
+        element.on('$destroy', function() {
+          selectContainer.remove();
+        });
       }
 
       function handleKeypress(e) {
@@ -442,7 +450,7 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
         }
       }
 
-      function openSelect(e) {
+      function openSelect() {
         selectScope.isOpen = true;
         element.attr('aria-expanded', 'true');
 
@@ -452,8 +460,8 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
           skipCompile: true,
           element: selectContainer,
           target: element[0],
+          selectCtrl: mdSelectCtrl,
           preserveElement: true,
-          parent: element,
           hasBackdrop: true,
           loadingAsync: attr.mdOnOpen ? scope.$eval(attr.mdOnOpen) || true : false
         }).finally(function() {
@@ -1247,7 +1255,7 @@ function SelectProvider($$interimElementProvider) {
      * trigger the [optional] user-defined expression
      */
     function announceClosed(opts) {
-      var mdSelect = opts.selectEl.controller('mdSelect');
+      var mdSelect = opts.selectCtrl;
       if (mdSelect) {
         var menuController = opts.selectEl.controller('mdSelectMenu');
         mdSelect.setLabelText(menuController.selectedLabels());
@@ -1262,7 +1270,7 @@ function SelectProvider($$interimElementProvider) {
     function calculateMenuPositions(scope, element, opts) {
       var 
         containerNode = element[0],
-        targetNode = opts.target[0].children[1], // target the label
+        targetNode = opts.target[0].children[0], // target the label
         parentNode = $document[0].body,
         selectNode = opts.selectEl[0],
         contentNode = opts.contentEl[0],
@@ -1370,7 +1378,7 @@ function SelectProvider($$interimElementProvider) {
       } else {
         left = (targetRect.left + centeredRect.left - centeredRect.paddingLeft) + 2;
         top = Math.floor(targetRect.top + targetRect.height / 2 - centeredRect.height / 2 -
-            centeredRect.top + contentNode.scrollTop) + 5;
+            centeredRect.top + contentNode.scrollTop) + 4;
 
         transformOrigin = (centeredRect.left + targetRect.width / 2) + 'px ' +
           (centeredRect.top + centeredRect.height / 2 - contentNode.scrollTop) + 'px 0px';
diff --git a/src/components/select/select.spec.js b/src/components/select/select.spec.js
index e3f4e223a1b..9669fa6bc89 100755
--- a/src/components/select/select.spec.js
+++ b/src/components/select/select.spec.js
@@ -52,11 +52,19 @@ describe('<md-select>', function() {
     var select = setupSelect('ng-model="val", md-container-class="test"').find('md-select');
     openSelect(select);
 
-    var container = select[0].querySelector('.md-select-menu-container');
+    var container = $document[0].querySelector('.md-select-menu-container');
     expect(container).toBeTruthy();
     expect(container.classList.contains('test')).toBe(true);
   }));
 
+  it('sets aria-owns between the select and the container', function() {
+    var select = setupSelect('ng-model="val"').find('md-select');
+    var ownsId = select.attr('aria-owns'); 
+    expect(ownsId).toBeTruthy();
+    var containerId = select[0].querySelector('.md-select-menu-container').getAttribute('id');
+    expect(ownsId).toBe(containerId);
+  });
+
   it('calls md-on-close when the select menu closes', inject(function($document, $rootScope) {
     var called = false;
     $rootScope.onClose = function() {
@@ -89,6 +97,15 @@ describe('<md-select>', function() {
     expect(backdrop.length).toBe(0);
   }));
 
+  it('removes the menu container when the select is removed', inject(function($document) {
+    var select = setupSelect('ng-model="val"', [1]).find('md-select');
+    openSelect(select);
+
+    select.remove();
+
+    expect($document.find('md-select-menu').length).toBe(0);
+  }));
+
   it('should not trigger ng-change without a change when using trackBy', inject(function($rootScope) {
     var changed = false;
     $rootScope.onChange = function() { changed = true; };
@@ -402,7 +419,6 @@ describe('<md-select>', function() {
         clickOption(el, 1);
 
         expect(selectedOptions(el).length).toBe(1);
-        expect(el.find('md-option').eq(1).attr('selected')).toBe('selected');
         expect($rootScope.model).toBe(2);
       }));
 
@@ -758,33 +774,33 @@ describe('<md-select>', function() {
     }));
 
     describe('md-select', function() {
-      it('can be opened with a space key', inject(function($document) {
+      it('can be opened with a space key', function() {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
         pressKey(el, 32);
         waitForSelectOpen();
         expectSelectOpen(el);
-      }));
+      });
 
-      it('can be opened with an enter key', inject(function($document) {
+      it('can be opened with an enter key', function() {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
         pressKey(el, 13);
         waitForSelectOpen();
         expectSelectOpen(el);
-      }));
+      });
 
-      it('can be opened with the up key', inject(function($document) {
+      it('can be opened with the up key', function() {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
         pressKey(el, 38);
         waitForSelectOpen();
         expectSelectOpen(el);
-      }));
+      });
 
-      it('can be opened with the down key', inject(function($document) {
+      it('can be opened with the down key', function() {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
         pressKey(el, 40);
         waitForSelectOpen();
         expectSelectOpen(el);
-      }));
+      });
 
       it('supports typing an option name', inject(function($document, $rootScope) {
         var el = setupSelect('ng-model="someModel"', [1, 2, 3]).find('md-select');
@@ -798,7 +814,7 @@ describe('<md-select>', function() {
         var el = setupSelect('ng-model="someVal"', [1, 2, 3]).find('md-select');
         openSelect(el);
         expectSelectOpen(el);
-        var selectMenu = el.find('md-select-menu');
+        var selectMenu = $document.find('md-select-menu');
         expect(selectMenu.length).toBe(1);
         pressKey(selectMenu, 27);
         waitForSelectClose();
@@ -845,7 +861,15 @@ describe('<md-select>', function() {
   }
 
   function selectedOptions(el) {
-    return angular.element(el[0].querySelectorAll('md-option[selected]'));
+    var res;
+    var querySelector = 'md-option[selected]';
+    inject(function($document) {
+      res = angular.element($document[0].querySelectorAll(querySelector));
+      if (!res.length) {
+        res = angular.element(el[0].querySelectorAll(querySelector));
+      }
+    });
+    return res;
   }
 
   function openSelect(el) {
@@ -891,7 +915,7 @@ describe('<md-select>', function() {
   function clickOption(select, index) {
     inject(function($rootScope, $document) {
       expectSelectOpen(select);
-      var openMenu = select.find('md-select-menu');
+      var openMenu = $document.find('md-select-menu');
       var opt = angular.element(openMenu.find('md-option')[index]).find('div')[0];
 
       if (!opt) throw Error('Could not find option at index: ' + index);
@@ -905,21 +929,23 @@ describe('<md-select>', function() {
   }
 
   function expectSelectClosed(element) {
-    element = angular.element(element);
-    var menu = angular.element(element[0].querySelector('.md-select-menu-container'));
-    if (menu.length) {
-      if (menu.hasClass('md-active') || menu.attr('aria-hidden') == 'false') {
-        throw Error('Expected select to be closed');
+    inject(function($document) {
+      var menu = angular.element($document[0].querySelector('.md-select-menu-container'));
+      if (menu.length) {
+        if (menu.hasClass('md-active') || menu.attr('aria-hidden') == 'false') {
+          throw Error('Expected select to be closed');
+        }
       }
-    }
+    });
   }
 
   function expectSelectOpen(element) {
-    element = angular.element(element);
-    var menu = angular.element(element[0].querySelector('.md-select-menu-container'));
-    if (!(menu.hasClass('md-active') && menu.attr('aria-hidden') == 'false')) {
-      throw Error('Expected select to be open');
-    }
+    inject(function($document) {
+      var menu = angular.element($document[0].querySelector('.md-select-menu-container'));
+      if (!(menu.hasClass('md-active') && menu.attr('aria-hidden') == 'false')) {
+        throw Error('Expected select to be open');
+      }
+    });
   }
 
 });

From cd75b22bec0d0e167356b1e176d46ac4942f0423 Mon Sep 17 00:00:00 2001
From: Ryan Schmukler <rschmukler@gmail.com>
Date: Mon, 7 Dec 2015 17:49:59 -0800
Subject: [PATCH 4/5] fix(menu): fix menus inside toolbars and dialogs

fixes #6131, fixes #6109, fixes #6049, fixes #6073, references #6080,
fixes #6089, fixes #6116
---
 src/components/menu/js/menuController.js      |  5 +-
 src/components/menu/js/menuDirective.js       |  4 ++
 src/components/menu/js/menuServiceProvider.js |  9 ++--
 src/components/menu/menu.spec.js              | 46 +++++++++++++------
 4 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/components/menu/js/menuController.js b/src/components/menu/js/menuController.js
index 9099f541026..0bf5097233f 100644
--- a/src/components/menu/js/menuController.js
+++ b/src/components/menu/js/menuController.js
@@ -25,6 +25,7 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
     // Default element for ARIA attributes has the ngClick or ngMouseenter expression
     triggerElement = $element[0].querySelector('[ng-click],[ng-mouseenter]');
 
+    this.isInMenuBar = opts.isInMenuBar;
     this.nestedMenus = $mdUtil.nodesToArray(menuContainer[0].querySelectorAll('.md-nested-menu'));
 
     menuContainer.on('$mdInterimElementRemove', function() {
@@ -117,7 +118,7 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
       element: menuContainer,
       target: triggerElement,
       preserveElement: true,
-      parent: $element
+      parent: 'body'
     }).finally(function() {
       self.disableHoverListener();
     });
@@ -128,14 +129,12 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
 
   $scope.$watch(function() { return self.isOpen; }, function(isOpen) {
     if (isOpen) {
-      triggerElement.setAttribute('aria-expanded', 'true');
       menuContainer.attr('aria-hidden', 'false');
       $element[0].classList.add('md-open');
       angular.forEach(self.nestedMenus, function(el) {
         el.classList.remove('md-open');
       });
     } else {
-      triggerElement && triggerElement.setAttribute('aria-expanded', 'false');
       menuContainer.attr('aria-hidden', 'true');
       $element[0].classList.remove('md-open');
     }
diff --git a/src/components/menu/js/menuDirective.js b/src/components/menu/js/menuDirective.js
index 5046411d315..3cbc738b720 100644
--- a/src/components/menu/js/menuDirective.js
+++ b/src/components/menu/js/menuDirective.js
@@ -204,6 +204,10 @@ function MenuDirective($mdUtil) {
     }
     menuContainer.append(menuContents);
 
+    element.on('$destroy', function() {
+      menuContainer.remove();
+    });
+
     element.append(menuContainer);
     menuContainer[0].style.display = 'none';
     mdMenuCtrl.init(menuContainer, { isInMenuBar: isInMenuBar });
diff --git a/src/components/menu/js/menuServiceProvider.js b/src/components/menu/js/menuServiceProvider.js
index 45b2e1c11fa..30d31710b94 100644
--- a/src/components/menu/js/menuServiceProvider.js
+++ b/src/components/menu/js/menuServiceProvider.js
@@ -127,11 +127,8 @@ function MenuProvider($$interimElementProvider) {
        * Place the menu into the DOM and call positioning related functions
        */
       function showMenu() {
-        if (!opts.preserveElement) {
-          opts.parent.append(element);
-        } else {
-          element[0].style.display = '';
-        }
+        opts.parent.append(element);
+        element[0].style.display = '';
 
         return $q(function(resolve) {
           var position = calculateMenuPosition(element, opts);
@@ -294,7 +291,7 @@ function MenuProvider($$interimElementProvider) {
             if ((hasAnyAttribute(target, ['ng-click', 'ng-href', 'ui-sref']) ||
                 target.nodeName == 'BUTTON' || target.nodeName == 'MD-BUTTON') && !hasAnyAttribute(target, ['md-prevent-menu-close'])) {
               var closestMenu = $mdUtil.getClosest(target, 'MD-MENU');
-              if (!target.hasAttribute('disabled') && (closestMenu == opts.parent[0])) {
+              if (!target.hasAttribute('disabled') && (!closestMenu || closestMenu == opts.parent[0])) {
                 close();
               }
               break;
diff --git a/src/components/menu/menu.spec.js b/src/components/menu/menu.spec.js
index 85933daa6b9..bd73c3bf370 100644
--- a/src/components/menu/menu.spec.js
+++ b/src/components/menu/menu.spec.js
@@ -1,4 +1,4 @@
-describe('material.components.menu', function() {
+ddescribe('material.components.menu', function() {
   var attachedElements = [];
   var $mdMenu, $timeout, menuActionPerformed, $mdUtil;
 
@@ -7,7 +7,7 @@ describe('material.components.menu', function() {
     $mdUtil = _$mdUtil_;
     $mdMenu = _$mdMenu_;
     $timeout = _$timeout_;
-    var abandonedMenus = $document[0].querySelectorAll('.md-menu-container');
+    var abandonedMenus = $document[0].querySelectorAll('.md-open-menu-container');
     angular.element(abandonedMenus).remove();
   }));
   afterEach(function() {
@@ -41,6 +41,23 @@ describe('material.components.menu', function() {
       expect(getOpenMenuContainer(menu).length).toBe(0);
     });
 
+    it('cleans up an open menu when the element leaves the DOM', function() {
+      var menu = setup();
+      openMenu(menu);
+      menu.remove();
+      expect(getOpenMenuContainer(menu).length).toBe(0);
+    });
+
+    it('sets up proper aria-owns and aria-haspopup relations between the button and the container', function() {
+      var menu = setup();
+      var button = menu[0].querySelector('button');
+      expect(button.hasAttribute('aria-haspopup')).toBe(true);
+      expect(button.hasAttribute('aria-owns')).toBe(true);
+      var ownsId = button.getAttribute('aria-owns');
+      openMenu(menu);
+      expect(getOpenMenuContainer(menu).attr('id')).toBe(ownsId);
+    });
+
     it('opens on click without $event', function() {
       var noEvent = true;
       var menu = setup('ng-click', noEvent);
@@ -98,7 +115,7 @@ describe('material.components.menu', function() {
       openMenu(menu);
       expect(getOpenMenuContainer(menu).length).toBe(1);
 
-      var openMenuEl = menu[0].querySelector('md-menu-content');
+      var openMenuEl = $document[0].querySelector('md-menu-content');
 
       pressKey(openMenuEl, $mdConstant.KEY_CODE.ESCAPE);
       waitForMenuClose();
@@ -197,21 +214,22 @@ describe('material.components.menu', function() {
   // ********************************************
 
   function getOpenMenuContainer(el) {
+    var res;
     el = (el instanceof angular.element) ? el[0] : el;
-    var container = el.querySelector('.md-open-menu-container');
-    if (container.style.display == 'none') {
-      return angular.element([]);
-    } else {
-      return angular.element(container);
-    }
+    inject(function($document) {
+      var container = $document[0].querySelector('.md-open-menu-container');
+      if (container && container.style.display == 'none') {
+        res = [];
+      } else {
+        res = angular.element(container);
+      }
+    });
+    return res;
   }
 
   function openMenu(el, triggerType) {
-    inject(function($document) {
-      el.children().eq(0).triggerHandler(triggerType || 'click');
-      $document[0].body.appendChild(el[0]);
-      waitForMenuOpen();
-    });
+    el.children().eq(0).triggerHandler(triggerType || 'click');
+    waitForMenuOpen();
   }
 
   function closeMenu() {

From 9fe3a573ed3dfdc4efb858a72d64827926eed54d Mon Sep 17 00:00:00 2001
From: Ryan Schmukler <rschmukler@gmail.com>
Date: Tue, 8 Dec 2015 02:41:06 -0800
Subject: [PATCH 5/5] fix(menubar): fix broken menubar accessability with
 checkbox and radio menuitems

---
 src/components/menu/js/menuController.js      |  3 +++
 src/components/menu/js/menuServiceProvider.js |  4 ++--
 src/components/menu/menu.spec.js              |  2 +-
 .../menuBar/js/menuItemController.js          | 21 +++++++++++++++----
 .../menuBar/js/menuItemDirective.js           |  1 +
 src/components/menuBar/menu-bar.spec.js       | 10 +++++----
 6 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/menu/js/menuController.js b/src/components/menu/js/menuController.js
index 0bf5097233f..c2bae9451cb 100644
--- a/src/components/menu/js/menuController.js
+++ b/src/components/menu/js/menuController.js
@@ -24,6 +24,7 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
     menuContainer = setMenuContainer;
     // Default element for ARIA attributes has the ngClick or ngMouseenter expression
     triggerElement = $element[0].querySelector('[ng-click],[ng-mouseenter]');
+    triggerElement.setAttribute('aria-expanded', 'false');
 
     this.isInMenuBar = opts.isInMenuBar;
     this.nestedMenus = $mdUtil.nodesToArray(menuContainer[0].querySelectorAll('.md-nested-menu'));
@@ -110,6 +111,7 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
     self.enableHoverListener();
     self.isOpen = true;
     triggerElement = triggerElement || (ev ? ev.target : $element[0]);
+    triggerElement.setAttribute('aria-expanded', 'true');
     $scope.$emit('$mdMenuOpen', $element);
     $mdMenu.show({
       scope: $scope,
@@ -120,6 +122,7 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
       preserveElement: true,
       parent: 'body'
     }).finally(function() {
+      triggerElement.setAttribute('aria-expanded', 'false');
       self.disableHoverListener();
     });
   };
diff --git a/src/components/menu/js/menuServiceProvider.js b/src/components/menu/js/menuServiceProvider.js
index 30d31710b94..1665a272bd6 100644
--- a/src/components/menu/js/menuServiceProvider.js
+++ b/src/components/menu/js/menuServiceProvider.js
@@ -238,13 +238,13 @@ function MenuProvider($$interimElementProvider) {
               handled = true;
               break;
             case $mdConstant.KEY_CODE.UP_ARROW:
-              if (!focusMenuItem(ev, opts.menuContentEl, opts, -1)) {
+              if (!focusMenuItem(ev, opts.menuContentEl, opts, -1) && !opts.nestLevel) {
                 opts.mdMenuCtrl.triggerContainerProxy(ev);
               }
               handled = true;
               break;
             case $mdConstant.KEY_CODE.DOWN_ARROW:
-              if (!focusMenuItem(ev, opts.menuContentEl, opts, 1)) {
+              if (!focusMenuItem(ev, opts.menuContentEl, opts, 1) && !opts.nestLevel) {
                 opts.mdMenuCtrl.triggerContainerProxy(ev);
               }
               handled = true;
diff --git a/src/components/menu/menu.spec.js b/src/components/menu/menu.spec.js
index bd73c3bf370..e9f7cb804fa 100644
--- a/src/components/menu/menu.spec.js
+++ b/src/components/menu/menu.spec.js
@@ -1,4 +1,4 @@
-ddescribe('material.components.menu', function() {
+describe('material.components.menu', function() {
   var attachedElements = [];
   var $mdMenu, $timeout, menuActionPerformed, $mdUtil;
 
diff --git a/src/components/menuBar/js/menuItemController.js b/src/components/menuBar/js/menuItemController.js
index 8c3c9ce259a..d8146db7ec7 100644
--- a/src/components/menuBar/js/menuItemController.js
+++ b/src/components/menuBar/js/menuItemController.js
@@ -22,11 +22,23 @@ MenuItemController.prototype.init = function(ngModel) {
     this.mode  = $attrs.type;
     this.iconEl = $element[0].children[0];
     this.buttonEl = $element[0].children[1];
-    if (ngModel) this.initClickListeners();
+    if (ngModel) {
+      // Clear ngAria set attributes
+      this.initClickListeners();
+    }
   }
 };
 
+MenuItemController.prototype.clearNgAria = function() {
+  var el = this.$element[0];
+  var clearAttrs = ['role', 'tabindex', 'aria-invalid', 'aria-checked'];
+  angular.forEach(clearAttrs, function(attr) {
+    el.removeAttribute(attr);
+  });
+};
+
 MenuItemController.prototype.initClickListeners = function() {
+  var self = this;
   var ngModel = this.ngModel;
   var $scope = this.$scope;
   var $attrs = this.$attrs;
@@ -35,7 +47,7 @@ MenuItemController.prototype.initClickListeners = function() {
 
   this.handleClick = angular.bind(this, this.handleClick);
 
-  var icon = this.iconEl
+  var icon = this.iconEl;
   var button = angular.element(this.buttonEl);
   var handleClick = this.handleClick;
 
@@ -43,12 +55,13 @@ MenuItemController.prototype.initClickListeners = function() {
   setDisabled($attrs.disabled);
 
   ngModel.$render = function render() {
+    self.clearNgAria();
     if (isSelected()) {
       icon.style.display = '';
-      $element.attr('aria-checked', 'true');
+      button.attr('aria-checked', 'true');
     } else {
       icon.style.display = 'none';
-      $element.attr('aria-checked', 'false');
+      button.attr('aria-checked', 'false');
     }
   };
 
diff --git a/src/components/menuBar/js/menuItemDirective.js b/src/components/menuBar/js/menuItemDirective.js
index 75466011ecd..22325e7d47b 100644
--- a/src/components/menuBar/js/menuItemDirective.js
+++ b/src/components/menuBar/js/menuItemDirective.js
@@ -10,6 +10,7 @@ angular
 function MenuItemDirective() {
   return {
     require: ['mdMenuItem', '?ngModel'],
+    priority: 210,
     compile: function(templateEl, templateAttrs) {
       if (templateAttrs.type == 'checkbox' || templateAttrs.type == 'radio') {
         var text = templateEl[0].textContent;
diff --git a/src/components/menuBar/menu-bar.spec.js b/src/components/menuBar/menu-bar.spec.js
index 85c18660e2e..0024a83fb27 100644
--- a/src/components/menuBar/menu-bar.spec.js
+++ b/src/components/menuBar/menu-bar.spec.js
@@ -228,12 +228,13 @@ describe('material.components.menuBar', function() {
       });
       it('reflects the ng-model value', inject(function($rootScope) {
         var menuItem = setup('ng-model="test"')[0];
-        expect(menuItem.getAttribute('aria-checked')).toBe('false');
+        var button = menuItem.querySelector('md-button');
+        expect(button.getAttribute('aria-checked')).toBe('false');
         expect(menuItem.children[0].style.display).toBe('none');
         $rootScope.test = true;
         $rootScope.$digest();
         expect(menuItem.children[0].style.display).toBe('');
-        expect(menuItem.getAttribute('aria-checked')).toBe('true');
+        expect(button.getAttribute('aria-checked')).toBe('true');
       }));
 
       function setup(attrs) {
@@ -283,12 +284,13 @@ describe('material.components.menuBar', function() {
       it('reflects the ng-model value', inject(function($rootScope) {
         $rootScope.test = 'apple';
         var menuItem = setup('ng-model="test" value="hello"')[0];
-        expect(menuItem.getAttribute('aria-checked')).toBe('false');
+        var button = menuItem.querySelector('md-button');
+        expect(button.getAttribute('aria-checked')).toBe('false');
         expect(menuItem.children[0].style.display).toBe('none');
         $rootScope.test = 'hello';
         $rootScope.$digest();
         expect(menuItem.children[0].style.display).toBeFalsy();
-        expect(menuItem.getAttribute('aria-checked')).toBe('true');
+        expect(button.getAttribute('aria-checked')).toBe('true');
       }));
 
       function setup(attrs) {