add accessibility for menu

packages/menu/src/menu-item.vue

@@ -3,11 +3,16 @@
     :style="[paddingStyle, itemStyle, { backgroundColor }]"
     @click="handleClick"
     @mouseenter="onMouseEnter"
+    @focus="onMouseEnter"
+    @blur="onMouseLeave"
     @mouseleave="onMouseLeave"
     :class="{
       'is-active': active,
       'is-disabled': disabled
-    }">
+    }"
+    role="menuitem"
+    tabindex="-1"
+  >
     <el-tooltip
       v-if="$parent === rootMenu && rootMenu.collapse"
       effect="dark"

packages/menu/src/menu.vue

@@ -7,6 +7,7 @@
         'el-menu--horizontal': mode === 'horizontal',
         'el-menu--collapse': collapse
       }"
+      role="menubar"
     >
       <slot></slot>
     </ul>
@@ -14,6 +15,7 @@
 </template>
 <script>
   import emitter from 'element-ui/src/mixins/emitter';
+  import Menubar from 'element-ui/src/utils/menu/aria-menubar';
   import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
 
   export default {
@@ -259,6 +261,10 @@
       this.initOpenedMenu();
       this.$on('item-click', this.handleItemClick);
       this.$on('submenu-click', this.handleSubmenuClick);
+      if (this.mode === 'horizontal') {
+        let menu = new Menubar(this.$el); // eslint-disable-line
+      }
+
     }
   };
 </script>

packages/menu/src/submenu.vue

@@ -7,6 +7,10 @@
     }"
     @mouseenter="handleMouseenter"
     @mouseleave="handleMouseleave"
+    @focus="handleMouseenter"
+    role="menuitem"
+    aria-haspopup="true"
+    :aria-expanded="opened"
   >
     <div
       class="el-submenu__title"
@@ -25,11 +29,11 @@
     </div>
     <template v-if="rootMenu.mode === 'horizontal' || (rootMenu.mode === 'vertical' && rootMenu.collapse)">
       <transition :name="menuTransitionName">
-        <ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }"><slot></slot></ul>
+        <ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }" role="menu"><slot></slot></ul>
       </transition>
     </template>
     <el-collapse-transition v-else>
-      <ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }"><slot></slot></ul>
+      <ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }" role="menu"><slot></slot></ul>
     </el-collapse-transition>
   </li>
 </template>

packages/theme-chalk/src/menu.scss

@@ -47,14 +47,19 @@
         color: inherit;
       }
 
-      &:hover {
+      &:hover, &:focus{
         background-color: #fff;
       }
     }
     & .el-submenu {
       float: left;
       position: relative;
-
+      &:focus {
+        outline: none;
+        > .el-submenu__title {
+          color: $--color-text-primary;
+        }
+      }
       > .el-menu {
         position: absolute;
         top: 65px;
@@ -95,7 +100,9 @@
       }
     }
     & .el-menu-item:hover,
-    & .el-submenu__title:hover {
+    & .el-submenu__title:hover,
+    & .el-menu-item:focus {
+      outline: none;
       color: $--color-text-primary;
     }
     & > .el-menu-item.is-active,
@@ -169,7 +176,8 @@
   &:last-child {
     margin-right: 0;
   }
-  &:hover {
+  &:hover, &:focus {
+    outline: none;
     background-color: $--menu-item-hover-fill;
   }
   i {

src/utils/aria-utils.js

+var aria = aria || {};
+
+aria.Utils = aria.Utils || {};
+
+/**
+ * @desc Set focus on descendant nodes until the first focusable element is
+ *       found.
+ * @param element
+ *          DOM node for which to find the first focusable descendant.
+ * @returns
+ *  true if a focusable element is found and focus is set.
+ */
+aria.Utils.focusFirstDescendant = function(element) {
+  for (var i = 0; i < element.childNodes.length; i++) {
+    var child = element.childNodes[i];
+    if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @desc Find the last descendant node that is focusable.
+ * @param element
+ *          DOM node for which to find the last focusable descendant.
+ * @returns
+ *  true if a focusable element is found and focus is set.
+ */
+
+aria.Utils.focusLastDescendant = function(element) {
+  for (var i = element.childNodes.length - 1; i >= 0; i--) {
+    var child = element.childNodes[i];
+    if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @desc Set Attempt to set focus on the current node.
+ * @param element
+ *          The node to attempt to focus on.
+ * @returns
+ *  true if element is focused.
+ */
+aria.Utils.attemptFocus = function(element) {
+  if (!aria.Utils.isFocusable(element)) {
+    return false;
+  }
+  aria.Utils.IgnoreUtilFocusChanges = true;
+  try {
+    element.focus();
+  } catch (e) {
+  }
+  aria.Utils.IgnoreUtilFocusChanges = false;
+  return (document.activeElement === element);
+};
+
+aria.Utils.isFocusable = function(element) {
+  if (element.tabIndex > 0 || (element.tabIndex === 0 && element.getAttribute('tabIndex') !== null)) {
+    return true;
+  }
+
+  if (element.disabled) {
+    return false;
+  }
+
+  switch (element.nodeName) {
+    case 'A':
+      return !!element.href && element.rel !== 'ignore';
+    case 'INPUT':
+      return element.type !== 'hidden' && element.type !== 'file';
+    case 'BUTTON':
+    case 'SELECT':
+    case 'TEXTAREA':
+      return true;
+    default:
+      return false;
+  }
+};
+
+/**
+ * 触发一个事件
+ * mouseenter, mouseleave, mouseover, keyup, change, click 等
+ * @param  {Element} elm
+ * @param  {String} name
+ * @param  {*} opts
+ */
+aria.Utils.triggerEvent = function(elm, name, ...opts) {
+  let eventName;
+
+  if (/^mouse|click/.test(name)) {
+    eventName = 'MouseEvents';
+  } else if (/^key/.test(name)) {
+    eventName = 'KeyboardEvent';
+  } else {
+    eventName = 'HTMLEvents';
+  }
+  const evt = document.createEvent(eventName);
+
+  evt.initEvent(name, ...opts);
+  elm.dispatchEvent
+    ? elm.dispatchEvent(evt)
+    : elm.fireEvent('on' + name, evt);
+
+  return elm;
+};
+
+aria.Utils.keys = {
+  tab: 9,
+  enter: 13,
+  space: 32,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40
+};
+
+export default aria.Utils;

src/utils/menu/aria-menubar.js

+import MenuItem from './aria-menuitem';
+
+var menu = function(domNode) {
+  this.domNode = domNode;
+  this.init();
+};
+
+menu.prototype.init = function() {
+  let menuChild = this.domNode.childNodes;
+  menuChild.forEach((child) => {
+    let menuItem = new MenuItem(child); // eslint-disable-line
+  });
+};
+export default menu;

src/utils/menu/aria-menuitem.js

+import Utils from '../aria-utils';
+import SubMenu from './aria-submenu';
+
+var menuItem = function(domNode) {
+  this.domNode = domNode;
+  this.submenu = null;
+  this.init();
+};
+
+menuItem.prototype.init = function() {
+  this.domNode.setAttribute('tabindex', '0');
+  let menuChild = this.domNode.querySelector('.el-menu');
+  if (menuChild) {
+    this.submenu = new SubMenu(this, menuChild);
+  }
+  this.addListeners();
+};
+
+menuItem.prototype.addListeners = function() {
+  const keys = Utils.keys;
+  this.domNode.addEventListener('keydown', event => {
+    var prevdef = false;
+    switch (event.keyCode) {
+      case keys.down:
+        Utils.triggerEvent(event.currentTarget, 'mouseenter');
+        this.submenu.gotoSubIndex(0);
+        prevdef = true;
+        break;
+      case keys.up:
+        Utils.triggerEvent(event.currentTarget, 'mouseenter');
+        this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
+        prevdef = true;
+        break;
+      case keys.tab:
+        Utils.triggerEvent(event.currentTarget, 'mouseleave');
+        break;
+      case keys.enter:
+      case keys.space:
+        prevdef = true;
+        event.currentTarget.click();
+        break;
+    }
+    if (prevdef) {
+      event.preventDefault();
+    }
+  });
+};
+
+export default menuItem;

src/utils/menu/aria-submenu.js

+import Utils from '../aria-utils';
+
+var Menu = function(parent, domNode) {
+  this.domNode = domNode;
+  this.parent = parent;
+  this.subMenuItems = [];
+  this.subIndex = 0;
+  this.init();
+};
+
+Menu.prototype.init = function() {
+  this.subMenuItems = this.domNode.querySelectorAll('li');
+  this.addListeners();
+};
+
+Menu.prototype.gotoSubIndex = function(idx) {
+  if (idx === this.subMenuItems.length) {
+    idx = 0;
+  } else if (idx < 0) {
+    idx = this.subMenuItems.length - 1;
+  }
+  this.subMenuItems[idx].focus();
+  this.subIndex = idx;
+};
+
+Menu.prototype.addListeners = function() {
+  const keys = Utils.keys;
+  const parentNode = this.parent.domNode;
+  Array.prototype.forEach.call(this.subMenuItems, el => {
+    el.addEventListener('keydown', event => {
+      let prevdef = false;
+      switch (event.keyCode) {
+        case keys.down:
+          this.gotoSubIndex(this.subIndex + 1);
+          prevdef = true;
+          break;
+        case keys.up:
+          this.gotoSubIndex(this.subIndex - 1);
+          prevdef = true;
+          break;
+        case keys.tab:
+          Utils.triggerEvent(parentNode, 'mouseleave');
+          break;
+        case keys.enter:
+        case keys.space:
+          prevdef = true;
+          event.currentTarget.click();
+          break;
+      }
+      if (prevdef) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      return false;
+    });
+  });
+};
+
+export default Menu;