Ada 224: Form field causes unexpected change

src/components/Facet.vue

@@ -29,6 +29,7 @@ function onToggle (event: Event) {
   }
 }
 
+
 </script>
 
 <template>
@@ -37,7 +38,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"/>
+        <TermSelection v-for="term in rootTerms" :key="term.id" :facet="props.facet" :term="term" />
       </template>
     </details>
   </fieldset>

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'
 
@@ -13,6 +15,19 @@ import TermDeselection from './TermDeselection.vue'
 const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
 
+const search = useSearchStore()
+const liveMessage = computed(() => {
+  const parts: string[] = []
+  for (const facetName of search.activeFacetNames) {
+    const termNames = search.selectedTerms(facetName).value
+    if (termNames.length > 0) {
+      parts.push(`${facetName}: ${termNames.join(', ')}`)
+    }
+  }
+  return parts.length > 0
+    ? `Selected filters – ${parts.join('; ')}.`
+    : 'No filters selected.'
+})
 </script>
 
 <template>
@@ -33,6 +48,10 @@ const { isAdmin } = storeToRefs(useSessionStore())
         :facet="facet"
       />
     </form>
+
+    <!-- Accessible live region -->
+    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ liveMessage }}</span>
+
   </div>
 </template>
 
@@ -147,5 +166,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>

src/components/TermSelection.vue

@@ -14,7 +14,6 @@ const props = defineProps({
 // Stores
 
 const { selectedTerms } = useSearchStore()
-
 const selected = selectedTerms(props.facet.name)
 
 </script>

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
 })