From 736304879a6a38fac7c7ed06a187f8c271745db0 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: Tue, 9 Aug 2022 16:43:59 +0300
Subject: [PATCH] Chips | keydown accessibility update

---
 src/components/chips/Chips.vue | 76 +++++++++++++++++++++++++++-------
 1 file changed, 62 insertions(+), 14 deletions(-)

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