mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-19 12:04:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility for message & message-box & tabs (#7424)

Browse Source 
* 	add accessibility for message & message-box & tabs

* Update message-box.md
This commit is contained in:
maranran
2017-10-15 23:13:10 -05:00
committed by 杨奕
parent 9b09f6aa9f
commit 542deb779b
14 changed files with 273 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/message-box/src/main.vue
View File

@@ -1,14 +1,27 @@
<template>
<transition name="msgbox-fade">
<div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
<div
class="el-message-box__wrapper"
tabindex="-1"
v-show="visible"
@click.self="handleWrapperClick"
role="dialog"
aria-modal="true"
:aria-label="title || 'dialog'"
>
<div class="el-message-box" :class="[customClass, center && 'el-message-box--center']">
<div class="el-message-box__header" v-if="title !== undefined">
<div class="el-message-box__title">
<div class="el-message-box__status" :class="[ typeClass ]" v-if="typeClass && center"></div>
<span>{{ title }}</span>
</div>
<button type="button" class="el-message-box__headerbtn" aria-label="Close"
v-if="showClose" @click="handleAction('cancel')">
<button type="button"
class="el-message-box__headerbtn"
aria-label="Close"
v-if="showClose"
@click="handleAction('cancel')"
@keydown.enter="handleAction('cancel')"
>
<i class="el-message-box__close el-icon-close"></i>
</button>
</div>
@@ -32,7 +45,9 @@
v-show="showCancelButton"
:round="roundButton"
size="small"
@click.native="handleAction('cancel')">
@click.native="handleAction('cancel')"
@keydown.enter="handleAction('cancel')"
>
{{ cancelButtonText || t('el.messagebox.cancel') }}
</el-button>
<el-button
@@ -42,7 +57,9 @@
v-show="showConfirmButton"
:round="roundButton"
size="small"
@click.native="handleAction('confirm')">
@click.native="handleAction('confirm')"
@keydown.enter="handleAction('confirm')"
>
{{ confirmButtonText || t('el.messagebox.confirm') }}
</el-button>
</div>
@@ -58,7 +75,9 @@
import ElButton from 'element-ui/packages/button';
import { addClass, removeClass } from 'element-ui/src/utils/dom';
import { t } from 'element-ui/src/locale';
import Dialog from 'element-ui/src/utils/aria-dialog';
let messageBox;
let typeMap = {
success: 'circle-check',
info: 'information',
@@ -132,7 +151,7 @@
this._closing = true;
this.onClose && this.onClose();
messageBox.closeDialog(); // 解绑
if (this.lockScroll) {
setTimeout(() => {
if (this.modal && this.bodyOverflow !== 'hidden') {
@@ -148,7 +167,9 @@
if (!this.transition) {
this.doAfterClose();
}
if (this.action) this.callback(this.action, this);
setTimeout(() => {
if (this.action) this.callback(this.action, this);
});
},
handleWrapperClick() {
@@ -195,6 +216,11 @@
this.editorErrorMessage = '';
removeClass(this.$refs.input.$el.querySelector('input'), 'invalid');
return true;
},
getFistFocus() {
const $btns = this.$el.querySelector('.el-message-box__btns .el-button');
const $title = this.$el.querySelector('.el-message-box__btns .el-message-box__title');
return $btns && $btns[0] || $title;
}
},
@@ -211,12 +237,18 @@
},
visible(val) {
if (val) this.uid++;
if (this.$type === 'alert' || this.$type === 'confirm') {
this.$nextTick(() => {
this.$refs.confirm.$el.focus();
});
}
if (val) {
this.uid++;
if (this.$type === 'alert' || this.$type === 'confirm') {
this.$nextTick(() => {
this.$refs.confirm.$el.focus();
});
}
this.focusAfterClosed = document.activeElement;
messageBox = new Dialog(this.$el, this.focusAfterClosed, this.getFistFocus());
};
// prompt
if (this.$type !== 'prompt') return;
if (val) {
setTimeout(() => {
@@ -241,6 +273,9 @@
if (this.closeOnHashChange) {
window.removeEventListener('hashchange', this.close);
}
setTimeout(() => {
messageBox.closeDialog();
});
},
data() {
@@ -268,7 +303,8 @@
cancelButtonClass: '',
editorErrorMessage: null,
callback: null,
dangerouslyUseHTMLString: false
dangerouslyUseHTMLString: false,
focusAfterClosed: null
};
}
};