github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: popup close button accessible with `tab` key

pull/5181/head
chikara-chan 2017-05-10 17:02:59 +08:00 committed by 杨奕
parent 6563a3a804
commit d41c0c4ba9
4 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/dialog/src/component.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="dialog-fade"> <transition name="dialog-fade">
<div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick"> <div class="el-dialog__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
<div <div
class="el-dialog" class="el-dialog"
:class="[sizeClass, customClass]" :class="[sizeClass, customClass]"
@ -10,9 +10,10 @@
<slot name="title"> <slot name="title">
<span class="el-dialog__title">{{title}}</span> <span class="el-dialog__title">{{title}}</span>
</slot> </slot>
<div class="el-dialog__headerbtn"> <button type="button" class="el-dialog__headerbtn" aria-label="Close"
<i v-if="showClose" class="el-dialog__close el-icon el-icon-close" @click='handleClose'></i> v-if="showClose" @click="handleClose">
</div> <i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</div> </div>
<div class="el-dialog__body" v-if="rendered"><slot></slot></div> <div class="el-dialog__body" v-if="rendered"><slot></slot></div>
<div class="el-dialog__footer" v-if="$slots.footer"> <div class="el-dialog__footer" v-if="$slots.footer">

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

@ -1,10 +1,13 @@
<template> <template>
<transition name="msgbox-fade"> <transition name="msgbox-fade">
<div class="el-message-box__wrapper" v-show="visible" @click.self="handleWrapperClick"> <div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
<div class="el-message-box" :class="customClass"> <div class="el-message-box" :class="customClass">
<div class="el-message-box__header" v-if="title !== undefined"> <div class="el-message-box__header" v-if="title !== undefined">
<div class="el-message-box__title">{{ title || t('el.messagebox.title') }}</div> <div class="el-message-box__title">{{ title || t('el.messagebox.title') }}</div>
<i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i> <button type="button" class="el-message-box__headerbtn" aria-label="Close"
v-if="showClose" @click="handleAction('cancel')">
<i class="el-message-box__close el-icon-close"></i>
</button>
</div> </div>
<div class="el-message-box__content" v-if="message !== ''"> <div class="el-message-box__content" v-if="message !== ''">
<div class="el-message-box__status" :class="[ typeClass ]"></div> <div class="el-message-box__status" :class="[ typeClass ]"></div>

20
packages/theme-default/src/dialog.css
View File

@ -44,14 +44,24 @@
padding: 20px 20px 0; padding: 20px 20px 0;
} }
@e close { @e headerbtn {
float: right;
background: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer; cursor: pointer;
color: var(--dialog-close-color);
&:hover { .el-dialog__close {
color: var(--dialog-close-color);
}
&:focus, &:hover {
.el-dialog__close {
color: var(--dialog-close-hover-color); color: var(--dialog-close-hover-color);
} }
} }
}
@e title { @e title {
line-height: 1; line-height: 1;
@ -66,10 +76,6 @@
font-size: var(--dialog-font-size); font-size: var(--dialog-font-size);
} }
@e headerbtn {
float: right;
}
@e footer { @e footer {
padding: 10px 20px 15px; padding: 10px 20px 15px;
text-align: right; text-align: right;

37
packages/theme-default/src/message-box.css
View File

@ -37,6 +37,28 @@
padding: 20px 20px 0; padding: 20px 20px 0;
} }
@e headerbtn {
position: absolute;
top: 19px;
right: 20px;
background: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer;
.el-message-box__close {
color: #999;
}
&:focus, &:hover {
.el-message-box__close {
color: var(--color-primary);
}
}
}
@e content { @e content {
padding: 30px 20px; padding: 30px 20px;
color: var(--msgbox-content-color); color: var(--msgbox-content-color);
@ -44,21 +66,6 @@
position: relative; position: relative;
} }
@e close {
display: inline-block;
position: absolute;
top: 19px;
right: 20px;
color: #999;
cursor: pointer;
line-height: 20px;
text-align: center;
&:hover {
color: var(--color-primary);
}
}
@e input { @e input {
padding-top: 15px; padding-top: 15px;
& input.invalid { & input.invalid {