vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor Chips Accessibility

pull/2835/head
Tuğçe Küçükoğlu 2022-08-10 11:20:11 +03:00
parent 0196c53873
commit ec2d9ac225
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/chips/Chips.vue
View File

@ -1,16 +1,16 @@
<template>
<div :class="containerClass">
<ul ref="container" class="p-inputtext p-chips-multiple-container" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-activedescendant="focused ? focusedOptionId : undefined"
<ul ref="container" class="p-inputtext p-chips-multiple-container" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :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">
<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-label="val" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
<slot name="chip" :value="val">
<span class="p-chips-token-label">{{val}}</span>
</slot>
<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" role="option">
<input ref="input" type="text" :id="inputId" :class="inputClass" :style="inputStyle" :disabled="disabled || maxedOut" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
<input ref="input" type="text" :id="inputId" :class="inputClass" :style="inputStyle" :disabled="disabled || maxedOut"
@focus="onFocus($event)" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)" v-bind="inputProps">
</li>
</ul>
@ -110,12 +110,15 @@ export default {
break;
case 'ArrowLeft':
case 'ArrowRight':
if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
this.$refs.container.focus();
}
break;
case 'ArrowRight':
event.stopPropagation();
break;
default:
if (this.separator) {
if (this.separator === ',' && event.key === ',') {
@ -170,11 +173,14 @@ export default {
},
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) {
if (this.focusedIndex === this.modelValue.length - 1) {
this.focusedIndex = null;
this.$refs.input.focus();
}
else {
this.focusedIndex++;
}
}
},
onBackspaceKeyOn(event) {
@ -233,7 +239,7 @@ export default {
}];
},
focusedOptionId() {
return this.focusedIndex !== null ? `${this.id}_${this.focusedIndex}` : null;
return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
}
}
}