mirror of https://github.com/ElemeFE/element
add accessibility for menu
parent
0a597a949e
commit
d6f04caefd
|
@ -3,11 +3,16 @@
|
||||||
:style="[paddingStyle, itemStyle, { backgroundColor }]"
|
:style="[paddingStyle, itemStyle, { backgroundColor }]"
|
||||||
@click="handleClick"
|
@click="handleClick"
|
||||||
@mouseenter="onMouseEnter"
|
@mouseenter="onMouseEnter"
|
||||||
|
@focus="onMouseEnter"
|
||||||
|
@blur="onMouseLeave"
|
||||||
@mouseleave="onMouseLeave"
|
@mouseleave="onMouseLeave"
|
||||||
:class="{
|
:class="{
|
||||||
'is-active': active,
|
'is-active': active,
|
||||||
'is-disabled': disabled
|
'is-disabled': disabled
|
||||||
}">
|
}"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
v-if="$parent === rootMenu && rootMenu.collapse"
|
v-if="$parent === rootMenu && rootMenu.collapse"
|
||||||
effect="dark"
|
effect="dark"
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
'el-menu--horizontal': mode === 'horizontal',
|
'el-menu--horizontal': mode === 'horizontal',
|
||||||
'el-menu--collapse': collapse
|
'el-menu--collapse': collapse
|
||||||
}"
|
}"
|
||||||
|
role="menubar"
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -14,6 +15,7 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import emitter from 'element-ui/src/mixins/emitter';
|
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';
|
import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -259,6 +261,10 @@
|
||||||
this.initOpenedMenu();
|
this.initOpenedMenu();
|
||||||
this.$on('item-click', this.handleItemClick);
|
this.$on('item-click', this.handleItemClick);
|
||||||
this.$on('submenu-click', this.handleSubmenuClick);
|
this.$on('submenu-click', this.handleSubmenuClick);
|
||||||
|
if (this.mode === 'horizontal') {
|
||||||
|
let menu = new Menubar(this.$el); // eslint-disable-line
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -7,6 +7,10 @@
|
||||||
}"
|
}"
|
||||||
@mouseenter="handleMouseenter"
|
@mouseenter="handleMouseenter"
|
||||||
@mouseleave="handleMouseleave"
|
@mouseleave="handleMouseleave"
|
||||||
|
@focus="handleMouseenter"
|
||||||
|
role="menuitem"
|
||||||
|
aria-haspopup="true"
|
||||||
|
:aria-expanded="opened"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="el-submenu__title"
|
class="el-submenu__title"
|
||||||
|
@ -25,11 +29,11 @@
|
||||||
</div>
|
</div>
|
||||||
<template v-if="rootMenu.mode === 'horizontal' || (rootMenu.mode === 'vertical' && rootMenu.collapse)">
|
<template v-if="rootMenu.mode === 'horizontal' || (rootMenu.mode === 'vertical' && rootMenu.collapse)">
|
||||||
<transition :name="menuTransitionName">
|
<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>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
<el-collapse-transition v-else>
|
<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>
|
</el-collapse-transition>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -47,14 +47,19 @@
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover, &:focus{
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& .el-submenu {
|
& .el-submenu {
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
> .el-submenu__title {
|
||||||
|
color: $--color-text-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
> .el-menu {
|
> .el-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 65px;
|
top: 65px;
|
||||||
|
@ -95,7 +100,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
& .el-menu-item:hover,
|
& .el-menu-item:hover,
|
||||||
& .el-submenu__title:hover {
|
& .el-submenu__title:hover,
|
||||||
|
& .el-menu-item:focus {
|
||||||
|
outline: none;
|
||||||
color: $--color-text-primary;
|
color: $--color-text-primary;
|
||||||
}
|
}
|
||||||
& > .el-menu-item.is-active,
|
& > .el-menu-item.is-active,
|
||||||
|
@ -169,7 +176,8 @@
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover, &:focus {
|
||||||
|
outline: none;
|
||||||
background-color: $--menu-item-hover-fill;
|
background-color: $--menu-item-hover-fill;
|
||||||
}
|
}
|
||||||
i {
|
i {
|
||||||
|
|
|
@ -0,0 +1,121 @@
|
||||||
|
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;
|
|
@ -0,0 +1,14 @@
|
||||||
|
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;
|
|
@ -0,0 +1,49 @@
|
||||||
|
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;
|
|
@ -0,0 +1,59 @@
|
||||||
|
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;
|
Loading…
Reference in New Issue