From 0b5a8663043d8056cc11bac22d0ef791e6be562d Mon Sep 17 00:00:00 2001
From: meet vaghasiya <meetvaghasiya2012@gmail.com>
Date: Sun, 12 Oct 2025 11:01:03 +0530
Subject: [PATCH 1/3] feat(Chip): Improve accessibility for removable chips

- Add tabindex and role attributes to removable chip remove icon
- Implement keyboard interaction for remove icon (Enter, Space, Backspace keys)
- Prevent default event behavior on key interactions
- Add dynamic aria-label for remove icon using locale configuration
- Enhance keyboard navigation and screen reader support for chip removal
---
 packages/primevue/src/chip/Chip.vue | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/primevue/src/chip/Chip.vue b/packages/primevue/src/chip/Chip.vue
index 2042d6915d..88a28f3d17 100644
--- a/packages/primevue/src/chip/Chip.vue
+++ b/packages/primevue/src/chip/Chip.vue
@@ -7,7 +7,17 @@
             <div v-if="label !== null" :class="cx('label')" v-bind="ptm('label')">{{ label }}</div>
         </slot>
         <slot v-if="removable" name="removeicon" :removeCallback="close" :keydownCallback="onKeydown">
-            <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeIcon'), removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
+            <component
+                :is="removeIcon ? 'span' : 'TimesCircleIcon'"
+                :class="[cx('removeIcon'), removeIcon]"
+                :tabindex="disabled ? -1 : 0"
+                role="button"
+                :aria-label="removeAriaLabel"
+                :aria-disabled="disabled"
+                @click="!disabled && close($event)"
+                @keydown="onKeydown"
+                v-bind="ptm('removeIcon')"
+            ></component>
         </slot>
     </div>
 </template>
@@ -29,13 +39,16 @@ export default {
     },
     methods: {
         onKeydown(event) {
-            if (event.key === 'Enter' || event.key === 'Backspace') {
+            if (!this.disabled && (event.key === 'Enter' || event.key === ' ' || event.key === 'Backspace')) {
+                event.preventDefault();
                 this.close(event);
             }
         },
         close(event) {
-            this.visible = false;
-            this.$emit('remove', event);
+            if (!this.disabled) {
+                this.visible = false;
+                this.$emit('remove', event);
+            }
         }
     },
     computed: {
@@ -43,6 +56,9 @@ export default {
             return cn({
                 removable: this.removable
             });
+        },
+        removeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
     components: {

From aedb81c0c398a97bea363316b1ee4d02b5404090 Mon Sep 17 00:00:00 2001
From: meet vaghasiya <meetvaghasiya2012@gmail.com>
Date: Sun, 12 Oct 2025 11:59:23 +0530
Subject: [PATCH 2/3] feat(Chip): Improve remove button accessibility

- Add dynamic aria-label for remove button with label context
- Fallback to generic 'close' label if no specific label is provided
- Enhance screen reader experience for chip removal interaction
---
 packages/primevue/src/chip/Chip.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/primevue/src/chip/Chip.vue b/packages/primevue/src/chip/Chip.vue
index 88a28f3d17..19047f2de1 100644
--- a/packages/primevue/src/chip/Chip.vue
+++ b/packages/primevue/src/chip/Chip.vue
@@ -58,7 +58,9 @@ export default {
             });
         },
         removeAriaLabel() {
-            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+            const closeLabel = this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : 'close';
+
+            return this.label ? `${closeLabel} ${this.label}` : closeLabel;
         }
     },
     components: {

From 298355a745d8bef76b750f01966123ab87cde495 Mon Sep 17 00:00:00 2001
From: meet vaghasiya <meetvaghasiya2012@gmail.com>
Date: Mon, 13 Oct 2025 16:46:07 +0530
Subject: [PATCH 3/3] feat(Chip): Simplify remove button logic and improve
 accessibility

---
 packages/primevue/src/chip/Chip.vue | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/primevue/src/chip/Chip.vue b/packages/primevue/src/chip/Chip.vue
index 19047f2de1..60a818d9f0 100644
--- a/packages/primevue/src/chip/Chip.vue
+++ b/packages/primevue/src/chip/Chip.vue
@@ -7,17 +7,7 @@
             <div v-if="label !== null" :class="cx('label')" v-bind="ptm('label')">{{ label }}</div>
         </slot>
         <slot v-if="removable" name="removeicon" :removeCallback="close" :keydownCallback="onKeydown">
-            <component
-                :is="removeIcon ? 'span' : 'TimesCircleIcon'"
-                :class="[cx('removeIcon'), removeIcon]"
-                :tabindex="disabled ? -1 : 0"
-                role="button"
-                :aria-label="removeAriaLabel"
-                :aria-disabled="disabled"
-                @click="!disabled && close($event)"
-                @keydown="onKeydown"
-                v-bind="ptm('removeIcon')"
-            ></component>
+            <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeIcon'), removeIcon]" :tabindex="0" role="button" :aria-label="removeAriaLabel" @click="close($event)" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
         </slot>
     </div>
 </template>
@@ -39,16 +29,14 @@ export default {
     },
     methods: {
         onKeydown(event) {
-            if (!this.disabled && (event.key === 'Enter' || event.key === ' ' || event.key === 'Backspace')) {
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Backspace') {
                 event.preventDefault();
                 this.close(event);
             }
         },
         close(event) {
-            if (!this.disabled) {
-                this.visible = false;
-                this.$emit('remove', event);
-            }
+            this.visible = false;
+            this.$emit('remove', event);
         }
     },
     computed: {