From ec2d9ac2252c7f2b10af61b4a7fb489b97769835 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 10 Aug 2022 11:20:11 +0300
Subject: [PATCH] Refactor Chips Accessibility

---
 src/components/chips/Chips.vue | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/chips/Chips.vue b/src/components/chips/Chips.vue
index cc0cfb53a..1092a28ae 100755
--- a/src/components/chips/Chips.vue
+++ b/src/components/chips/Chips.vue
@@ -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;
         }
     }
 }