From 26a9766f9c163552b9403879ee43d9acd18674e2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 11 Mar 2026 15:27:23 +0000
Subject: [PATCH 1/5] Limit filter delete action to the "x" to prevent
 accidental destructive action

---
 .../js/components/ui/Listing/Filters.vue      | 151 +++++++++++-------
 1 file changed, 94 insertions(+), 57 deletions(-)

diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 79d342a19a..7ace415814 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -33,12 +33,66 @@ const fieldFilterBadges = computed(() => Object.entries(activeFilterBadges.value
     .flatMap(([filter, badges]) => Object.entries(badges).map(([handle, badge]) => ({ filter, handle, badge })))
 );
 
+const filterPanels = computed(() => [
+    ...fieldFilters.value.map((filter) => ({
+        handle: filter.handle,
+        title: filter.title,
+        component: FieldFilter,
+        componentProps: {
+            config: filter,
+            values: activeFilters.value[filter.handle] || {},
+        },
+    })),
+    ...standardFilters.value.map((filter) => ({
+        handle: filter.handle,
+        title: filter.title,
+        component: DataListFilter,
+        componentProps: {
+            filter,
+            values: activeFilters.value[filter.handle],
+        },
+    })),
+]);
+
+const badgeChipClasses = 'group last:me-12 inline-flex h-10 items-center gap-1 rounded-lg bg-gray-950/5 ps-4 pe-2 text-sm font-medium text-gray-900 dark:bg-white/4 dark:text-gray-200';
+const badgeChipClearButtonClasses = 'opacity-100 [&_svg]:size-4';
+
+const badgeChips = computed(() => [
+    ...fieldFilterBadges.value.map(({ filter, handle, badge }) => ({
+        key: `${filter}-${handle}`,
+        filter,
+        handle,
+        badge,
+        isFieldBadge: true,
+    })),
+    ...Object.entries(standardBadges.value).map(([handle, badge]) => ({
+        key: handle,
+        handle,
+        badge,
+        isFieldBadge: false,
+    })),
+]);
+
 function removeFieldFilter(filterHandle, fieldHandle) {
     const fields = { ...activeFilters.value[filterHandle] };
     delete fields[fieldHandle];
     setFilter(filterHandle, fields);
 }
 
+function clearBadgeChip(chip) {
+    if (chip.isFieldBadge) {
+        removeFieldFilter(chip.filter, chip.handle);
+
+        return;
+    }
+
+    setFilter(chip.handle, null);
+}
+
+function isDateBadge(chip) {
+    return chip.isFieldBadge && chip.handle === 'date';
+}
+
 function isActive(handle) {
     return activeFilters.value.hasOwnProperty(handle);
 }
@@ -134,35 +188,18 @@ function handleStackClosed() {
             <div ref="stackContentRef" class="">
                 <div class="space-y-4">
                     <Panel
-                        v-for="filter in fieldFilters"
-                        :key="filter.handle"
-                    >
-                        <PanelHeader class="flex items-center justify-between">
-                            <Heading :text="filter.title" />
-                            <Button v-if="isActive(filter.handle)" size="sm" :text="__('Clear')" @click="setFilter(filter.handle, null)" />
-                        </PanelHeader>
-                        <Card>
-                            <FieldFilter
-                                :config="filter"
-                                :values="activeFilters[filter.handle] || {}"
-                                @changed="setFilter(filter.handle, $event)"
-                            />
-                        </Card>
-                    </Panel>
-
-                    <Panel
-                        v-for="filter in standardFilters"
-                        :key="filter.handle"
+                        v-for="panel in filterPanels"
+                        :key="panel.handle"
                     >
                         <PanelHeader class="flex items-center justify-between">
-                            <Heading :text="filter.title" />
-                            <Button v-if="isActive(filter.handle)" size="sm" :text="__('Clear')" @click="setFilter(filter.handle, null)" />
+                            <Heading :text="panel.title" />
+                            <Button v-if="isActive(panel.handle)" size="sm" :text="__('Clear')" @click="setFilter(panel.handle, null)" />
                         </PanelHeader>
                         <Card>
-                            <data-list-filter
-                                :filter="filter"
-                                :values="activeFilters[filter.handle]"
-                                @changed="setFilter(filter.handle, $event)"
+                            <component
+                                :is="panel.component"
+                                v-bind="panel.componentProps"
+                                @changed="setFilter(panel.handle, $event)"
                             />
                         </Card>
                     </Panel>
@@ -171,39 +208,39 @@ function handleStackClosed() {
             </div>
         </Stack>
 
-        <Button
-            v-for="({ filter, handle, badge }, index) in fieldFilterBadges"
-            :key="`${filter}-${handle}`"
-            variant="filled"
-            :icon-append="reorderable ? null : 'x'"
-            :disabled="reorderable"
-            class="last:me-12"
-            @click="removeFieldFilter(filter, handle)"
+        <div
+            v-for="chip in badgeChips"
+            :key="chip.key"
+            :class="badgeChipClasses"
         >
-            <template v-if="handle == 'date'">
-                {{ badge.field }}
-                {{ badge.translatedOperator }}
-                <template v-if="badge.operator === 'between'">
-                    <date-time :of="badge.value.start" options="date" />
-                    {{ __('and') }}
-                    <date-time :of="badge.value.end" options="date" />
+            <div class="flex items-center gap-1.5 whitespace-nowrap">
+                <template v-if="isDateBadge(chip)">
+                    {{ chip.badge.field }}
+                    {{ chip.badge.translatedOperator }}
+                    <template v-if="chip.badge.operator === 'between'">
+                        <date-time :of="chip.badge.value.start" options="date" />
+                        {{ __('and') }}
+                        <date-time :of="chip.badge.value.end" options="date" />
+                    </template>
+                    <date-time v-else :of="chip.badge.value" options="date" />
                 </template>
-                <date-time v-else :of="badge.value" options="date" />
-            </template>
-
-            <template v-else>
-                {{ badge }}
-            </template>
-        </Button>
-        <Button
-            v-for="(badge, handle, index) in standardBadges"
-            :key="handle"
-            variant="filled"
-            :icon-append="reorderable ? null : 'x'"
-            :text="badge"
-            :disabled="reorderable"
-            class="last:me-12"
-            @click="setFilter(handle, null)"
-        />
+
+                <template v-else>
+                    {{ chip.badge }}
+                </template>
+            </div>
+
+            <Button
+                v-if="!reorderable"
+                variant="ghost"
+                size="xs"
+                icon="x"
+                iconOnly
+                inset
+                :class="badgeChipClearButtonClasses"
+                :aria-label="__('Clear')"
+                @click="clearBadgeChip(chip)"
+            />
+        </div>
     </div>
 </template>

From 6a7ee3c81083dca1add07fa8006ddf6da4459351 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 11 Mar 2026 16:17:16 +0000
Subject: [PATCH 2/5] Simplify

---
 .../js/components/ui/Listing/Filters.vue      | 125 ++++++++----------
 1 file changed, 54 insertions(+), 71 deletions(-)

diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 7ace415814..6f79da1e30 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -33,66 +33,15 @@ const fieldFilterBadges = computed(() => Object.entries(activeFilterBadges.value
     .flatMap(([filter, badges]) => Object.entries(badges).map(([handle, badge]) => ({ filter, handle, badge })))
 );
 
-const filterPanels = computed(() => [
-    ...fieldFilters.value.map((filter) => ({
-        handle: filter.handle,
-        title: filter.title,
-        component: FieldFilter,
-        componentProps: {
-            config: filter,
-            values: activeFilters.value[filter.handle] || {},
-        },
-    })),
-    ...standardFilters.value.map((filter) => ({
-        handle: filter.handle,
-        title: filter.title,
-        component: DataListFilter,
-        componentProps: {
-            filter,
-            values: activeFilters.value[filter.handle],
-        },
-    })),
-]);
-
-const badgeChipClasses = 'group last:me-12 inline-flex h-10 items-center gap-1 rounded-lg bg-gray-950/5 ps-4 pe-2 text-sm font-medium text-gray-900 dark:bg-white/4 dark:text-gray-200';
+const badgeChipClasses = 'relative inline-flex h-10 shrink-0 items-center whitespace-nowrap rounded-lg bg-gray-950/5 px-4 pe-2 text-sm font-medium text-gray-900 last:me-12 gap-1 dark:bg-white/4 dark:text-gray-200 [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white';
 const badgeChipClearButtonClasses = 'opacity-100 [&_svg]:size-4';
 
-const badgeChips = computed(() => [
-    ...fieldFilterBadges.value.map(({ filter, handle, badge }) => ({
-        key: `${filter}-${handle}`,
-        filter,
-        handle,
-        badge,
-        isFieldBadge: true,
-    })),
-    ...Object.entries(standardBadges.value).map(([handle, badge]) => ({
-        key: handle,
-        handle,
-        badge,
-        isFieldBadge: false,
-    })),
-]);
-
 function removeFieldFilter(filterHandle, fieldHandle) {
     const fields = { ...activeFilters.value[filterHandle] };
     delete fields[fieldHandle];
     setFilter(filterHandle, fields);
 }
 
-function clearBadgeChip(chip) {
-    if (chip.isFieldBadge) {
-        removeFieldFilter(chip.filter, chip.handle);
-
-        return;
-    }
-
-    setFilter(chip.handle, null);
-}
-
-function isDateBadge(chip) {
-    return chip.isFieldBadge && chip.handle === 'date';
-}
-
 function isActive(handle) {
     return activeFilters.value.hasOwnProperty(handle);
 }
@@ -188,18 +137,34 @@ function handleStackClosed() {
             <div ref="stackContentRef" class="">
                 <div class="space-y-4">
                     <Panel
-                        v-for="panel in filterPanels"
-                        :key="panel.handle"
+                        v-for="filter in fieldFilters"
+                        :key="filter.handle"
+                    >
+                        <PanelHeader class="flex items-center justify-between">
+                            <Heading :text="filter.title" />
+                            <Button v-if="isActive(filter.handle)" size="sm" :text="__('Clear')" @click="setFilter(filter.handle, null)" />
+                        </PanelHeader>
+                        <Card>
+                            <FieldFilter
+                                :config="filter"
+                                :values="activeFilters[filter.handle] || {}"
+                                @changed="setFilter(filter.handle, $event)"
+                            />
+                        </Card>
+                    </Panel>
+                    <Panel
+                        v-for="filter in standardFilters"
+                        :key="filter.handle"
                     >
                         <PanelHeader class="flex items-center justify-between">
-                            <Heading :text="panel.title" />
-                            <Button v-if="isActive(panel.handle)" size="sm" :text="__('Clear')" @click="setFilter(panel.handle, null)" />
+                            <Heading :text="filter.title" />
+                            <Button v-if="isActive(filter.handle)" size="sm" :text="__('Clear')" @click="setFilter(filter.handle, null)" />
                         </PanelHeader>
                         <Card>
-                            <component
-                                :is="panel.component"
-                                v-bind="panel.componentProps"
-                                @changed="setFilter(panel.handle, $event)"
+                            <data-list-filter
+                                :filter="filter"
+                                :values="activeFilters[filter.handle]"
+                                @changed="setFilter(filter.handle, $event)"
                             />
                         </Card>
                     </Panel>
@@ -209,24 +174,24 @@ function handleStackClosed() {
         </Stack>
 
         <div
-            v-for="chip in badgeChips"
-            :key="chip.key"
+            v-for="({ filter, handle, badge }, index) in fieldFilterBadges"
+            :key="`${filter}-${handle}`"
             :class="badgeChipClasses"
         >
             <div class="flex items-center gap-1.5 whitespace-nowrap">
-                <template v-if="isDateBadge(chip)">
-                    {{ chip.badge.field }}
-                    {{ chip.badge.translatedOperator }}
-                    <template v-if="chip.badge.operator === 'between'">
-                        <date-time :of="chip.badge.value.start" options="date" />
+                <template v-if="handle == 'date'">
+                    {{ badge.field }}
+                    {{ badge.translatedOperator }}
+                    <template v-if="badge.operator === 'between'">
+                        <date-time :of="badge.value.start" options="date" />
                         {{ __('and') }}
-                        <date-time :of="chip.badge.value.end" options="date" />
+                        <date-time :of="badge.value.end" options="date" />
                     </template>
-                    <date-time v-else :of="chip.badge.value" options="date" />
+                    <date-time v-else :of="badge.value" options="date" />
                 </template>
 
                 <template v-else>
-                    {{ chip.badge }}
+                    {{ badge }}
                 </template>
             </div>
 
@@ -239,7 +204,25 @@ function handleStackClosed() {
                 inset
                 :class="badgeChipClearButtonClasses"
                 :aria-label="__('Clear')"
-                @click="clearBadgeChip(chip)"
+                @click="removeFieldFilter(filter, handle)"
+            />
+        </div>
+        <div
+            v-for="(badge, handle, index) in standardBadges"
+            :key="handle"
+            :class="badgeChipClasses"
+        >
+            <span class="whitespace-nowrap">{{ badge }}</span>
+            <Button
+                v-if="!reorderable"
+                variant="ghost"
+                size="xs"
+                icon="x"
+                iconOnly
+                inset
+                :class="badgeChipClearButtonClasses"
+                :aria-label="__('Clear')"
+                @click="setFilter(handle, null)"
             />
         </div>
     </div>

From e904b189cb5f318edff00d9d6bbfbd574f37f925 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 11 Mar 2026 16:19:15 +0000
Subject: [PATCH 3/5] Simplify

---
 resources/js/components/ui/Listing/Filters.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 6f79da1e30..91a24ba118 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -33,9 +33,6 @@ const fieldFilterBadges = computed(() => Object.entries(activeFilterBadges.value
     .flatMap(([filter, badges]) => Object.entries(badges).map(([handle, badge]) => ({ filter, handle, badge })))
 );
 
-const badgeChipClasses = 'relative inline-flex h-10 shrink-0 items-center whitespace-nowrap rounded-lg bg-gray-950/5 px-4 pe-2 text-sm font-medium text-gray-900 last:me-12 gap-1 dark:bg-white/4 dark:text-gray-200 [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white';
-const badgeChipClearButtonClasses = 'opacity-100 [&_svg]:size-4';
-
 function removeFieldFilter(filterHandle, fieldHandle) {
     const fields = { ...activeFilters.value[filterHandle] };
     delete fields[fieldHandle];
@@ -176,7 +173,7 @@ function handleStackClosed() {
         <div
             v-for="({ filter, handle, badge }, index) in fieldFilterBadges"
             :key="`${filter}-${handle}`"
-            :class="badgeChipClasses"
+            class="relative inline-flex h-10 shrink-0 items-center whitespace-nowrap rounded-lg bg-gray-950/5 ps-4 pe-2 text-sm font-medium text-gray-900 last:me-12 gap-1 dark:bg-white/4 dark:text-gray-200 [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white"
         >
             <div class="flex items-center gap-1.5 whitespace-nowrap">
                 <template v-if="handle == 'date'">
@@ -202,7 +199,7 @@ function handleStackClosed() {
                 icon="x"
                 iconOnly
                 inset
-                :class="badgeChipClearButtonClasses"
+                class="opacity-100 [&_svg]:size-4"
                 :aria-label="__('Clear')"
                 @click="removeFieldFilter(filter, handle)"
             />
@@ -210,7 +207,7 @@ function handleStackClosed() {
         <div
             v-for="(badge, handle, index) in standardBadges"
             :key="handle"
-            :class="badgeChipClasses"
+            class="relative inline-flex h-10 shrink-0 items-center whitespace-nowrap rounded-lg bg-gray-950/5 ps-4 pe-2 text-sm font-medium text-gray-900 last:me-12 gap-1 dark:bg-white/4 dark:text-gray-200 [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white"
         >
             <span class="whitespace-nowrap">{{ badge }}</span>
             <Button
@@ -220,7 +217,7 @@ function handleStackClosed() {
                 icon="x"
                 iconOnly
                 inset
-                :class="badgeChipClearButtonClasses"
+                class="opacity-100 [&_svg]:size-4"
                 :aria-label="__('Clear')"
                 @click="setFilter(handle, null)"
             />

From ad3a7c08225b2ca8ca824b6c0b9d9c1d66653a62 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 11 Mar 2026 16:21:37 +0000
Subject: [PATCH 4/5] Simplify

---
 resources/js/components/ui/Listing/Filters.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 91a24ba118..4182a37fb9 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -149,6 +149,7 @@ function handleStackClosed() {
                             />
                         </Card>
                     </Panel>
+
                     <Panel
                         v-for="filter in standardFilters"
                         :key="filter.handle"

From 204970865b38ffd1b9cb9bd3283b225fd14329b9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 11 Mar 2026 16:30:40 +0000
Subject: [PATCH 5/5] =?UTF-8?q?Improve=20accessibility=20For=20screen=20re?=
 =?UTF-8?q?ader=20users,=20a=20row=20of=20identical=20Clear=20buttons=20is?=
 =?UTF-8?q?=20ambiguous=20because=20it=20doesn=E2=80=99t=20say=20which=20f?=
 =?UTF-8?q?ilter=20will=20be=20removed.=20This=20makes=20the=20label=20con?=
 =?UTF-8?q?textual,=20like=20Clear=20filter=20{{=20badge=20}}=20or=20Remov?=
 =?UTF-8?q?e=20{{=20badge.field=20}}?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/js/components/ui/Listing/Filters.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 4182a37fb9..354bb83597 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -39,6 +39,18 @@ function removeFieldFilter(filterHandle, fieldHandle) {
     setFilter(filterHandle, fields);
 }
 
+function getFieldFilterBadgeLabel(handle, badge) {
+    if (handle === 'date') {
+        return [badge.field, badge.translatedOperator].filter(Boolean).join(' ');
+    }
+
+    return badge;
+}
+
+function getClearFilterLabel(label) {
+    return `${__('Clear')} ${label}`;
+}
+
 function isActive(handle) {
     return activeFilters.value.hasOwnProperty(handle);
 }
@@ -201,7 +213,7 @@ function handleStackClosed() {
                 iconOnly
                 inset
                 class="opacity-100 [&_svg]:size-4"
-                :aria-label="__('Clear')"
+                :aria-label="getClearFilterLabel(getFieldFilterBadgeLabel(handle, badge))"
                 @click="removeFieldFilter(filter, handle)"
             />
         </div>
@@ -219,7 +231,7 @@ function handleStackClosed() {
                 iconOnly
                 inset
                 class="opacity-100 [&_svg]:size-4"
-                :aria-label="__('Clear')"
+                :aria-label="getClearFilterLabel(badge)"
                 @click="setFilter(handle, null)"
             />
         </div>