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> <template>
<div :class="containerClass"> <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"> @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}]" <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"> :aria-label="val" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
<slot name="chip" :value="val" :aria-label="val"> <slot name="chip" :value="val">
<span class="p-chips-token-label">{{val}}</span> <span class="p-chips-token-label">{{val}}</span>
</slot> </slot>
<span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)" aria-hidden="true"></span> <span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)" aria-hidden="true"></span>
</li> </li>
<li class="p-chips-input-token" role="option"> <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"> @focus="onFocus($event)" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)" v-bind="inputProps">
</li> </li>
</ul> </ul>
@ -110,12 +110,15 @@ export default {
break; break;
case 'ArrowLeft': case 'ArrowLeft':
case 'ArrowRight':
if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) { if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
this.$refs.container.focus(); this.$refs.container.focus();
} }
break; break;
case 'ArrowRight':
event.stopPropagation();
break;
default: default:
if (this.separator) { if (this.separator) {
if (this.separator === ',' && event.key === ',') { if (this.separator === ',' && event.key === ',') {
@ -170,11 +173,14 @@ export default {
}, },
onArrowRightKeyOn() { onArrowRightKeyOn() {
if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) { 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.focusedIndex = null;
this.$refs.input.focus(); this.$refs.input.focus();
} }
else {
this.focusedIndex++;
}
} }
}, },
onBackspaceKeyOn(event) { onBackspaceKeyOn(event) {
@ -233,7 +239,7 @@ export default {
}]; }];
}, },
focusedOptionId() { focusedOptionId() {
return this.focusedIndex !== null ? `${this.id}_${this.focusedIndex}` : null; return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
} }
} }
} }