Ada 225: Function cannot be performed by keyboard alone (#17)

* Replace the checkbox and label with an option button for the galc form

* Improve the appearance of the option button

* Make deselection and facet sections flexible

* Preserve facetsopen status

* Use store for preserv facetsOpen status

* Add ts test

* Consolidate store ref

Author: yzhoubk

src/components/Facet.vue

@@ -45,9 +45,10 @@ function onToggle (event: Event) {
 </template>
 
 <style lang="scss">
-fieldset.galc-facet {
-  display: inherit;
+.galc-facet {
+  padding: 0 0.625em;
   border: none;
+  display: inherit;
 
   legend {
     position: absolute;
@@ -67,7 +68,7 @@ fieldset.galc-facet {
       font-size: 1.125rem;
       border-bottom: 1px solid #ddd5c7;
       width: 100%;
-      margin-bottom: 0.5em;
+      margin-bottom: 0.0em;
       cursor: pointer;
 
       &::-webkit-details-marker {

src/components/Facets.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted} from 'vue'
 import { useFacetStore } from '../stores/facets'
 import { useSessionStore } from '../stores/session'
 import { useSearchStore } from '../stores/search'
@@ -12,10 +12,26 @@ import InternalFields from './InternalFields.vue'
 import Facet from './Facet.vue'
 import TermDeselection from './TermDeselection.vue'
 
-const { facets } = storeToRefs(useFacetStore())
 const { isAdmin } = storeToRefs(useSessionStore())
-
+const isMobile = ref(typeof window !== 'undefined' && window.innerWidth <= 700)
 const search = useSearchStore()
+
+const facetStore = useFacetStore()
+const { facets, facetsOpen } = storeToRefs(facetStore)
+const { toggleFacets } = facetStore
+
+function handleWindowResize() {
+  isMobile.value = typeof window !== 'undefined' && window.innerWidth <= 700
+}
+
+onMounted(() => {
+  window.addEventListener('resize', handleWindowResize)
+  handleWindowResize()
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', handleWindowResize)
+})
+
 const liveMessage = computed(() => {
   const parts: string[] = []
   for (const facetName of search.activeFacetNames) {
@@ -33,12 +49,24 @@ const liveMessage = computed(() => {
 <template>
   <div class="galc-facets">
     <TermDeselection id-prefix="facets"/>
-    <input id="show-facets" type="checkbox">
-    <label class="show-facets-label" for="show-facets">
+
+    <button
+      v-if="isMobile"
+      class="show-facets-button"
+      type="button"
+      @click="toggleFacets"
+      :aria-expanded="facetsOpen.toString()"
+      aria-controls="facet-form"
+    >
       Options
-      <img alt="Options" :src="filter" class="show-facets-icon">
-    </label>
-    <form class="galc-facet-form">
+      <img alt="" :src="filter" class="show-facets-icon">
+    </button>
+
+    <form
+      id="facet-form"
+      class="galc-facet-form"
+      v-show="facetsOpen || !isMobile"
+    >
       <Suppressed v-if="isAdmin"/>
       <InternalFields v-if="isAdmin"/>
       <Facet
@@ -50,47 +78,34 @@ const liveMessage = computed(() => {
     </form>
 
     <!-- Accessible live region -->
-    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ liveMessage }}</span>
-
+    <span class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveMessage }}
+    </span>
   </div>
 </template>
 
 <style lang="scss">
 div.galc-facets {
-
-  input#show-facets {
+  .show-facets-button {
     display: none;
   }
-
-  @media only screen and (min-width: 700px) {
+ 
+   @media only screen and (min-width: 700px) {
     margin-right: 1em;
-    
     // TODO: less hacky way to place this differently on desktop and mobile
     .galc-term-deselection {
       display: none;
     }
-
-    label.show-facets-label {
+    .show-facets-button {
       display: none;
     }
-
     form.galc-facet-form {
       width: 150px;
     }
   }
 
   @media only screen and (max-width: 700px) {
-    input#show-facets {
-      ~ form.galc-facet-form {
-        display: none;
-      }
-
-      &:checked ~ form.galc-facet-form {
-        display: grid;
-      }
-    }
-
-    label.show-facets-label {
+    .show-facets-button {
       display: block;
       font-size: 1rem;
       line-height: 1.75rem;
@@ -101,6 +116,9 @@ div.galc-facets {
       margin: 6px 16px 6px 0;
       width: fit-content;
       cursor: pointer;
+      border: none;
+      border-radius: 4px;
+      height: 33px;
 
       img.show-facets-icon {
         height: 0.9rem;
@@ -178,6 +196,6 @@ div.galc-facets {
   white-space: nowrap;
   border-width: 0;
   }
-} 
 
-</style>
+}
+</style>

src/stores/facets.ts

@@ -11,14 +11,20 @@ export const useFacetStore = defineStore('facets', () => {
 
   const facets: Ref<Facet[]> = ref([])
   const facetExpanded: Ref<{ [key: string]: boolean | undefined }> = ref({})
-  const computedExpansionState: {[key: string]: WritableComputedRef<boolean> } = {}
+  const computedExpansionState: { [key: string]: WritableComputedRef<boolean> } = {}
+  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 700
+  const facetsOpen = ref(!isMobile)
 
   // ------------------------------
   // Computed properties
 
   const facetNames = computed(() => { return facets.value.map(f => f.name) })
 
-  function expanded (facetName: string) {
+  function toggleFacets() {
+    facetsOpen.value = !facetsOpen.value
+  }
+
+  function expanded(facetName: string) {
     let expansionState = computedExpansionState[facetName]
     if (!expansionState) {
       expansionState = computed({
@@ -37,24 +43,24 @@ export const useFacetStore = defineStore('facets', () => {
   // ------------------------------
   // Actions
 
-  function expandAll (expandedNames = facetNames.value) {
+  function expandAll(expandedNames = facetNames.value) {
     const expanded = { ...facetExpanded.value }
     for (const facetName of expandedNames) {
       expanded[facetName] = true
     }
     facetExpanded.value = expanded
   }
 
-  function collapseAll () {
+  function collapseAll() {
     facetExpanded.value = {}
   }
 
-  function facetForName (name: string): Facet | undefined {
+  function facetForName(name: string): Facet | undefined {
     return facets.value.find((f) => f.name === name)
   }
 
   // ------------------------------
   // Store
 
-  return { facets, expanded, facetNames, facetForName, expandAll, collapseAll }
+  return { facets, expanded, facetNames, facetForName, expandAll, collapseAll, facetsOpen, toggleFacets }
 })

test/stores/facets.test.ts

@@ -11,6 +11,18 @@ describe('facets', () => {
     setActivePinia(createPinia())
   })
 
+  describe('test toggle funtion', () => {
+    it('should toggle facetsOpen', () => {
+      const store = useFacetStore()
+      const initial = store.facetsOpen
+      store.toggleFacets()
+      expect(store.facetsOpen).toBe(!initial)
+
+      store.toggleFacets()
+      expect(store.facetsOpen).toBe(initial)
+    })
+  })
+
   describe('without data', () => {
     describe('facets', () => {
       it('is initially empty', () => {