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

Drawer: fix focus bug (#20626) 

Co-authored-by: wp178491 <wp178491@alibaba-inc.com>
pull/20638/head
好多大米 2020-12-30 13:25:23 +08:00 committed by GitHub
parent 127dfadb6a
commit 3d7c3d71df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 2 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/drawer/src/main.vue
View File

@ -26,7 +26,7 @@
> >
<header class="el-drawer__header" id="el-drawer__title" v-if="withHeader"> <header class="el-drawer__header" id="el-drawer__title" v-if="withHeader">
<slot name="title"> <slot name="title">
<span role="heading" tabindex="0" :title="title">{{ title }}</span> <span role="heading" :title="title">{{ title }}</span>
</slot> </slot>
<button <button
:aria-label="`close ${title || 'drawer'}`" :aria-label="`close ${title || 'drawer'}`"
@ -49,7 +49,6 @@
<script> <script>
import Popup from 'element-ui/src/utils/popup'; import Popup from 'element-ui/src/utils/popup';
import emitter from 'element-ui/src/mixins/emitter'; import emitter from 'element-ui/src/mixins/emitter';
import Utils from 'element-ui/src/utils/aria-utils';
export default { export default {
name: 'ElDrawer', name: 'ElDrawer',
@ -133,9 +132,6 @@ export default {
document.body.appendChild(this.$el); document.body.appendChild(this.$el);
} }
this.prevActiveElement = document.activeElement; this.prevActiveElement = document.activeElement;
this.$nextTick(() => {
Utils.focusFirstDescendant(this.$refs.drawer);
});
} else { } else {
if (!this.closed) this.$emit('close'); if (!this.closed) this.$emit('close');
this.$nextTick(() => { this.$nextTick(() => {

1
packages/theme-chalk/src/drawer.scss
View File

@ -119,6 +119,7 @@ $directions: rtl, ltr, ttb, btt;
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12); 0 6px 30px 5px rgba(0, 0, 0, 0.12);
overflow: hidden; overflow: hidden;
outline: 0;
@each $direction in $directions { @each $direction in $directions {
@include animation-out($direction); @include animation-out($direction);