Select support a part of keyboard accessibility, #1647
This commit is contained in:
parent
2c6b8f09b7
commit
2fbe636b52
2 changed files with 15 additions and 1 deletions
|
@ -1,5 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="classes" v-clickoutside="handleClose">
|
<div
|
||||||
|
tabindex="0"
|
||||||
|
@keydown.down="handleFocus"
|
||||||
|
:class="classes"
|
||||||
|
v-clickoutside="handleClose">
|
||||||
<div
|
<div
|
||||||
:class="selectionCls"
|
:class="selectionCls"
|
||||||
ref="reference"
|
ref="reference"
|
||||||
|
@ -260,6 +264,10 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// open when focus on Select and press `down` key
|
||||||
|
handleFocus () {
|
||||||
|
if (!this.visible) this.toggleMenu();
|
||||||
|
},
|
||||||
toggleMenu () {
|
toggleMenu () {
|
||||||
if (this.disabled || this.autoComplete) {
|
if (this.disabled || this.autoComplete) {
|
||||||
return false;
|
return false;
|
||||||
|
|
|
@ -55,6 +55,12 @@
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:focus{
|
||||||
|
outline: 0;
|
||||||
|
.@{select-prefix-cls}-selection{
|
||||||
|
.active();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&-disabled {
|
&-disabled {
|
||||||
.@{select-prefix-cls}-selection {
|
.@{select-prefix-cls}-selection {
|
||||||
|
|
Loading…
Add table
Reference in a new issue