From 132b36827cb406eca042ba9578be8b2198e2e8c2 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Tue, 19 Aug 2025 09:51:24 -0700
Subject: [PATCH 01/10] add announcement to facet checkbox

---
 src/components/TermSelection.vue | 38 ++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/components/TermSelection.vue b/src/components/TermSelection.vue
index 1fdd398..d022f64 100644
--- a/src/components/TermSelection.vue
+++ b/src/components/TermSelection.vue
@@ -1,5 +1,6 @@
 <!-- TODO: share code w/EditTermSelection -->
 <script setup lang="ts">
+import { ref, watch } from 'vue'
 import { useSearchStore } from '../stores/search'
 
 // ------------------------------------------------------------
@@ -17,6 +18,25 @@ const { selectedTerms } = useSearchStore()
 
 const selected = selectedTerms(props.facet.name)
 
+// ------------------------------------------------------------
+// Live message for screen readers
+const liveMessage = ref("")
+
+watch(
+  selected,
+  (newVal, oldVal) => {
+    const wasSelected = oldVal?.includes(props.term.value)
+    const isSelected = newVal.includes(props.term.value)
+
+    if (wasSelected !== isSelected) {
+      liveMessage.value = isSelected
+        ? `Filter applied: ${props.term.value}`
+        : `Filter removed: ${props.term.value}`
+    }
+  },
+  { deep: true }
+)
+
 </script>
 
 <template>
@@ -33,6 +53,9 @@ const selected = selectedTerms(props.facet.name)
       <legend>{{ term.value }}</legend>
       <TermSelection v-for="child in term.children" :key="child.id" :facet="props.facet" :term="child"/>
     </fieldset>
+     <!-- Live region for announcements -->
+
+    <span class="sr-only" aria-live="polite">{{ liveMessage }}</span>
   </div>
 </template>
 
@@ -71,4 +94,19 @@ div.galc-term-selection {
     border: 0;
   }
 }
+
+/* Utility class for screen-reader-only content */
+
+.sr-only {
+  position: absolute;
+  width: auto;      /* allow width to grow */
+  height: auto;     /* allow height to grow */
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 </style>

From becd77641a8127c388b47973fd1d35e35f14e080 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Tue, 19 Aug 2025 10:00:36 -0700
Subject: [PATCH 02/10] remove deep watch

---
 src/components/TermSelection.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/TermSelection.vue b/src/components/TermSelection.vue
index d022f64..f75028b 100644
--- a/src/components/TermSelection.vue
+++ b/src/components/TermSelection.vue
@@ -33,8 +33,7 @@ watch(
         ? `Filter applied: ${props.term.value}`
         : `Filter removed: ${props.term.value}`
     }
-  },
-  { deep: true }
+  }
 )
 
 </script>

From 028aebc56d2607db464a5518a5786ccf7e401181 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Thu, 21 Aug 2025 10:43:36 -0700
Subject: [PATCH 03/10] Term message shows on DOM

---
 src/components/EditTermSelection.vue |  48 ++++++++++++
 src/components/Facet.vue             |   4 +-
 src/components/TermSelection.vue     | 110 ++++++---------------------
 3 files changed, 75 insertions(+), 87 deletions(-)
 create mode 100644 src/components/EditTermSelection.vue

diff --git a/src/components/EditTermSelection.vue b/src/components/EditTermSelection.vue
new file mode 100644
index 0000000..12a02b2
--- /dev/null
+++ b/src/components/EditTermSelection.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSearchStore } from '../stores/search'
+import { ref } from 'vue'
+import TermSelection from './TermSelection.vue'
+
+const props = defineProps<{
+  facet: { name: string }
+  terms: { id: string | number; value: string; children?: any[] }[]
+}>()
+
+
+const { selectedTerms } = useSearchStore()
+const liveMessage = ref("")
+
+function handleStatusChanged() {
+  // Compute current status for this facet
+  const selected = selectedTerms(props.facet.name).value  // array of selected term values
+  // Build a live message summarizing all selected terms
+  if (selected.length > 0) {
+    liveMessage.value = `Selected filters: ${selected.join(', ')}`
+  } else {
+    liveMessage.value = `No filters selected`
+  }
+}
+
+
+//function handleAnnounce(message: string) {
+//  liveMessage.value = message
+//}
+</script>
+
+<template>
+  <div class="edit-term-selection">
+    <TermSelection
+      v-for="term in props.terms"
+      :key="term.id"
+      :facet="props.facet"
+      :term="term"
+      @status-changed="handleStatusChanged"
+    />
+
+    <!-- Single global live region -->
+   <span class="sr-only" aria-live="polite" data-testid="live-region">
+  {{ liveMessage || '\u00A0' }}
+</span>
+  </div>
+</template>
diff --git a/src/components/Facet.vue b/src/components/Facet.vue
index 9f3c2c2..ed9adcd 100644
--- a/src/components/Facet.vue
+++ b/src/components/Facet.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useFacetStore } from '../stores/facets'
 
 import { Facet } from '../types/Facet'
-import TermSelection from './TermSelection.vue'
+import EditTermSelection from './EditTermSelection.vue'
 
 // ------------------------------------------------------------
 // Properties
@@ -37,7 +37,7 @@ function onToggle (event: Event) {
     <details :open="expanded" :aria-expanded="expanded" @toggle="onToggle">
       <summary>{{ facetName }}</summary>
       <template v-if="expanded">
-        <TermSelection v-for="term in rootTerms" :key="term.id" :facet="props.facet" :term="term"/>
+        <EditTermSelection :facet="facet"  :terms="facet.terms" />
       </template>
     </details>
   </fieldset>
diff --git a/src/components/TermSelection.vue b/src/components/TermSelection.vue
index f75028b..92bc253 100644
--- a/src/components/TermSelection.vue
+++ b/src/components/TermSelection.vue
@@ -1,41 +1,28 @@
-<!-- TODO: share code w/EditTermSelection -->
 <script setup lang="ts">
-import { ref, watch } from 'vue'
 import { useSearchStore } from '../stores/search'
 
-// ------------------------------------------------------------
-// Properties
+const props = defineProps<{
+  facet: { name: string }
+  term: { id: string | number; value: string; children?: any[] }
+}>()
 
-const props = defineProps({
-  facet: { type: Object, default: null },
-  term: { type: Object, default: null }
-})
-
-// ------------------------------------------------------------
-// Stores
+const emit = defineEmits<{
+  (e: 'announce', message: string): void
+}>()
 
 const { selectedTerms } = useSearchStore()
-
 const selected = selectedTerms(props.facet.name)
 
-// ------------------------------------------------------------
-// Live message for screen readers
-const liveMessage = ref("")
-
-watch(
-  selected,
-  (newVal, oldVal) => {
-    const wasSelected = oldVal?.includes(props.term.value)
-    const isSelected = newVal.includes(props.term.value)
-
-    if (wasSelected !== isSelected) {
-      liveMessage.value = isSelected
-        ? `Filter applied: ${props.term.value}`
-        : `Filter removed: ${props.term.value}`
-    }
-  }
-)
+function onChange() {
+  emit('status-changed')  // no message yet
+  //const isSelected = selected.value.includes(props.term.value)
+  //emit('announce', `${props.facet.name}: ${props.term.value} ${isSelected ? 'applied' : 'removed'}`)
 
+  //emit('announce', isSelected
+  //  ? `Filter applied: ${props.term.value}`
+   // : `Filter removed: ${props.term.value}`
+  //)
+}
 </script>
 
 <template>
@@ -46,66 +33,19 @@ watch(
       :value="term.value"
       type="checkbox"
       :aria-label="`Filter by ${term.value}. Currently ${selected.includes(term.value) ? 'selected' : 'not selected'}`"
+      @change="onChange"
     >
     <label :for="`term-${term.id}`">{{ term.value }}</label>
+
     <fieldset v-if="term.children" class="galc-facet-subterms">
       <legend>{{ term.value }}</legend>
-      <TermSelection v-for="child in term.children" :key="child.id" :facet="props.facet" :term="child"/>
+      <TermSelection
+        v-for="child in term.children"
+        :key="child.id"
+        :facet="props.facet"
+        :term="child"
+        @announce="emit('announce', $event)"
+      />
     </fieldset>
-     <!-- Live region for announcements -->
-
-    <span class="sr-only" aria-live="polite">{{ liveMessage }}</span>
   </div>
 </template>
-
-<style lang="scss">
-div.galc-term-selection {
-  border: none;
-  display: grid;
-  grid-template-columns: 18px 3fr;
-  column-gap: 0.5em;
-  margin-left: 0;
-  padding-left: 0;
-
-  @media only screen and (max-width: 700px) {
-    font-size: 1.125rem;
-  }
-
-  input[type=checkbox] {
-    margin-bottom: 0.25em;
-
-    @media only screen and (max-width: 700px) {
-      -webkit-transform: scale(1.25);
-    }
-  }
-
-  label {
-    white-space: nowrap;
-    height: min-content;
-    font-weight: normal;
-    line-height: 1.15;
-    margin-bottom: 0.25em;
-    cursor: pointer;
-  }
-
-  fieldset.galc-facet-subterms {
-    display: block;
-    border: 0;
-  }
-}
-
-/* Utility class for screen-reader-only content */
-
-.sr-only {
-  position: absolute;
-  width: auto;      /* allow width to grow */
-  height: auto;     /* allow height to grow */
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-</style>

From c8fbc5e8a617c70d45122c1d0fd0d9cd48098e46 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Thu, 21 Aug 2025 11:40:06 -0700
Subject: [PATCH 04/10] Fix emit issue

---
 src/components/EditTermSelection.vue | 51 ++++++++++++++++++++++++++++
 src/components/TermSelection.vue     |  4 +--
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/components/EditTermSelection.vue b/src/components/EditTermSelection.vue
index 12a02b2..0a8b436 100644
--- a/src/components/EditTermSelection.vue
+++ b/src/components/EditTermSelection.vue
@@ -46,3 +46,54 @@ function handleStatusChanged() {
 </span>
   </div>
 </template>
+
+<style lang="scss">
+div.galc-term-selection {
+  border: none;
+  display: grid;
+  grid-template-columns: 18px 1fr;
+  column-gap: 0.5em;
+  margin-left: 0;
+  padding-left: 0;
+
+  @media only screen and (max-width: 700px) {
+    font-size: 1.125rem;
+  }
+
+  input[type=checkbox] {
+    margin-bottom: 0.25em;
+
+    @media only screen and (max-width: 700px) {
+      -webkit-transform: scale(1.25);
+    }
+  }
+
+  label {
+    white-space: nowrap;
+    height: min-content;
+    font-weight: normal;
+    line-height: 1.15;
+    margin-bottom: 0.25em;
+    cursor: pointer;
+  }
+
+  fieldset.galc-facet-subterms {
+    display: block;
+    border: 0;
+    margin-left: 1.5em;
+  }
+}
+
+/* Screen-reader-only text */
+.sr-only {
+  position: absolute;
+  width: auto;    /* must allow perceivable width */
+  height: auto;   /* must allow perceivable height */
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+</style>
diff --git a/src/components/TermSelection.vue b/src/components/TermSelection.vue
index 92bc253..237db4b 100644
--- a/src/components/TermSelection.vue
+++ b/src/components/TermSelection.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'announce', message: string): void
+  (e: 'status-changed'): void
 }>()
 
 const { selectedTerms } = useSearchStore()
@@ -44,7 +44,7 @@ function onChange() {
         :key="child.id"
         :facet="props.facet"
         :term="child"
-        @announce="emit('announce', $event)"
+        @status-changed="emit('status-changed')"
       />
     </fieldset>
   </div>

From d118ba3f2b24a7dfcc1f3ca2414ab9d1961d101f Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Fri, 22 Aug 2025 09:32:31 -0700
Subject: [PATCH 05/10] facet level announcement

---
 src/components/EditTermSelection.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/EditTermSelection.vue b/src/components/EditTermSelection.vue
index 0a8b436..c942928 100644
--- a/src/components/EditTermSelection.vue
+++ b/src/components/EditTermSelection.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useSearchStore } from '../stores/search'
 import { ref } from 'vue'
 import TermSelection from './TermSelection.vue'
@@ -16,12 +15,16 @@ const liveMessage = ref("")
 function handleStatusChanged() {
   // Compute current status for this facet
   const selected = selectedTerms(props.facet.name).value  // array of selected term values
-  // Build a live message summarizing all selected terms
-  if (selected.length > 0) {
-    liveMessage.value = `Selected filters: ${selected.join(', ')}`
-  } else {
-    liveMessage.value = `No filters selected`
-  }
+  
+  // Force reset before updating so SRs catch the change
+  liveMessage.value = '\u00A0'
+  requestAnimationFrame(() => {
+    if (selected.length > 0) {
+      liveMessage.value = `Selected filters: ${selected.join(', ')}`
+    } else {
+      liveMessage.value = `No filters selected`
+    }
+  })
 }
 
 
@@ -42,7 +45,7 @@ function handleStatusChanged() {
 
     <!-- Single global live region -->
    <span class="sr-only" aria-live="polite" data-testid="live-region">
-  {{ liveMessage || '\u00A0' }}
+  {{ liveMessage }}
 </span>
   </div>
 </template>

From bf87d7634b1eef73c28f1b5d5f18c216b3fd7caf Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Wed, 27 Aug 2025 13:29:17 -0700
Subject: [PATCH 06/10] workable single live message

---
 src/components/Facet.vue                      |  7 +-
 src/components/Facets.vue                     | 54 ++++++++++++-
 src/components/TermSelection.vue              | 78 +++++++++++++------
 src/stores/search.ts                          |  5 +-
 .../components => temp}/EditTermSelection.vue |  0
 5 files changed, 115 insertions(+), 29 deletions(-)
 rename {src/components => temp}/EditTermSelection.vue (100%)

diff --git a/src/components/Facet.vue b/src/components/Facet.vue
index ed9adcd..9794005 100644
--- a/src/components/Facet.vue
+++ b/src/components/Facet.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import { useFacetStore } from '../stores/facets'
 
 import { Facet } from '../types/Facet'
-import EditTermSelection from './EditTermSelection.vue'
+import TermSelection from './TermSelection.vue'
 
 // ------------------------------------------------------------
 // Properties
@@ -28,6 +28,9 @@ function onToggle (event: Event) {
     expanded.value = open
   }
 }
+const emit = defineEmits<{
+  (e: 'status-changed'): void
+}>()
 
 </script>
 
@@ -37,7 +40,7 @@ function onToggle (event: Event) {
     <details :open="expanded" :aria-expanded="expanded" @toggle="onToggle">
       <summary>{{ facetName }}</summary>
       <template v-if="expanded">
-        <EditTermSelection :facet="facet"  :terms="facet.terms" />
+        <TermSelection v-for="term in rootTerms" :key="term.id" :facet="props.facet" :term="term" @status-changed="emit('status-changed')"/>
       </template>
     </details>
   </fieldset>
diff --git a/src/components/Facets.vue b/src/components/Facets.vue
index a780066..9c43540 100644
--- a/src/components/Facets.vue
+++ b/src/components/Facets.vue
@@ -10,8 +10,42 @@ import InternalFields from './InternalFields.vue'
 import Facet from './Facet.vue'
 import TermDeselection from './TermDeselection.vue'
 
+import { useSearchStore } from '../stores/search'
+import { computed } from 'vue'
+
 const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
+//import { watch } from 'vue'
+import { ref } from 'vue'
+
+const search = useSearchStore()
+
+//watch(() => search.activeFacetNames, (val) => {
+// console.log("Active facets:", val)
+//}, { immediate: true })
+
+//console.log('search store11112:', search.selectedTerms('Size').value.join(', '))
+
+
+const liveMessage = computed(() => {
+  const parts: string[] = []
+  //console.log('selected FacetName888', search.activeFacetNames.join(', '))
+
+  for (const facetName of search.activeFacetNames) {
+    const termNames = search.selectedTerms(facetName).value
+    if (termNames.length > 0) {
+      //console.log('selected terms8888', `${facetName}: ${termNames.join(', ')}`)
+      parts.push(`${facetName}: ${termNames.join(', ')}`)
+    }
+  }
+
+  return parts.length > 0
+    ? `Selected filters 2222– ${parts.join('; ')}.`
+    : 'No filters selected.'
+})
+
+
+
 
 </script>
 
@@ -31,8 +65,13 @@ const { isAdmin } = storeToRefs(useSessionStore())
         :id="`galc-facet-${facet.name}`"
         :key="facet.name"
         :facet="facet"
+        
       />
     </form>
+
+    <!-- Accessible live region -->
+    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ liveMessage }}</span>
+
   </div>
 </template>
 
@@ -147,5 +186,18 @@ div.galc-facets {
       }
     }
   }
-}
+
+  .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  }
+} 
+
 </style>
diff --git a/src/components/TermSelection.vue b/src/components/TermSelection.vue
index 237db4b..943a6df 100644
--- a/src/components/TermSelection.vue
+++ b/src/components/TermSelection.vue
@@ -1,28 +1,26 @@
+<!-- TODO: share code w/EditTermSelection -->
 <script setup lang="ts">
 import { useSearchStore } from '../stores/search'
 
-const props = defineProps<{
-  facet: { name: string }
-  term: { id: string | number; value: string; children?: any[] }
-}>()
+// ------------------------------------------------------------
+// Properties
 
-const emit = defineEmits<{
-  (e: 'status-changed'): void
-}>()
+const props = defineProps({
+  facet: { type: Object, default: null },
+  term: { type: Object, default: null }
+})
+
+// ------------------------------------------------------------
+// Stores
 
 const { selectedTerms } = useSearchStore()
+
 const selected = selectedTerms(props.facet.name)
 
-function onChange() {
-  emit('status-changed')  // no message yet
-  //const isSelected = selected.value.includes(props.term.value)
-  //emit('announce', `${props.facet.name}: ${props.term.value} ${isSelected ? 'applied' : 'removed'}`)
+const emit = defineEmits<{
+  (e: 'status-changed'): void
+}>()
 
-  //emit('announce', isSelected
-  //  ? `Filter applied: ${props.term.value}`
-   // : `Filter removed: ${props.term.value}`
-  //)
-}
 </script>
 
 <template>
@@ -33,19 +31,49 @@ function onChange() {
       :value="term.value"
       type="checkbox"
       :aria-label="`Filter by ${term.value}. Currently ${selected.includes(term.value) ? 'selected' : 'not selected'}`"
-      @change="onChange"
+      @change="emit('status-changed')"
     >
     <label :for="`term-${term.id}`">{{ term.value }}</label>
-
     <fieldset v-if="term.children" class="galc-facet-subterms">
       <legend>{{ term.value }}</legend>
-      <TermSelection
-        v-for="child in term.children"
-        :key="child.id"
-        :facet="props.facet"
-        :term="child"
-        @status-changed="emit('status-changed')"
-      />
+      <TermSelection v-for="child in term.children" :key="child.id" :facet="props.facet" :term="child" @change="emit('status-changed')"/>
     </fieldset>
   </div>
 </template>
+
+<style lang="scss">
+div.galc-term-selection {
+  border: none;
+  display: grid;
+  grid-template-columns: 18px 3fr;
+  column-gap: 0.5em;
+  margin-left: 0;
+  padding-left: 0;
+
+  @media only screen and (max-width: 700px) {
+    font-size: 1.125rem;
+  }
+
+  input[type=checkbox] {
+    margin-bottom: 0.25em;
+
+    @media only screen and (max-width: 700px) {
+      -webkit-transform: scale(1.25);
+    }
+  }
+
+  label {
+    white-space: nowrap;
+    height: min-content;
+    font-weight: normal;
+    line-height: 1.15;
+    margin-bottom: 0.25em;
+    cursor: pointer;
+  }
+
+  fieldset.galc-facet-subterms {
+    display: block;
+    border: 0;
+  }
+}
+</style>
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 713b757..ecc61ec 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -123,7 +123,7 @@ export const useSearchStore = defineStore('search', () => {
     return doSearch(state.value)
   }
 
-  const exported = { init, keywords, suppressed, page, selectedTerms, refreshSearch, resetSearch, canResetSearch }
+  //const exported = { init, keywords, suppressed, page, selectedTerms, refreshSearch, resetSearch, canResetSearch }
 
   // --------------------------------------------------
   // Internal functions and properties
@@ -228,6 +228,9 @@ export const useSearchStore = defineStore('search', () => {
   // --------------------------------------------------
   // Store definition
 
+  const exported = { init, keywords, suppressed, page, selectedTerms, refreshSearch, resetSearch, canResetSearch, activeFacetNames }
+
+
   return exported
 })
 
diff --git a/src/components/EditTermSelection.vue b/temp/EditTermSelection.vue
similarity index 100%
rename from src/components/EditTermSelection.vue
rename to temp/EditTermSelection.vue

From 3cde23550232f6a974c96f87ed3271a9cb8e87a4 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Wed, 27 Aug 2025 14:44:17 -0700
Subject: [PATCH 07/10] Clean up Facets.vue

---
 src/components/Facets.vue | 26 +++-----------------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/src/components/Facets.vue b/src/components/Facets.vue
index 9c43540..868b164 100644
--- a/src/components/Facets.vue
+++ b/src/components/Facets.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
 import { useFacetStore } from '../stores/facets'
 import { useSessionStore } from '../stores/session'
+import { useSearchStore } from '../stores/search'
 
 import filter from '../assets/filter.svg'
 
@@ -10,43 +12,22 @@ import InternalFields from './InternalFields.vue'
 import Facet from './Facet.vue'
 import TermDeselection from './TermDeselection.vue'
 
-import { useSearchStore } from '../stores/search'
-import { computed } from 'vue'
-
 const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
-//import { watch } from 'vue'
-import { ref } from 'vue'
 
 const search = useSearchStore()
-
-//watch(() => search.activeFacetNames, (val) => {
-// console.log("Active facets:", val)
-//}, { immediate: true })
-
-//console.log('search store11112:', search.selectedTerms('Size').value.join(', '))
-
-
 const liveMessage = computed(() => {
   const parts: string[] = []
-  //console.log('selected FacetName888', search.activeFacetNames.join(', '))
-
   for (const facetName of search.activeFacetNames) {
     const termNames = search.selectedTerms(facetName).value
     if (termNames.length > 0) {
-      //console.log('selected terms8888', `${facetName}: ${termNames.join(', ')}`)
       parts.push(`${facetName}: ${termNames.join(', ')}`)
     }
   }
-
   return parts.length > 0
-    ? `Selected filters 2222– ${parts.join('; ')}.`
+    ? `Selected filters – ${parts.join('; ')}.`
     : 'No filters selected.'
 })
-
-
-
-
 </script>
 
 <template>
@@ -65,7 +46,6 @@ const liveMessage = computed(() => {
         :id="`galc-facet-${facet.name}`"
         :key="facet.name"
         :facet="facet"
-        
       />
     </form>
 

From afdcf7fa0be5f7ba28a1c3eda1bd6fca817186a0 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Wed, 27 Aug 2025 14:47:58 -0700
Subject: [PATCH 08/10] rm emit from Facet.vue

---
 src/components/Facet.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Facet.vue b/src/components/Facet.vue
index 9794005..5a4da81 100644
--- a/src/components/Facet.vue
+++ b/src/components/Facet.vue
@@ -28,9 +28,7 @@ function onToggle (event: Event) {
     expanded.value = open
   }
 }
-const emit = defineEmits<{
-  (e: 'status-changed'): void
-}>()
+
 
 </script>
 
@@ -40,7 +38,7 @@ const emit = defineEmits<{
     <details :open="expanded" :aria-expanded="expanded" @toggle="onToggle">
       <summary>{{ facetName }}</summary>
       <template v-if="expanded">
-        <TermSelection v-for="term in rootTerms" :key="term.id" :facet="props.facet" :term="term" @status-changed="emit('status-changed')"/>
+        <TermSelection v-for="term in rootTerms" :key="term.id" :facet="props.facet" :term="term" />
       </template>
     </details>
   </fieldset>

From de6c89a5c835ffe5478062eeb77fdca68c89bc29 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Wed, 27 Aug 2025 14:50:51 -0700
Subject: [PATCH 09/10] rm emit form TermSelection.vue

---
 src/components/TermSelection.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/TermSelection.vue b/src/components/TermSelection.vue
index 943a6df..b0bc407 100644
--- a/src/components/TermSelection.vue
+++ b/src/components/TermSelection.vue
@@ -14,13 +14,8 @@ const props = defineProps({
 // Stores
 
 const { selectedTerms } = useSearchStore()
-
 const selected = selectedTerms(props.facet.name)
 
-const emit = defineEmits<{
-  (e: 'status-changed'): void
-}>()
-
 </script>
 
 <template>
@@ -31,12 +26,11 @@ const emit = defineEmits<{
       :value="term.value"
       type="checkbox"
       :aria-label="`Filter by ${term.value}. Currently ${selected.includes(term.value) ? 'selected' : 'not selected'}`"
-      @change="emit('status-changed')"
     >
     <label :for="`term-${term.id}`">{{ term.value }}</label>
     <fieldset v-if="term.children" class="galc-facet-subterms">
       <legend>{{ term.value }}</legend>
-      <TermSelection v-for="child in term.children" :key="child.id" :facet="props.facet" :term="child" @change="emit('status-changed')"/>
+      <TermSelection v-for="child in term.children" :key="child.id" :facet="props.facet" :term="child"/>
     </fieldset>
   </div>
 </template>

From 07dabee46c6663956f73e7551212c647870086a4 Mon Sep 17 00:00:00 2001
From: zhouyu <zhouyu@berkeley.edu>
Date: Wed, 27 Aug 2025 14:51:49 -0700
Subject: [PATCH 10/10] rm temp/EditTermSelection.vue

---
 temp/EditTermSelection.vue | 102 -------------------------------------
 1 file changed, 102 deletions(-)
 delete mode 100644 temp/EditTermSelection.vue

diff --git a/temp/EditTermSelection.vue b/temp/EditTermSelection.vue
deleted file mode 100644
index c942928..0000000
--- a/temp/EditTermSelection.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { useSearchStore } from '../stores/search'
-import { ref } from 'vue'
-import TermSelection from './TermSelection.vue'
-
-const props = defineProps<{
-  facet: { name: string }
-  terms: { id: string | number; value: string; children?: any[] }[]
-}>()
-
-
-const { selectedTerms } = useSearchStore()
-const liveMessage = ref("")
-
-function handleStatusChanged() {
-  // Compute current status for this facet
-  const selected = selectedTerms(props.facet.name).value  // array of selected term values
-  
-  // Force reset before updating so SRs catch the change
-  liveMessage.value = '\u00A0'
-  requestAnimationFrame(() => {
-    if (selected.length > 0) {
-      liveMessage.value = `Selected filters: ${selected.join(', ')}`
-    } else {
-      liveMessage.value = `No filters selected`
-    }
-  })
-}
-
-
-//function handleAnnounce(message: string) {
-//  liveMessage.value = message
-//}
-</script>
-
-<template>
-  <div class="edit-term-selection">
-    <TermSelection
-      v-for="term in props.terms"
-      :key="term.id"
-      :facet="props.facet"
-      :term="term"
-      @status-changed="handleStatusChanged"
-    />
-
-    <!-- Single global live region -->
-   <span class="sr-only" aria-live="polite" data-testid="live-region">
-  {{ liveMessage }}
-</span>
-  </div>
-</template>
-
-<style lang="scss">
-div.galc-term-selection {
-  border: none;
-  display: grid;
-  grid-template-columns: 18px 1fr;
-  column-gap: 0.5em;
-  margin-left: 0;
-  padding-left: 0;
-
-  @media only screen and (max-width: 700px) {
-    font-size: 1.125rem;
-  }
-
-  input[type=checkbox] {
-    margin-bottom: 0.25em;
-
-    @media only screen and (max-width: 700px) {
-      -webkit-transform: scale(1.25);
-    }
-  }
-
-  label {
-    white-space: nowrap;
-    height: min-content;
-    font-weight: normal;
-    line-height: 1.15;
-    margin-bottom: 0.25em;
-    cursor: pointer;
-  }
-
-  fieldset.galc-facet-subterms {
-    display: block;
-    border: 0;
-    margin-left: 1.5em;
-  }
-}
-
-/* Screen-reader-only text */
-.sr-only {
-  position: absolute;
-  width: auto;    /* must allow perceivable width */
-  height: auto;   /* must allow perceivable height */
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-</style>