Chips | keydown accessibility update
Tuğçe Küçükoğlu
parent
e560f322c1
commit
736304879a
|
|
@ -1,13 +1,15 @@
|
|||
<template>
|
||||
<div :class="containerClass">
|
||||
<ul :class="['p-inputtext p-chips-multiple-container', {'p-disabled': disabled, 'p-focus': focused}]" role="listbox" aria-orientation="horizontal" @click="onWrapperClick()">
|
||||
<li v-for="(val,i) of modelValue" :key="`${i}_${val}`" role="option" :class="['p-chips-token', {'p-focus': focusedIndex === i}]">
|
||||
<ul ref="container" class="p-inputtext p-chips-multiple-container" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-activedescendant="focused ? focusedOptionId : undefined"
|
||||
@click="onWrapperClick()" @focus="onContainerFocus" @blur="onContainerBlur" @keydown="onContainerKeyDown">
|
||||
<li v-for="(val,i) of modelValue" :key="`${i}_${val}`" :id="id + '_chips_item' + i" role="option" :class="['p-chips-token', {'p-focus': focusedIndex === i}]"
|
||||
:aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
|
||||
<slot name="chip" :value="val" :aria-label="val">
|
||||
<span class="p-chips-token-label">{{val}}</span>
|
||||
</slot>
|
||||
<span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
|
||||
<span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)" aria-hidden="true"></span>
|
||||
</li>
|
||||
<li class="p-chips-input-token">
|
||||
<li class="p-chips-input-token" role="option">
|
||||
<input ref="input" type="text" :id="inputId" :class="inputClass" :style="inputStyle" :disabled="disabled || maxedOut" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
|
||||
@focus="onFocus($event)" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)" v-bind="inputProps">
|
||||
</li>
|
||||
|
|
@ -16,6 +18,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {UniqueComponentId} from 'primevue/utils';
|
||||
|
||||
export default {
|
||||
name: 'Chips',
|
||||
emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
|
||||
|
|
@ -59,6 +63,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
id: UniqueComponentId(),
|
||||
inputValue: null,
|
||||
focused: false,
|
||||
focusedIndex: null
|
||||
|
|
@ -96,7 +101,6 @@ export default {
|
|||
}
|
||||
else this.removeItem(event, this.modelValue.length - 1);
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 'Enter':
|
||||
|
|
@ -106,16 +110,9 @@ export default {
|
|||
break;
|
||||
|
||||
case 'ArrowLeft':
|
||||
if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
|
||||
this.focusedIndex = this.focusedIndex === null ? this.modelValue.length -1 : this.focusedIndex - 1;
|
||||
if (this.focusedIndex < 0) this.focusedIndex = 0;
|
||||
}
|
||||
break;
|
||||
|
||||
case 'ArrowRight':
|
||||
if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
|
||||
this.focusedIndex = this.focusedIndex === null ? 0 : this.focusedIndex + 1;
|
||||
if (this.focusedIndex === this.modelValue.length) this.focusedIndex = this.modelValue.length - 1;
|
||||
this.$refs.container.focus();
|
||||
}
|
||||
break;
|
||||
|
||||
|
|
@ -140,6 +137,51 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
onContainerFocus() {
|
||||
this.focused = true;
|
||||
},
|
||||
onContainerBlur() {
|
||||
this.focusedIndex = -1;
|
||||
this.focused = false;
|
||||
},
|
||||
onContainerKeyDown(event) {
|
||||
switch (event.code) {
|
||||
case 'ArrowLeft':
|
||||
this.onArrowLeftKeyOn(event);
|
||||
break;
|
||||
|
||||
case 'ArrowRight':
|
||||
this.onArrowRightKeyOn(event);
|
||||
break;
|
||||
|
||||
case 'Backspace':
|
||||
this.onBackspaceKeyOn(event);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
onArrowLeftKeyOn() {
|
||||
if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
|
||||
this.focusedIndex = this.focusedIndex === null ? this.modelValue.length - 1 : this.focusedIndex - 1;
|
||||
if (this.focusedIndex < 0) this.focusedIndex = 0;
|
||||
}
|
||||
},
|
||||
onArrowRightKeyOn() {
|
||||
if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
|
||||
this.focusedIndex = this.focusedIndex === null ? 0 : this.focusedIndex + 1;
|
||||
if (this.focusedIndex === this.modelValue.length) {
|
||||
this.focusedIndex = null;
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
onBackspaceKeyOn(event) {
|
||||
if (this.focusedIndex !== null) {
|
||||
this.removeItem(event, this.focusedIndex);
|
||||
}
|
||||
},
|
||||
updateModel(event, value, preventDefault) {
|
||||
this.$emit('update:modelValue', value);
|
||||
this.$emit('add', {
|
||||
|
|
@ -169,7 +211,8 @@ export default {
|
|||
|
||||
let values = [...this.modelValue];
|
||||
const removedItem = values.splice(index, 1);
|
||||
if (values.length === 0) this.focusedIndex = null;
|
||||
this.focusedIndex = null;
|
||||
this.$refs.input.focus();
|
||||
this.$emit('update:modelValue', values);
|
||||
this.$emit('remove', {
|
||||
originalEvent: event,
|
||||
|
|
@ -183,9 +226,14 @@ export default {
|
|||
},
|
||||
containerClass() {
|
||||
return ['p-chips p-component p-inputwrapper', {
|
||||
'p-disabled': this.disabled,
|
||||
'p-focus': this.focused,
|
||||
'p-inputwrapper-filled': ((this.modelValue && this.modelValue.length) || (this.inputValue && this.inputValue.length)),
|
||||
'p-inputwrapper-focus': this.focused
|
||||
}];
|
||||
},
|
||||
focusedOptionId() {
|
||||
return this.focusedIndex !== null ? `${this.id}_${this.focusedIndex}` : null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue