From f0d09cf583a972d2e3be8eb7d9755966f79a6148 Mon Sep 17 00:00:00 2001
From: Anne Lyttle <alyttle@berkeley.edu>
Date: Wed, 6 Nov 2024 15:51:45 -0800
Subject: [PATCH] BOAC-5729: wraps v-autocomplete with accessibility

---
 bea/pages/search_form.py                      |   4 +-
 src/components/search/AdvancedSearch.vue      |   1 +
 src/components/search/AdvancedSearchModal.vue | 179 ++++++------------
 src/components/util/AccessibleCombobox.vue    |  74 +++++++-
 4 files changed, 128 insertions(+), 130 deletions(-)

diff --git a/bea/pages/search_form.py b/bea/pages/search_form.py
index 86895b125..a511be304 100644
--- a/bea/pages/search_form.py
+++ b/bea/pages/search_form.py
@@ -172,8 +172,8 @@ def select_notes_posted_by_your_dept(self):
 
     # Author / Student
 
-    NOTE_AUTHOR = (By.ID, 'search-options-note-filters-author')
-    NOTE_STUDENT = (By.ID, 'search-options-note-filters-student')
+    NOTE_AUTHOR = (By.ID, 'search-options-note-author')
+    NOTE_STUDENT = (By.ID, 'search-options-note-student')
 
     def set_notes_author(self, name, alt_names=None):
         app.logger.info(f'Setting note search author name {name}')
diff --git a/src/components/search/AdvancedSearch.vue b/src/components/search/AdvancedSearch.vue
index 64f57b4ab..b23dbf43b 100644
--- a/src/components/search/AdvancedSearch.vue
+++ b/src/components/search/AdvancedSearch.vue
@@ -10,6 +10,7 @@
           'search-focus-in': searchStore.isFocusOnSearch || searchStore.queryText,
           'search-focus-out': !searchStore.isFocusOnSearch && !searchStore.queryText
         }"
+        clearable
         :disabled="searchStore.isSearching"
         :get-value="() => queryTextModel"
         id-prefix="basic-search"
diff --git a/src/components/search/AdvancedSearchModal.vue b/src/components/search/AdvancedSearchModal.vue
index 3e0f6796c..0a71d1343 100644
--- a/src/components/search/AdvancedSearchModal.vue
+++ b/src/components/search/AdvancedSearchModal.vue
@@ -7,6 +7,7 @@
         aria-label="Open Advanced Search dialog"
         class="mx-1"
         :class="{'border-0': !isFocusAdvSearchButton}"
+        clearable
         color="white"
         :disabled="searchStore.isSearching"
         height="46"
@@ -47,6 +48,7 @@
             <AccessibleCombobox
               :key="searchStore.autocompleteInputResetKey"
               id-prefix="advanced-search"
+              clearable
               :get-value="() => model.queryText"
               input-type="search"
               :items="searchStore.searchHistory"
@@ -185,98 +187,62 @@
                     </v-radio-group>
                   </div>
                   <div class="pt-2 w-75" :class="{'w-100': $vuetify.display.xs}">
-                    <label class="form-control-label" for="search-options-note-filters-author">Advisor</label>
-                    <v-autocomplete
-                      id="search-options-note-filters-author"
-                      ref="noteAuthorInput"
-                      aria-label="Advisor name or S I D lookup. Expect auto suggest."
-                      autocomplete="list"
-                      base-color="primary"
+                    <label class="form-control-label" for="search-options-note-author-input">Advisor</label>
+                    <AccessibleCombobox
+                      id-prefix="search-options-note-author"
+                      aria-description="Advisor name or S I D lookup. Expect auto suggest."
                       :clearable="!isFetchingAdvisors"
-                      class="mt-1"
-                      :class="{'demo-mode-blur': currentUser.inDemoMode}"
+                      :clazz="{'mt-1': true, 'demo-mode-blur': currentUser.inDemoMode}"
                       color="primary"
                       density="compact"
                       :disabled="searchStore.isSearching || model.postedBy === 'you' || model.postedBy === 'yourDepartment'"
-                      hide-details
-                      hide-no-data
+                      :filter-results="suggestAdvisors"
+                      :get-value="() => model.postedBy === 'anyone' ? get(model.author, 'label') : null"
+                      is-autocomplete
+                      :is-busy="isFetchingAdvisors"
                       :items="suggestedAdvisors"
+                      label="Note Author Advisor"
+                      list-label="Note Author Advisors List"
                       :maxlength="56"
-                      :menu-icon="null"
                       :menu-props="{'content-class': currentUser.inDemoMode ? 'demo-mode-blur' : ''}"
                       min-width="12rem"
-                      :model-value="model.postedBy === 'anyone' ? model.author : null"
+                      :on-clear="onClearAdvisorSearch"
+                      :on-toggle-menu="isOpen => isFocusLockDisabled = isOpen"
                       placeholder="Enter name..."
-                      variant="outlined"
-                      @click:clear="onClearAdvisorSearch"
-                      @update:menu="isOpen => isFocusLockDisabled = isOpen"
-                      @update:model-value="author => {
+                      :set-value="author => {
                         model.postedBy = 'anyone'
                         model.author = author
                       }"
-                      @update:search="onUpdateAdvisorSearch"
-                      @blur="onAdvisorSearchBlur"
-                    >
-                      <template #append-inner>
-                        <v-progress-circular
-                          v-if="isFetchingAdvisors"
-                          color="pale-blue"
-                          indeterminate
-                          :size="16"
-                          :width="3"
-                        />
-                      </template>
-                      <template #selection>
-                        {{ model.author.label }}
-                      </template>
-                    </v-autocomplete>
+                    />
                   </div>
                   <div class="pt-3 w-75" :class="{'w-100': $vuetify.display.xs}">
-                    <label class="form-control-label" for="search-options-note-filters-student">
+                    <label class="form-control-label" for="search-options-note-student-input">
                       <span aria-hidden="true">Student (name or SID)</span>
                       <span class="sr-only">Student (name or S I D)</span>
                     </label>
-                    <v-autocomplete
-                      id="search-options-note-filters-student"
-                      ref="noteStudentInput"
-                      aria-label="Student name or S I D lookup. Expect auto suggest."
-                      autocomplete="list"
-                      base-color="primary"
+                    <AccessibleCombobox
+                      id-prefix="search-options-note-student"
+                      aria-description="Student name or S I D lookup. Expect auto suggest."
                       :clearable="!isFetchingStudents"
-                      class="mt-1"
-                      :class="{'demo-mode-blur': currentUser.inDemoMode}"
+                      :clazz="{'mt-1': true, 'demo-mode-blur': currentUser.inDemoMode}"
                       color="primary"
                       density="compact"
                       :disabled="searchStore.isSearching"
-                      hide-details
-                      hide-no-data
+                      :filter-results="suggestStudents"
+                      :get-value="() => get(model.student, 'label')"
+                      is-autocomplete
+                      :is-busy="isFetchingStudents"
                       :items="suggestedStudents"
+                      label="Note Students"
+                      list-label="Note Student List"
                       :maxlength="56"
-                      :menu-icon="null"
                       :menu-props="{'content-class': currentUser.inDemoMode ? 'demo-mode-blur' : ''}"
                       min-width="12rem"
-                      :model-value="model.student"
+                      :on-clear="onClearStudentSearch"
+                      :on-toggle-menu="isOpen => isFocusLockDisabled = isOpen"
                       placeholder="Enter name or SID..."
-                      variant="outlined"
-                      @click:clear="onClearStudentSearch"
-                      @update:menu="isOpen => isFocusLockDisabled = isOpen"
-                      @update:model-value="student => model.student = student"
-                      @update:search="onUpdateStudentSearch"
-                      @blur="onStudentSearchBlur"
-                    >
-                      <template #append-inner>
-                        <v-progress-circular
-                          v-if="isFetchingAdvisors"
-                          color="pale-blue"
-                          indeterminate
-                          :size="16"
-                          :width="3"
-                        />
-                      </template>
-                      <template #selection>
-                        {{ model.student.label }}
-                      </template>
-                    </v-autocomplete>
+                      :set-value="student => model.student = student"
+                    />
                   </div>
                   <div class="pt-3">
                     <label id="search-options-date-range-label" class="form-control-label">
@@ -369,10 +335,10 @@ import AccessibleCombobox from '@/components/util/AccessibleCombobox'
 import FocusLock from 'vue-focus-lock'
 import ProgressButton from '@/components/util/ProgressButton'
 import {addToSearchHistory, findAdvisorsByName} from '@/api/search'
-import {alertScreenReader, normalizeId, putFocusNextTick, scrollToTop, setComboboxAccessibleLabel} from '@/lib/utils'
-import {computed, nextTick, onUpdated, ref, watch} from 'vue'
+import {alertScreenReader, normalizeId, putFocusNextTick, scrollToTop} from '@/lib/utils'
+import {computed, ref, watch} from 'vue'
 import {DateTime} from 'luxon'
-import {debounce, isDate, map, size, trim} from 'lodash'
+import {debounce, get, isDate, map, size, trim} from 'lodash'
 import {findStudentsByNameOrSid} from '@/api/student'
 import {labelForSearchInput} from '@/lib/search'
 import {mdiTune} from '@mdi/js'
@@ -404,8 +370,6 @@ const isFocusAdvSearchButton = ref(false)
 const isFocusLockDisabled = ref(false)
 const isFetchingAdvisors = ref(false)
 const isFetchingStudents = ref(false)
-const noteAuthorInput = ref()
-const noteStudentInput = ref()
 const suggestedAdvisors = ref([])
 const suggestedStudents = ref([])
 
@@ -437,15 +401,6 @@ const validDateRange = computed(() => {
   }
 })
 
-onUpdated(() => {
-  if (searchStore.showAdvancedSearch) {
-    nextTick(() => {
-      setComboboxAccessibleLabel(noteAuthorInput.value.$el, 'Search notes by author')
-      setComboboxAccessibleLabel(noteStudentInput.value.$el, 'Search notes by student')
-    })
-  }
-})
-
 watch(() => searchStore.showAdvancedSearch, show => {
   if (show) {
     model.value = {
@@ -499,49 +454,11 @@ const onClearAdvisorSearch = () => {
   isFetchingAdvisors.value = false
 }
 
-const onAdvisorSearchBlur = () => {
-  if (!advisorSearchText.value || advisorSearchText.value.length === 0) {
-    onClearAdvisorSearch()
-  }
-}
-
 const onClearStudentSearch = () => {
   suggestedStudents.value = []
   isFetchingStudents.value = false
 }
 
-const onStudentSearchBlur = () => {
-  if (!studentSearchText.value || studentSearchText.value.length === 0) {
-    onClearStudentSearch()
-  }
-}
-
-
-
-const onUpdateAdvisorSearch = debounce(query => {
-  const q = trim(query)
-  advisorSearchText.value = q
-  if (size(q) > 1) {
-    isFetchingAdvisors.value = true
-    findAdvisorsByName(q, 20, new AbortController()).then(results => {
-      suggestedAdvisors.value = map(results, result => ({title: result.label, value: result}))
-      isFetchingAdvisors.value = false
-    })
-  }
-}, 500)
-
-const onUpdateStudentSearch = debounce(query => {
-  const q = trim(query)
-  studentSearchText.value = q
-  if (size(q) > 1) {
-    isFetchingStudents.value = true
-    findStudentsByNameOrSid(q, 20, new AbortController()).then(results => {
-      suggestedStudents.value = map(results, result => ({title: result.label, value: result}))
-      isFetchingStudents.value = false
-    })
-  }
-}, 500)
-
 const openAdvancedSearch = () => {
   searchStore.setShowAdvancedSearch(true)
 }
@@ -562,7 +479,6 @@ const reset = force => {
     m.includeNotes = currentUser.canAccessAdvisingData
     m.includeStudents = true
   }
-
 }
 
 const search = () => {
@@ -637,6 +553,31 @@ const search = () => {
   }
   scrollToTop()
 }
+
+const suggestAdvisors = debounce(query => {
+  const q = trim(query)
+  advisorSearchText.value = q
+  if (size(q) > 1) {
+    isFetchingAdvisors.value = true
+    findAdvisorsByName(q, 20, new AbortController()).then(results => {
+      suggestedAdvisors.value = map(results, result => ({title: result.label, value: result}))
+      isFetchingAdvisors.value = false
+    })
+  }
+}, 500)
+
+const suggestStudents = debounce(query => {
+  const q = trim(query)
+  studentSearchText.value = q
+  if (size(q) > 1) {
+    isFetchingStudents.value = true
+    findStudentsByNameOrSid(q, 20, new AbortController()).then(results => {
+      suggestedStudents.value = map(results, result => ({title: result.label, value: result}))
+      isFetchingStudents.value = false
+    })
+  }
+}, 500)
+
 </script>
 
 <style scoped>
diff --git a/src/components/util/AccessibleCombobox.vue b/src/components/util/AccessibleCombobox.vue
index d6795dbcf..14abb2c0a 100644
--- a/src/components/util/AccessibleCombobox.vue
+++ b/src/components/util/AccessibleCombobox.vue
@@ -1,30 +1,37 @@
 <template>
-  <v-combobox
+  <component
+    :is="isAutocomplete ? 'v-autocomplete' : 'v-combobox'"
     :id="`${idPrefix}-input`"
     ref="container"
     v-model="model"
     :aria-required="required"
     autocomplete="list"
+    :base-color="color"
     bg-color="white"
     :class="clazz"
-    clearable
-    density="comfortable"
+    :clearable="clearable"
+    :color="color"
+    :density="density"
     :disabled="disabled"
     hide-details
     hide-no-data
     :items="items"
     :list-props="{ariaLive: 'off'}"
     :loading="isBusy"
+    :maxlength="maxlength"
     :menu-icon="null"
     :menu-props="mergedMenuProps"
+    :min-width="minWidth"
     persistent-clear
     :placeholder="placeholder || label"
+    return-object
     :type="inputType"
     variant="outlined"
+    @blur="isEmpty(query) ? onClear() : noop()"
     @keydown.enter.stop.prevent="onSubmit"
     @update:focused="onFocusInput"
     @update:menu="onToggleMenu"
-    @update:search="onFilterResults"
+    @update:search="onUpdateSearch"
   >
     <template #loader="{isActive}">
       <v-progress-circular
@@ -61,15 +68,18 @@
         @click="() => onSelectItem(item)"
         @focus="e => onFocusListItem(e, index)"
       >
-        {{ item.value }}
+        {{ item.props.title }}
       </v-list-item>
     </template>
-  </v-combobox>
+    <template #selection="{item}">
+      {{ item.props.title }}
+    </template>
+  </component>
   <span aria-live="polite" class="sr-only">{{ resultsSummary }}</span>
 </template>
 
 <script setup>
-import {filter, includes} from 'lodash'
+import {get, filter, includes, isEmpty, noop} from 'lodash'
 import {mdiCloseCircle} from '@mdi/js'
 import {nextTick, onMounted, ref} from 'vue'
 import {alertScreenReader, pluralize, putFocusNextTick} from '@/lib/utils'
@@ -85,10 +95,29 @@ const props = defineProps({
     required: false,
     type: [String, Object]
   },
+  clearable: {
+    required: true,
+    type: Boolean
+  },
+  color: {
+    default: undefined,
+    required: false,
+    type: String
+  },
+  density: {
+    default: 'comfortable',
+    required: false,
+    type: String
+  },
   disabled: {
     required: false,
     type: Boolean
   },
+  filterResults: {
+    default: () => {},
+    required: false,
+    type: Function
+  },
   getValue: {
     required: true,
     type: Function
@@ -102,6 +131,10 @@ const props = defineProps({
     required: false,
     type: String
   },
+  isAutocomplete: {
+    required: false,
+    type: Boolean
+  },
   isBusy: {
     required: false,
     type: Boolean
@@ -118,11 +151,26 @@ const props = defineProps({
     required: true,
     type: String
   },
+  maxlength: {
+    default: undefined,
+    required: false,
+    type: [String, Number]
+  },
   menuProps: {
     default: () => {},
     required: false,
     type: Object
   },
+  minWidth: {
+    default: undefined,
+    required: false,
+    type: [String, Number]
+  },
+  onClear: {
+    default: () => {},
+    required: false,
+    type: Function
+  },
   onToggleMenu: {
     default: () => {},
     required: false,
@@ -175,6 +223,7 @@ const model = defineModel({
   },
   type: String
 })
+const query = ref(undefined)
 const resultsSummary = ref(undefined)
 const resultsSummaryInterval = ref(undefined)
 
@@ -196,11 +245,14 @@ onMounted(() => {
 
 const onClearInput = () => {
   model.value = null
+  props.onClear()
   alertScreenReader('Cleared.')
   putFocusNextTick(`${props.idPrefix}-input`)
 }
 
-const onFilterResults = () => {
+const onUpdateSearch = q => {
+  query.value = q
+  props.filterResults(q)
   clearInterval(resultsSummaryInterval.value)
   resultsSummaryInterval.value = setInterval(setResultsSummary, 1000)
 }
@@ -238,7 +290,8 @@ const onFocusInput = isFocused => {
 }
 
 const onSelectItem = item => {
-  model.value = item.value
+  model.value = get(item.raw, 'value', item.raw)
+  container.value.search = ''
   nextTick(props.whenItemSelected)
 }
 
@@ -264,4 +317,7 @@ const setResultsSummary = () => {
   padding-right: 1px;
   top: 0;
 }
+:deep(.v-field) {
+  color: inherit !important;
+}
 </style>