fixing accessibility issues in SearchInput

nasa-jpl · Sep 12, 2024 · 31d8391 · 31d8391
1 parent 6790386
commit 31d8391
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/vue/src/components/SearchInput/SearchInput.vue b/packages/vue/src/components/SearchInput/SearchInput.vue
@@ -73,7 +73,7 @@ onMounted(() => {
       :class="{
         'text-gray-dark': defaultColors,
         'py-1': underlinedInput,
-        'py-3.5 lg:py-6': !underlinedInput
+        'py-3.5 lg:py-5': !underlinedInput
       }"
       type="search"
       aria-label="Query"
@@ -86,7 +86,8 @@ onMounted(() => {
     />
     <button
       v-if="withButton"
-      class="hover:cursor-pointer bg-action p-4 lg:p-5 border border-white"
+      class="z-10 cursor-pointer bg-action p-4 lg:p-5 border border-white"
+      aria-label="Search resources"
       @click="emit('submit')"
     >
       <IconSearch class="relative z-10 text-xl sm:text-2xl lg:text-3xl text-white" />

diff --git a/packages/vue/src/templates/edu/PageEduHome/PageEduHome.vue b/packages/vue/src/templates/edu/PageEduHome/PageEduHome.vue
@@ -101,7 +101,7 @@ const submitSearch = () => {
                   >
                     <BaseLink
                       variant="none"
-                      :to="`/edu/resources?topic=${topic.page?.title}`"
+                      :to="`/edu/resources?query=${topic.page?.title}`"
                       link-class="text-gray-dark whitespace-nowrap text-sm bg-[#99D1DF] font-extrabold rounded-full inline-block px-3 py-1 text-contrast-none hover:bg-action hover:text-white"
                     >
                       {{ topic.page?.title }}