From 2a632ea2abe525e48bd5df0bfb9c86fb0944bb76 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 3 Oct 2022 13:13:36 +0300
Subject: [PATCH 1/8] Implement the composite search bar in the mobile search
 header

---
 src/components/VHeader/VHeaderDesktop.vue     |   2 +-
 .../VHeader/VHeaderMobile/VBackButton.vue     |  40 ++++
 .../VHeader/VHeaderMobile/VHeaderMobile.vue   | 208 ------------------
 src/components/VHeader/VLogoButton.vue        |   9 +-
 .../VHeader/VSearchBar/VClearButton.vue       |  25 +++
 .../VHeader/meta/VHeaderMobile.stories.mdx    |   8 -
 src/components/VIconButton/VIconButton.vue    |   1 +
 src/locales/en.json                           |   6 +-
 8 files changed, 76 insertions(+), 223 deletions(-)
 create mode 100644 src/components/VHeader/VHeaderMobile/VBackButton.vue
 delete mode 100644 src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
 create mode 100644 src/components/VHeader/VSearchBar/VClearButton.vue

diff --git a/src/components/VHeader/VHeaderDesktop.vue b/src/components/VHeader/VHeaderDesktop.vue
index 5dc3b1232b..659f79b8aa 100644
--- a/src/components/VHeader/VHeaderDesktop.vue
+++ b/src/components/VHeader/VHeaderDesktop.vue
@@ -7,7 +7,7 @@
         : 'border-white'
     "
   >
-    <VLogoButton :is-fetching="isFetching" :is-search-route="true" />
+    <VLogoButton :is-fetching="isFetching" />
 
     <VSearchBar
       v-model.trim="searchTerm"
diff --git a/src/components/VHeader/VHeaderMobile/VBackButton.vue b/src/components/VHeader/VHeaderMobile/VBackButton.vue
new file mode 100644
index 0000000000..157523c2da
--- /dev/null
+++ b/src/components/VHeader/VHeaderMobile/VBackButton.vue
@@ -0,0 +1,40 @@
+<template>
+  <VButton
+    size="disabled"
+    class="icon-button flex h-12 w-12 flex-shrink-0 rotate-90 items-center justify-center bg-tx active:shadow-ring"
+    variant="plain--avoid"
+    :aria-label="$t('header.back-button')"
+    @click="$emit('click')"
+  >
+    <span
+      class="flex h-8 w-8 items-center justify-center rounded-sm bg-dark-charcoal-10"
+    >
+      <VIcon
+        class="bg-red pointer-events-none rounded-sm bg-dark-charcoal-10"
+        :icon-path="caretDownIcon"
+      />
+    </span>
+  </VButton>
+</template>
+
+<script lang="ts">
+import { defineEvent } from '~/types/emits'
+
+import VButton from '~/components/VButton.vue'
+import VIcon from '~/components/VIcon/VIcon.vue'
+
+import caretDownIcon from '~/assets/icons/caret-down.svg'
+
+export default {
+  name: 'VBackButton',
+  components: { VButton, VIcon },
+  emits: {
+    click: defineEvent(),
+  },
+  setup() {
+    return {
+      caretDownIcon,
+    }
+  },
+}
+</script>
diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
deleted file mode 100644
index b2af3f04ef..0000000000
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-  <header
-    class="main-header z-30 flex w-full items-center justify-between gap-x-2 bg-white px-4 py-3 md:items-stretch md:py-4 md:px-7"
-    :class="{
-      'border-b border-white': !isHeaderScrolled && !isMenuOpen,
-      'border-b border-dark-charcoal-20': isHeaderScrolled || isMenuOpen,
-    }"
-  >
-    <VLogoButton :is-fetching="isFetching" :is-search-route="isSearchRoute" />
-
-    <VSearchBar
-      v-model.trim="searchTerm"
-      class="flex-grow"
-      size="medium"
-      @submit="handleSearch"
-    >
-      <span
-        v-show="searchStatus"
-        class="info mx-4 hidden whitespace-nowrap text-xs font-semibold text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus:text-dark-charcoal"
-      >
-        {{ searchStatus }}
-      </span>
-    </VSearchBar>
-    <VContentSettingsModal :is-fetching="isFetching" />
-  </header>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  ref,
-  useContext,
-  useRouter,
-} from '@nuxtjs/composition-api'
-
-import { ALL_MEDIA, searchPath } from '~/constants/media'
-import { useMatchSearchRoutes } from '~/composables/use-match-routes'
-import { useI18n } from '~/composables/use-i18n'
-import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
-import { useMediaStore } from '~/stores/media'
-import { isSearchTypeSupported, useSearchStore } from '~/stores/search'
-
-import { IsHeaderScrolledKey, IsMinScreenMdKey } from '~/types/provides'
-
-import VLogoButton from '~/components/VHeader/VLogoButton.vue'
-import VModal from '~/components/VModal/VModal.vue'
-import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
-
-import VContentSettingsModal from '~/components/VHeader/VHeaderMobile/VContentSettingsModal.vue'
-
-import closeIcon from '~/assets/icons/close.svg'
-
-const menus = {
-  FILTERS: 'filters',
-  CONTENT_SWITCHER: 'content-switcher',
-}
-type HeaderMenu = 'filters' | 'content-switcher'
-
-/**
- * The mobile search header component.
- */
-export default defineComponent({
-  name: 'VHeaderMobile',
-  components: {
-    VContentSettingsModal,
-    VLogoButton,
-    VSearchBar,
-  },
-  setup() {
-    const contentSettingsModalRef = ref<InstanceType<typeof VModal> | null>(
-      null
-    )
-    const mediaStore = useMediaStore()
-    const searchStore = useSearchStore()
-    const { app } = useContext()
-    const i18n = useI18n()
-    const router = useRouter()
-
-    const { matches: isSearchRoute } = useMatchSearchRoutes()
-
-    const isHeaderScrolled = inject(IsHeaderScrolledKey)
-    const isMinScreenMd = inject(IsMinScreenMdKey)
-
-    const openMenu = ref<null | HeaderMenu>(null)
-    const isMenuOpen = computed(() => openMenu.value !== null)
-
-    const openMenuModal = (menuName: HeaderMenu) => {
-      if (openMenu.value !== null) {
-        close()
-      }
-      openMenu.value = menuName
-    }
-    const close = () => {
-      openMenu.value = null
-    }
-    const closeModal = () => {
-      if (contentSettingsModalRef.value) {
-        contentSettingsModalRef.value.close()
-      }
-      close()
-    }
-
-    const isFetching = computed(() => {
-      return mediaStore.fetchState.isFetching
-    })
-
-    const resultsCount = computed(() => mediaStore.resultCount)
-    const { getI18nCount } = useI18nResultsCount()
-    /**
-     * Additional text at the end of the search bar.
-     * Shows the loading state or result count.
-     */
-    const searchStatus = computed(() => {
-      if (!isSearchRoute.value || searchStore.searchTerm === '') return ''
-      if (isFetching.value) return i18n.t('header.loading')
-      return getI18nCount(resultsCount.value)
-    })
-
-    const localSearchTerm = ref(searchStore.searchTerm)
-    let searchTermChanged = computed(() => {
-      return searchStore.searchTerm !== localSearchTerm.value
-    })
-    /**
-     * Search term has a getter and setter to be used as a v-model.
-     * To prevent sending unnecessary requests, we also keep track of whether
-     * the search term was changed.
-     */
-    const searchTerm = computed({
-      get: () => localSearchTerm.value,
-      set: (value: string) => {
-        localSearchTerm.value = value
-      },
-    })
-
-    /**
-     * Called when the 'search' button in the header is clicked.
-     * There are several scenarios:
-     * - search term hasn't changed:
-     *   - on a search route, do nothing.
-     *   - on other routes: set searchType to 'All content', reset the media,
-     *     change the path to `/search/` (All content).
-     * - search term changed:
-     *   - on a search route: Update the store searchTerm value, update query `q` param, reset media,
-     *     fetch new media.
-     *   - on other routes: Update the store searchTerm value, set searchType to 'All content', reset media,
-     *     update query `q` param.
-     * Updating the path causes the `search.vue` page's route watcher
-     * to run and fetch new media.
-     */
-    const handleSearch = async () => {
-      window.scrollTo({ top: 0, left: 0, behavior: 'auto' })
-      const mediaStore = useMediaStore()
-      const searchStore = useSearchStore()
-      const searchType = isSearchRoute.value
-        ? searchStore.searchType
-        : ALL_MEDIA
-      if (
-        isSearchRoute.value &&
-        (!searchTermChanged.value || searchTerm.value === '')
-      )
-        return
-      if (searchTermChanged.value) {
-        await mediaStore.clearMedia()
-
-        searchStore.setSearchTerm(searchTerm.value)
-        searchStore.setSearchType(searchType)
-      }
-      document.activeElement?.blur()
-      if (isSearchTypeSupported(searchType)) {
-        const newPath = app.localePath({
-          path: searchPath(searchType),
-          query: searchStore.searchQueryParams,
-        })
-        router.push(newPath)
-      }
-    }
-    const areFiltersDisabled = computed(
-      () => !searchStore.searchTypeIsSupported
-    )
-
-    return {
-      closeIcon,
-      isFetching,
-
-      isHeaderScrolled,
-      isMinScreenMd,
-      isSearchRoute,
-      areFiltersDisabled,
-
-      contentSettingsModalRef,
-
-      closeModal,
-      openMenu,
-      openMenuModal,
-      isMenuOpen,
-
-      menus,
-      close,
-
-      handleSearch,
-      searchStatus,
-      searchTerm,
-    }
-  },
-})
-</script>
diff --git a/src/components/VHeader/VLogoButton.vue b/src/components/VHeader/VLogoButton.vue
index b413b9ef65..c4cc8c632a 100644
--- a/src/components/VHeader/VLogoButton.vue
+++ b/src/components/VHeader/VLogoButton.vue
@@ -5,7 +5,8 @@
     :aria-label="$t('header.home-link')"
     variant="plain"
     size="disabled"
-    class="max-w-min text-dark-charcoal hover:bg-yellow"
+    class="text-dark-charcoal hover:bg-yellow"
+    :class="fixedSize ? 'h-12 w-12 flex-shrink-0' : 'max-w-min'"
   >
     <VLogoLoader
       :status="isFetching ? 'loading' : 'idle'"
@@ -27,13 +28,13 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    isSearchRoute: {
+    autoResizeLogo: {
       type: Boolean,
       default: false,
     },
-    autoResizeLogo: {
+    fixedSize: {
       type: Boolean,
-      default: true,
+      default: false,
     },
   },
 })
diff --git a/src/components/VHeader/VSearchBar/VClearButton.vue b/src/components/VHeader/VSearchBar/VClearButton.vue
new file mode 100644
index 0000000000..6ddfa75ff1
--- /dev/null
+++ b/src/components/VHeader/VSearchBar/VClearButton.vue
@@ -0,0 +1,25 @@
+<template>
+  <VIconButton
+    :button-props="{ variant: 'plain' }"
+    :icon-props="{ iconPath: closeIcon }"
+    size="smaller"
+    class="border-tx text-dark-charcoal-70"
+    :aria-label="$t('browse-page.search-form.clear')"
+    @click="$emit('click')"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+import closeIcon from '~/assets/icons/close-small.svg'
+
+export default defineComponent({
+  name: 'VClearButton',
+  setup() {
+    return {
+      closeIcon,
+    }
+  },
+})
+</script>
diff --git a/src/components/VHeader/meta/VHeaderMobile.stories.mdx b/src/components/VHeader/meta/VHeaderMobile.stories.mdx
index 2e50ee52d4..3c64bc62ab 100644
--- a/src/components/VHeader/meta/VHeaderMobile.stories.mdx
+++ b/src/components/VHeader/meta/VHeaderMobile.stories.mdx
@@ -10,14 +10,6 @@ import VHeaderMobile from '~/components/VHeader/VHeaderMobile/VHeaderMobile.vue'
 <Meta
   title="Components/VHeader/VHeaderMobile/VHeaderMobile"
   component={VHeaderMobile}
-  argTypes={{
-    input: {
-      action: 'input',
-    },
-    submit: {
-      action: 'submit',
-    },
-  }}
 />
 
 export const Template = (args) => ({
diff --git a/src/components/VIconButton/VIconButton.vue b/src/components/VIconButton/VIconButton.vue
index 291eca97e6..2feb4de23d 100644
--- a/src/components/VIconButton/VIconButton.vue
+++ b/src/components/VIconButton/VIconButton.vue
@@ -28,6 +28,7 @@ import VButton, { type ButtonProps } from '~/components/VButton.vue'
 const SIZE_MAP = Object.freeze({
   tiny: { icon: 'w-6 h-6', button: 'w-6 h-6' },
   small: { icon: 'w-6 h-6', button: 'w-10 h-10' },
+  smaller: { icon: 'w-6 h-6', button: 'w-8 h-8' },
   // TODO: audit the sizes after new header is done.
   'new-small': { icon: 'w-4 h-4', button: 'w-8 h-8' },
   'search-small': {
diff --git a/src/locales/en.json b/src/locales/en.json
index 5bb0682c15..2711eb4bf4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -59,7 +59,8 @@
       "simple": "Filters",
       "with-count": "{count} Filter|{count} Filters"
     },
-    "see-results": "See results"
+    "see-results": "See results",
+    "back-button": "Go back"
   },
   "navigation": {
     "about": "About",
@@ -374,7 +375,8 @@
       "model-3d": "3D Models",
       "all": "content",
       "collection-placeholder": "Search this collection",
-      "button": "Search"
+      "button": "Search",
+      "clear": "Clear"
     },
     "license-description": {
       "title": "License CC",

From 154868c83dc6a5b22f51627d471f1f51f59854f1 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 6 Oct 2022 16:58:33 +0300
Subject: [PATCH 2/8] Add VHeaderMobile and VInputModal

---
 .../VHeader/VHeaderMobile/VHeaderMobile.vue   | 348 ++++++++++++++++++
 src/components/VModal/VInputModal.vue         | 141 +++++++
 .../VRecentSearches/VRecentSearches.vue       |  20 +-
 src/layouts/default.vue                       |   6 +-
 4 files changed, 507 insertions(+), 8 deletions(-)
 create mode 100644 src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
 create mode 100644 src/components/VModal/VInputModal.vue

diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
new file mode 100644
index 0000000000..1d90abacd9
--- /dev/null
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -0,0 +1,348 @@
+<template>
+  <header
+    class="main-header z-30 flex w-full items-center border-b border-tx bg-white px-6 py-4"
+    :class="{ 'border-dark-charcoal-20': isHeaderScrolled }"
+  >
+    <VInputModal
+      class="flex w-full"
+      variant="recent-searches"
+      :is-active="isRecentSearchesModalOpen"
+      @close="deactivate"
+    >
+      <div class="flex w-full" :class="isRecentSearchesModalOpen ? 'px-2' : ''">
+        <form
+          class="search-bar group flex h-12 w-full flex-row items-center overflow-hidden rounded-sm border border-1.5"
+          :class="
+            searchBarIsActive
+              ? 'border-pink bg-white'
+              : 'border-tx bg-dark-charcoal-06'
+          "
+          @submit.prevent="handleSearch"
+        >
+          <slot name="start">
+            <VLogoButton
+              v-if="!searchBarIsActive"
+              :is-fetching="isFetching"
+              :is-search-route="true"
+              class="w-12"
+            />
+            <VBackButton v-else @click="handleBack" />
+          </slot>
+
+          <input
+            id="search-bar"
+            ref="searchInputRef"
+            name="q"
+            :placeholder="$t('hero.search.placeholder').toString()"
+            type="search"
+            class="search-field h-full w-full flex-grow appearance-none rounded-none border-tx bg-tx text-2xl text-dark-charcoal-70 placeholder-dark-charcoal-70 ms-1 focus-visible:outline-none"
+            :value="searchTerm"
+            :aria-label="
+              $t('search.search-bar-label', {
+                openverse: 'Openverse',
+              }).toString()
+            "
+            autocomplete="off"
+            role="combobox"
+            aria-autocomplete="none"
+            :aria-expanded="showRecentSearches"
+            aria-controls="recent-searches-list"
+            :aria-activedescendant="
+              selectedIdx !== undefined ? `option-${selectedIdx}` : undefined
+            "
+            @input="updateSearchText"
+            @focus="activate"
+            @keydown="handleKeydown"
+          />
+          <slot>
+            <VClearButton
+              v-if="searchBarIsActive"
+              class="me-2"
+              @click="clearSearchText"
+            />
+            <template v-else>
+              <span
+                v-show="searchStatus"
+                class="info mx-4 hidden whitespace-nowrap text-xs group-hover:text-dark-charcoal group-focus:text-dark-charcoal md:flex"
+              >
+                {{ searchStatus }}
+              </span>
+              <VContentSettingsModal />
+            </template>
+          </slot>
+        </form>
+      </div>
+
+      <VRecentSearches
+        v-show="showRecentSearches"
+        :selected-idx="selectedIdx"
+        :entries="entries"
+        :bordered="false"
+        class="mt-4"
+        @select="handleSelect"
+        @clear="handleClear"
+      />
+    </VInputModal>
+  </header>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  inject,
+  nextTick,
+  ref,
+  useContext,
+  useRouter,
+  watch,
+} from '@nuxtjs/composition-api'
+
+import { ensureFocus } from '~/utils/reakit-utils/focus'
+import { cyclicShift } from '~/utils/math'
+
+import { searchPath } from '~/constants/media'
+import { keycodes } from '~/constants/key-codes'
+
+import { IsHeaderScrolledKey } from '~/types/provides'
+
+import { useI18n } from '~/composables/use-i18n'
+import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
+
+import { useMediaStore } from '~/stores/media'
+import { isSearchTypeSupported, useSearchStore } from '~/stores/search'
+
+import VBackButton from '~/components/VHeader/VHeaderMobile/VBackButton.vue'
+import VClearButton from '~/components/VHeader/VSearchBar/VClearButton.vue'
+import VLogoButton from '~/components/VHeader/VLogoButton.vue'
+import VInputModal from '~/components/VModal/VInputModal.vue'
+import VContentSettingsModal from '~/components/VHeader/VHeaderMobile/VContentSettingsModal.vue'
+import VRecentSearches from '~/components/VRecentSearches/VRecentSearches.vue'
+
+import closeIcon from '~/assets/icons/close-small.svg'
+
+/**
+ * Displays a text field for a search query and is attached to an action button
+ * that fires a search request. The loading state and number of hits are also
+ * displayed in the bar itself.
+ */
+export default defineComponent({
+  name: 'VHeaderMobile',
+  components: {
+    VContentSettingsModal,
+    VBackButton,
+    VClearButton,
+    VInputModal,
+    VLogoButton,
+    VRecentSearches,
+  },
+  setup() {
+    const searchInputRef = ref<HTMLInputElement | null>(null)
+
+    const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
+    const { app } = useContext()
+    const i18n = useI18n()
+    const router = useRouter()
+
+    const searchBarIsActive = ref(false)
+
+    const isHeaderScrolled = inject(IsHeaderScrolledKey)
+
+    const isFetching = computed(() => mediaStore.fetchState.isFetching)
+
+    const resultsCount = computed(() => mediaStore.resultCount)
+    const { getI18nCount } = useI18nResultsCount()
+    /**
+     * Additional text at the end of the search bar.
+     * Shows the loading state or result count.
+     */
+    const searchStatus = computed<string>(() => {
+      if (searchStore.searchTerm === '') return ''
+      if (isFetching.value) return i18n.t('header.loading').toString()
+      return getI18nCount(resultsCount.value)
+    })
+
+    const localSearchTerm = ref(searchStore.searchTerm)
+    let searchTermChanged = computed(() => {
+      return searchStore.searchTerm !== localSearchTerm.value
+    })
+    /**
+     * Search term has a getter and setter to be used as a v-model.
+     * To prevent sending unnecessary requests, we also keep track of whether
+     * the search term was changed.
+     */
+    const searchTerm = computed({
+      get: () => localSearchTerm.value,
+      set: (value: string) => {
+        localSearchTerm.value = value
+      },
+    })
+
+    /**
+     * Called when the 'search' button in the header is clicked.
+     * There are several scenarios:
+     * - search term hasn't changed:
+     *   - on a search route, do nothing.
+     *   - on other routes: set searchType to 'All content', reset the media,
+     *     change the path to `/search/` (All content).
+     * - search term changed:
+     *   - on a search route: Update the store searchTerm value, update query `q` param, reset media,
+     *     fetch new media.
+     *   - on other routes: Update the store searchTerm value, set searchType to 'All content', reset media,
+     *     update query `q` param.
+     * Updating the path causes the `search.vue` page's route watcher
+     * to run and fetch new media.
+     */
+    const handleSearch = async () => {
+      window.scrollTo({ top: 0, left: 0, behavior: 'auto' })
+      const mediaStore = useMediaStore()
+      const searchStore = useSearchStore()
+      const searchType = searchStore.searchType
+      if (!searchTermChanged.value || searchTerm.value === '') return
+      if (searchTermChanged.value) {
+        await mediaStore.clearMedia()
+
+        searchStore.setSearchTerm(searchTerm.value)
+        searchStore.setSearchType(searchType)
+      }
+
+      if (isSearchTypeSupported(searchType)) {
+        const newPath = app.localePath({
+          path: searchPath(searchType),
+          query: searchStore.searchQueryParams,
+        })
+        router.push(newPath)
+      }
+      deactivate()
+    }
+
+    const isRecentSearchesModalOpen = ref(false)
+
+    const activate = () => (searchBarIsActive.value = true)
+    const deactivate = () => {
+      searchBarIsActive.value = false
+    }
+
+    watch(searchBarIsActive, (active) => {
+      if (active) {
+        isRecentSearchesModalOpen.value = true
+        /**
+         * Without `nextTick`, the search bar is not focused on click in Firefox
+         */
+        nextTick(() => ensureFocus(searchInputRef.value))
+      } else {
+        isRecentSearchesModalOpen.value = false
+        if (localSearchTerm.value === '' && searchStore.searchTerm !== '') {
+          localSearchTerm.value = searchStore.searchTerm
+        }
+      }
+    })
+
+    const updateSearchText = (event: Event) => {
+      searchTerm.value = (event.target as HTMLInputElement).value
+    }
+
+    const clearSearchText = () => {
+      searchTerm.value = ''
+      ensureFocus(searchInputRef.value)
+    }
+
+    const handleBack = () => {
+      deactivate()
+    }
+
+    /**
+     * Refers to the current suggestion that has visual focus (not DOM focus)
+     * and is the active descendant. This should be set to `undefined` when the
+     * visual focus is on the input field.
+     */
+    const selectedIdx = ref<number | undefined>(undefined)
+    const entries = computed(() => searchStore.recentSearches)
+    const handleVerticalArrows = (event: KeyboardEvent) => {
+      event.preventDefault() // Prevent the cursor from moving horizontally.
+      const { key, altKey } = event
+      // Show the recent searches.
+      isRecentSearchesModalOpen.value = true
+      if (altKey) return
+      // Shift selection (if Alt was not pressed with arrow keys)
+      let defaultValue: number
+      let offset: number
+      if (key == keycodes.ArrowUp) {
+        defaultValue = 0
+        offset = -1
+      } else {
+        defaultValue = -1
+        offset = 1
+      }
+      selectedIdx.value = cyclicShift(
+        selectedIdx.value ?? defaultValue,
+        offset,
+        0,
+        entries.value.length
+      )
+    }
+    const handleOtherKeys = (event: KeyboardEvent) => {
+      const { key } = event
+      if (key === keycodes.Enter && selectedIdx.value)
+        // If a recent search is selected, populate its value into the input.
+        searchTerm.value = entries.value[selectedIdx.value]
+      if (([keycodes.Escape] as string[]).includes(key))
+        // Hide the recent searches.
+        isRecentSearchesModalOpen.value = false
+      selectedIdx.value = undefined // Lose visual focus from entries.
+    }
+    const handleKeydown = (event: KeyboardEvent) => {
+      const { key } = event
+      return ([keycodes.ArrowUp, keycodes.ArrowDown] as string[]).includes(key)
+        ? handleVerticalArrows(event)
+        : handleOtherKeys(event)
+    }
+    /* Populate the input with the clicked entry and execute the search. */
+    const handleSelect = (idx: number) => {
+      searchTerm.value = entries.value[idx]
+      isRecentSearchesModalOpen.value = false
+      selectedIdx.value = undefined // Lose visual focus from entries.
+      handleSearch() // Immediately execute the search manually.
+    }
+    /* Clear all recent searches from the store. */
+    const handleClear = () => {
+      searchStore.clearRecentSearches()
+      ensureFocus(searchInputRef.value)
+    }
+
+    const showRecentSearches = computed(
+      () => isRecentSearchesModalOpen.value && entries.value.length > 0
+    )
+
+    return {
+      closeIcon,
+      searchInputRef,
+
+      isHeaderScrolled,
+      isFetching,
+
+      isRecentSearchesModalOpen,
+      showRecentSearches,
+      searchBarIsActive,
+      activate,
+      deactivate,
+
+      searchStatus,
+      searchTerm,
+      clearSearchText,
+      updateSearchText,
+      handleSearch,
+
+      handleBack,
+      selectedIdx,
+      entries,
+      handleKeydown,
+      handleSelect,
+      handleClear,
+    }
+  },
+})
+</script>
+
+<style scoped></style>
diff --git a/src/components/VModal/VInputModal.vue b/src/components/VModal/VInputModal.vue
new file mode 100644
index 0000000000..2cf0d05828
--- /dev/null
+++ b/src/components/VModal/VInputModal.vue
@@ -0,0 +1,141 @@
+<template>
+  <div ref="nodeRef">
+    <div v-if="!isActive" class="flex w-full"><slot /></div>
+    <VTeleport v-else to="modal">
+      <!-- Prevent FocusTrap from trying to focus the first element.
+      We already do that in a more flexible, adaptive way in our Dialog composables. -->
+      <FocusTrap :initial-focus="() => false">
+        <div
+          class="fixed inset-0 z-40 flex min-h-screen w-full justify-center overflow-y-auto bg-white"
+        >
+          <div
+            ref="dialogRef"
+            v-bind="$attrs"
+            class="flex w-full flex-col py-4 px-4"
+            role="dialog"
+            aria-modal="true"
+            @keydown="onKeyDown"
+            @blur="onBlur"
+          >
+            <slot />
+          </div>
+        </div>
+      </FocusTrap>
+    </VTeleport>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, watch, toRef } from '@nuxtjs/composition-api'
+
+import { Portal as VTeleport } from 'portal-vue'
+
+import { FocusTrap } from 'focus-trap-vue'
+
+import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
+import { useDialogContent } from '~/composables/use-dialog-content'
+
+export default defineComponent({
+  name: 'VInputModal',
+  components: { VTeleport, FocusTrap },
+
+  /**
+   * NB: Most of these technically default to `undefined` so that the underlying `VPopoverContent`
+   * default for each of them can take over.
+   */
+  props: {
+    /**
+     * This props allows for the modal to be opened or closed programmatically.
+     * The modal handles the visibility internally if this prop is not provided.
+     *
+     * @default undefined
+     */
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    /**
+     * Fires when the popover opens, regardless of reason. There are no extra parameters.
+     */
+    'open',
+    /**
+     * Fires when the popover closes, regardless of reason. There are no extra parameters.
+     */
+    'close',
+  ],
+  setup(props, { emit }) {
+    const focusTrapRef =
+      /** @type {import('@nuxtjs/composition-api').Ref<InstanceType<typeof FocusTrap> | null>} */ (
+        ref(null)
+      )
+    const visibleRef = toRef(props, 'isActive')
+    const internalVisibleRef =
+      /** @type {import('@nuxtjs/composition-api').Ref<boolean>} */ (
+        ref(props.isActive === undefined ? false : visibleRef.value)
+      )
+    const nodeRef =
+      /** @type {import ('@nuxtjs/composition-api').Ref<HTMLElement | null>} */ (
+        ref(null)
+      )
+
+    /**
+     * When the `visible` prop is set to a different value than internalVisibleRef,
+     * we update the internalVisibleRef to match the prop.
+     */
+    watch(visibleRef, (visible) => {
+      if (visible === undefined || visible === internalVisibleRef.value) return
+
+      if (visible) {
+        open()
+      } else {
+        close()
+      }
+    })
+
+    const { lock, unlock } = useBodyScrollLock({ nodeRef })
+
+    const open = () => {
+      internalVisibleRef.value = true
+      lock()
+      if (props.isActive !== internalVisibleRef.value) {
+        emit('open')
+      }
+    }
+
+    const close = () => {
+      internalVisibleRef.value = false
+      unlock()
+      emit('close')
+    }
+
+    const dialogRef =
+      /** @type {import ('@nuxtjs/composition-api').Ref<HTMLElement | null>} */ (
+        ref(null)
+      )
+
+    const { onKeyDown, onBlur } = useDialogContent({
+      dialogRef,
+      visibleRef: toRef(props, 'isActive'),
+      autoFocusOnShowRef: ref(true),
+      autoFocusOnHideRef: ref(false),
+      triggerElementRef: ref(null),
+      hideOnClickOutsideRef: ref(false),
+      hideRef: ref(close),
+      hideOnEscRef: ref(true),
+      emit,
+    })
+
+    return {
+      focusTrapRef,
+      dialogRef,
+      nodeRef,
+      internalVisibleRef,
+
+      close,
+      onKeyDown,
+      onBlur,
+    }
+  },
+})
+</script>
diff --git a/src/components/VRecentSearches/VRecentSearches.vue b/src/components/VRecentSearches/VRecentSearches.vue
index ee9ad928ac..061e0e89d1 100644
--- a/src/components/VRecentSearches/VRecentSearches.vue
+++ b/src/components/VRecentSearches/VRecentSearches.vue
@@ -1,18 +1,21 @@
 <template>
   <div
-    class="flex flex-col gap-1 rounded-sm border border-dark-charcoal-20 bg-white p-4 shadow-el-2"
+    class="flex flex-col gap-1 rounded-sm border bg-white"
+    :class="bordered ? 'border-dark-charcoal-20 p-4 shadow-el-2' : 'border-tx'"
     data-testid="recent-searches"
   >
-    <div class="flex flex-row items-center justify-between py-2">
+    <div
+      class="flex flex-row items-center justify-between py-2"
+      :class="{ 'pe-2': !bordered }"
+    >
       <!-- Left margin to align with the text of recent searches. -->
       <span class="category mx-2 my-1">
         {{ $t('recent-searches.heading') }}
       </span>
       <VButton
         v-show="entries.length"
-        variant="plain"
-        size="small"
-        class="caption-bold hover:underline"
+        variant="text"
+        class="caption-bold"
         :aria-label="$t('recent-searches.clear.label').toString()"
         @click="handleClear"
       >
@@ -80,6 +83,13 @@ export default defineComponent({
     selectedIdx: {
       type: Number,
     },
+    /**
+     * the desktop popover is bordered, and the mobile element is not
+     */
+    bordered: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: {
     select: defineEvent<[number]>(),
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index f71974ef8c..8c618d304e 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -21,10 +21,10 @@
         isNewHeaderEnabled ? 'new-layout' : 'old-layout',
       ]"
     >
-      <div v-if="isNewHeaderEnabled">
-        <Nuxt class="main-page min-w-0" />
+      <template v-if="isNewHeaderEnabled">
+        <Nuxt class="main-page min-w-0 !px-6" />
         <VFooter class="border-t border-dark-charcoal-20" />
-      </div>
+      </template>
       <Nuxt v-else class="main-page min-w-0" />
 
       <VSidebarTarget

From 3351f22cfb747ef536a0fb68b747a0d53b1614e1 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 7 Oct 2022 07:15:55 +0300
Subject: [PATCH 3/8] Fix types

---
 src/components/VHeader/VHeaderInternal.vue    |  2 +-
 .../VHeader/VHeaderMobile/VHeaderMobile.vue   | 12 ++++--
 src/components/VModal/VInputModal.vue         | 41 +++++++++----------
 src/composables/use-body-scroll-lock.ts       | 29 +++++++++----
 tsconfig.json                                 |  1 +
 5 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/src/components/VHeader/VHeaderInternal.vue b/src/components/VHeader/VHeaderInternal.vue
index 411c75327d..639c0de8d3 100644
--- a/src/components/VHeader/VHeaderInternal.vue
+++ b/src/components/VHeader/VHeaderInternal.vue
@@ -93,7 +93,7 @@ export default defineComponent({
   name: 'VHeaderInternal',
   components: { VHomeLink, VIconButton, VLink, VModal, VPageLinks, WordPress },
   setup() {
-    const menuButtonRef = ref<InstanceType<typeof VIconButton>>(null)
+    const menuButtonRef = ref<InstanceType<typeof VIconButton> | null>(null)
 
     const { all: allPages, current: currentPage } = usePages(true)
     const route = useRoute()
diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 1d90abacd9..4d6f15356d 100644
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -230,7 +230,9 @@ export default defineComponent({
         /**
          * Without `nextTick`, the search bar is not focused on click in Firefox
          */
-        nextTick(() => ensureFocus(searchInputRef.value))
+        nextTick(() => {
+          if (searchInputRef.value) ensureFocus(searchInputRef.value)
+        })
       } else {
         isRecentSearchesModalOpen.value = false
         if (localSearchTerm.value === '' && searchStore.searchTerm !== '') {
@@ -245,7 +247,9 @@ export default defineComponent({
 
     const clearSearchText = () => {
       searchTerm.value = ''
-      ensureFocus(searchInputRef.value)
+      if (searchInputRef.value) {
+        ensureFocus(searchInputRef.value)
+      }
     }
 
     const handleBack = () => {
@@ -308,7 +312,9 @@ export default defineComponent({
     /* Clear all recent searches from the store. */
     const handleClear = () => {
       searchStore.clearRecentSearches()
-      ensureFocus(searchInputRef.value)
+      if (searchInputRef.value) {
+        ensureFocus(searchInputRef.value)
+      }
     }
 
     const showRecentSearches = computed(
diff --git a/src/components/VModal/VInputModal.vue b/src/components/VModal/VInputModal.vue
index 2cf0d05828..839b6bc2d0 100644
--- a/src/components/VModal/VInputModal.vue
+++ b/src/components/VModal/VInputModal.vue
@@ -2,8 +2,6 @@
   <div ref="nodeRef">
     <div v-if="!isActive" class="flex w-full"><slot /></div>
     <VTeleport v-else to="modal">
-      <!-- Prevent FocusTrap from trying to focus the first element.
-      We already do that in a more flexible, adaptive way in our Dialog composables. -->
       <FocusTrap :initial-focus="() => false">
         <div
           class="fixed inset-0 z-40 flex min-h-screen w-full justify-center overflow-y-auto bg-white"
@@ -24,16 +22,23 @@
     </VTeleport>
   </div>
 </template>
-<script>
-import { defineComponent, ref, watch, toRef } from '@nuxtjs/composition-api'
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  watch,
+  toRef,
+  ComponentInstance,
+} from '@nuxtjs/composition-api'
 
 import { Portal as VTeleport } from 'portal-vue'
-
 import { FocusTrap } from 'focus-trap-vue'
 
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 import { useDialogContent } from '~/composables/use-dialog-content'
 
+import type { SetupContext } from 'vue'
+
 export default defineComponent({
   name: 'VInputModal',
   components: { VTeleport, FocusTrap },
@@ -65,19 +70,14 @@ export default defineComponent({
     'close',
   ],
   setup(props, { emit }) {
-    const focusTrapRef =
-      /** @type {import('@nuxtjs/composition-api').Ref<InstanceType<typeof FocusTrap> | null>} */ (
-        ref(null)
-      )
+    const focusTrapRef = ref<ComponentInstance | null>(null)
+
     const visibleRef = toRef(props, 'isActive')
-    const internalVisibleRef =
-      /** @type {import('@nuxtjs/composition-api').Ref<boolean>} */ (
-        ref(props.isActive === undefined ? false : visibleRef.value)
-      )
-    const nodeRef =
-      /** @type {import ('@nuxtjs/composition-api').Ref<HTMLElement | null>} */ (
-        ref(null)
-      )
+    const internalVisibleRef = ref<boolean>(
+      props.isActive === undefined ? false : visibleRef.value
+    )
+
+    const nodeRef = ref<HTMLElement | null>(null)
 
     /**
      * When the `visible` prop is set to a different value than internalVisibleRef,
@@ -109,10 +109,7 @@ export default defineComponent({
       emit('close')
     }
 
-    const dialogRef =
-      /** @type {import ('@nuxtjs/composition-api').Ref<HTMLElement | null>} */ (
-        ref(null)
-      )
+    const dialogRef = ref<HTMLElement | null>(null)
 
     const { onKeyDown, onBlur } = useDialogContent({
       dialogRef,
@@ -123,7 +120,7 @@ export default defineComponent({
       hideOnClickOutsideRef: ref(false),
       hideRef: ref(close),
       hideOnEscRef: ref(true),
-      emit,
+      emit: emit as SetupContext['emit'],
     })
 
     return {
diff --git a/src/composables/use-body-scroll-lock.ts b/src/composables/use-body-scroll-lock.ts
index 75cb01c5ac..f0d26acd3a 100644
--- a/src/composables/use-body-scroll-lock.ts
+++ b/src/composables/use-body-scroll-lock.ts
@@ -1,19 +1,32 @@
-import { Ref, ref } from '@nuxtjs/composition-api'
+import { Ref, ref, watch } from '@nuxtjs/composition-api'
 
 import { getDocument } from '~/utils/reakit-utils/dom'
 
 /**
  * Creates a utility for locking body scrolling for a particular node.
  */
-export function useBodyScrollLock({ nodeRef }: { nodeRef: Ref<HTMLElement> }) {
-  const locked = ref(false)
+export function useBodyScrollLock({
+  nodeRef,
+  initialLocked = false,
+}: {
+  nodeRef: Ref<HTMLElement | null>
+  initialLocked?: boolean
+}) {
+  const locked = ref(initialLocked)
   let scrollY: number | null = null
 
+  watch(
+    nodeRef,
+    (node) => {
+      if (node && locked.value) lock()
+    },
+    {
+      immediate: true,
+    }
+  )
   const lock = () => {
     if (!nodeRef.value) {
-      throw new Error(
-        'useBodyScrollLock: Cannot lock body with undefined node reference'
-      )
+      return
     }
 
     locked.value = true
@@ -25,9 +38,7 @@ export function useBodyScrollLock({ nodeRef }: { nodeRef: Ref<HTMLElement> }) {
 
   const unlock = () => {
     if (!nodeRef.value) {
-      throw new Error(
-        'useBodyScrollLock: Cannot unlock body with undefined node reference'
-      )
+      return
     }
 
     locked.value = false
diff --git a/tsconfig.json b/tsconfig.json
index 7d4a7b040e..e1005c00a0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -84,6 +84,7 @@
     "src/components/VHeader/VPageLinks.vue",
     "src/components/VHeader/VSearchBar/**.vue",
     "src/components/VImageDetails/VRelatedImages.vue",
+    "src/components/VModal/VInputModal.vue",
     "src/pages/feedback.vue",
     "src/pages/search-help.vue",
     "src/composables/types.js",

From 391c3e1ab542042f69f81847690c3a933f902256 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Sat, 8 Oct 2022 07:15:33 +0300
Subject: [PATCH 4/8] Style updates Replace internal border with an external
 ring on searchbar Show the Clear button only if there is a search term Darken
 the input text on hover

---
 .../VHeader/VHeaderMobile/VHeaderMobile.vue   | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 4d6f15356d..cc198f49bb 100644
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -11,11 +11,11 @@
     >
       <div class="flex w-full" :class="isRecentSearchesModalOpen ? 'px-2' : ''">
         <form
-          class="search-bar group flex h-12 w-full flex-row items-center overflow-hidden rounded-sm border border-1.5"
+          class="search-bar group flex h-12 w-full flex-row items-center overflow-hidden rounded-sm"
           :class="
             searchBarIsActive
-              ? 'border-pink bg-white'
-              : 'border-tx bg-dark-charcoal-06'
+              ? 'bg-white ring ring-pink'
+              : 'bg-dark-charcoal-06'
           "
           @submit.prevent="handleSearch"
         >
@@ -35,7 +35,7 @@
             name="q"
             :placeholder="$t('hero.search.placeholder').toString()"
             type="search"
-            class="search-field h-full w-full flex-grow appearance-none rounded-none border-tx bg-tx text-2xl text-dark-charcoal-70 placeholder-dark-charcoal-70 ms-1 focus-visible:outline-none"
+            class="search-field h-full w-full flex-grow appearance-none rounded-none border-tx bg-tx text-2xl text-dark-charcoal-70 placeholder-dark-charcoal-70 ms-1 hover:text-dark-charcoal hover:placeholder-dark-charcoal focus-visible:outline-none"
             :value="searchTerm"
             :aria-label="
               $t('search.search-bar-label', {
@@ -56,19 +56,17 @@
           />
           <slot>
             <VClearButton
-              v-if="searchBarIsActive"
+              v-show="searchBarIsActive && searchTerm"
               class="me-2"
               @click="clearSearchText"
             />
-            <template v-else>
-              <span
-                v-show="searchStatus"
-                class="info mx-4 hidden whitespace-nowrap text-xs group-hover:text-dark-charcoal group-focus:text-dark-charcoal md:flex"
-              >
-                {{ searchStatus }}
-              </span>
-              <VContentSettingsModal />
-            </template>
+            <span
+              v-show="!searchBarIsActive && searchStatus"
+              class="info mx-4 hidden whitespace-nowrap text-xs group-hover:text-dark-charcoal group-focus:text-dark-charcoal md:flex"
+            >
+              {{ searchStatus }}
+            </span>
+            <VContentSettingsModal v-show="!searchBarIsActive" />
           </slot>
         </form>
       </div>

From edc03c6fec14d03bd844736cc94589f7c805ce49 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Sat, 8 Oct 2022 18:49:38 +0300
Subject: [PATCH 5/8] Use VSearchBarButton for back and clear buttons

---
 src/components/VButton.vue                    |  2 +-
 .../VHeader/VHeaderMobile/VBackButton.vue     | 40 --------------
 .../VHeaderMobile/VContentSettingsButton.vue  | 51 ++++++++----------
 .../VHeaderMobile/VContentSettingsModal.vue   |  6 ++-
 .../VHeader/VHeaderMobile/VHeaderMobile.vue   | 29 +++++++----
 .../VHeaderMobile/VSearchBarButton.vue        | 52 +++++++++++++++++++
 .../VHeader/VSearchBar/VClearButton.vue       | 25 ---------
 7 files changed, 98 insertions(+), 107 deletions(-)
 delete mode 100644 src/components/VHeader/VHeaderMobile/VBackButton.vue
 create mode 100644 src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
 delete mode 100644 src/components/VHeader/VSearchBar/VClearButton.vue

diff --git a/src/components/VButton.vue b/src/components/VButton.vue
index 0068dc857c..07bc640a60 100644
--- a/src/components/VButton.vue
+++ b/src/components/VButton.vue
@@ -2,7 +2,7 @@
   <Component
     :is="as"
     :type="typeRef"
-    class="flex appearance-none items-center justify-center rounded-sm no-underline ring-offset-1 transition-shadow duration-100 ease-linear focus:outline-none"
+    class="group flex appearance-none items-center justify-center rounded-sm no-underline ring-offset-1 transition-shadow duration-100 ease-linear focus:outline-none"
     :class="[
       $style.button,
       $style[variant],
diff --git a/src/components/VHeader/VHeaderMobile/VBackButton.vue b/src/components/VHeader/VHeaderMobile/VBackButton.vue
deleted file mode 100644
index 157523c2da..0000000000
--- a/src/components/VHeader/VHeaderMobile/VBackButton.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <VButton
-    size="disabled"
-    class="icon-button flex h-12 w-12 flex-shrink-0 rotate-90 items-center justify-center bg-tx active:shadow-ring"
-    variant="plain--avoid"
-    :aria-label="$t('header.back-button')"
-    @click="$emit('click')"
-  >
-    <span
-      class="flex h-8 w-8 items-center justify-center rounded-sm bg-dark-charcoal-10"
-    >
-      <VIcon
-        class="bg-red pointer-events-none rounded-sm bg-dark-charcoal-10"
-        :icon-path="caretDownIcon"
-      />
-    </span>
-  </VButton>
-</template>
-
-<script lang="ts">
-import { defineEvent } from '~/types/emits'
-
-import VButton from '~/components/VButton.vue'
-import VIcon from '~/components/VIcon/VIcon.vue'
-
-import caretDownIcon from '~/assets/icons/caret-down.svg'
-
-export default {
-  name: 'VBackButton',
-  components: { VButton, VIcon },
-  emits: {
-    click: defineEvent(),
-  },
-  setup() {
-    return {
-      caretDownIcon,
-    }
-  },
-}
-</script>
diff --git a/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue b/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
index 501453c422..c086bd4e03 100644
--- a/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
+++ b/src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue
@@ -1,36 +1,32 @@
 <template>
-  <span class="relative inline-block h-8 w-8">
-    <VIconButton
-      size="new-small"
-      :icon-props="{ iconPath: sourceIcon }"
-      :button-props="{ variant: 'menu' }"
-      :aria-label="
-        areFiltersSelected
-          ? $t('header.aria.menu-notification')
-          : $t('header.aria.menu')
-      "
-      aria-haspopup="dialog"
-      :aria-expanded="isPressed"
-      aria-controls="content-settings-modal"
-      @click="$emit('click')"
-    />
-    <span
-      v-if="areFiltersSelected"
-      class="absolute top-[-2px] right-[-2px] h-[8px] w-[8px] rounded bg-pink"
-    />
-  </span>
+  <VSearchBarButton
+    :icon-path="sourceIcon"
+    :aria-label="
+      areFiltersSelected
+        ? $t('header.aria.menu-notification')
+        : $t('header.aria.menu')
+    "
+    aria-haspopup="dialog"
+    :aria-expanded="isPressed"
+    aria-controls="content-settings-modal"
+    inner-area-classes="bg-white hover:bg-dark-charcoal hover:text-white"
+  >
+    <template #notification>
+      <span
+        v-if="areFiltersSelected"
+        class="absolute top-[-2px] right-[-2px] h-[8px] w-[8px] rounded bg-pink"
+      />
+    </template>
+  </VSearchBarButton>
 </template>
-
 <script lang="ts">
-import { defineEvent } from '~/types/emits'
-
-import VIconButton from '~/components/VIconButton/VIconButton.vue'
+import VSearchBarButton from '~/components/VHeader/VHeaderMobile/VSearchBarButton.vue'
 
 import sourceIcon from '~/assets/icons/source.svg'
 
 export default {
   name: 'VContentSettingsButton',
-  components: { VIconButton },
+  components: { VSearchBarButton },
   props: {
     isPressed: {
       type: Boolean,
@@ -41,12 +37,9 @@ export default {
       default: false,
     },
   },
-  emits: {
-    click: defineEvent(),
-  },
   setup() {
     return {
-      sourceIcon,
+      sourceIcon: sourceIcon as unknown as string,
     }
   },
 }
diff --git a/src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue b/src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue
index a44372b9eb..9032484ae9 100644
--- a/src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue
+++ b/src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue
@@ -9,8 +9,8 @@
     <template #trigger="{ visible, a11Props }">
       <VContentSettingsButton
         :is-pressed="visible"
+        :are-filters-selected="areFiltersSelected"
         v-bind="a11Props"
-        class="me-2"
       />
     </template>
     <VTabs
@@ -111,6 +111,9 @@ export default defineComponent({
     const changeSelectedTab = (tab: 'content-settings' | 'filters') => {
       selectedTab.value = tab
     }
+
+    const areFiltersSelected = computed(() => searchStore.isAnyFilterApplied)
+
     const showClearFiltersButton = computed(
       () => selectedTab.value === 'filters'
     )
@@ -141,6 +144,7 @@ export default defineComponent({
       selectedTab,
       changeSelectedTab,
 
+      areFiltersSelected,
       showClearFiltersButton,
       isClearButtonDisabled,
       clearFiltersLabel,
diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index cc198f49bb..831638ead1 100644
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -21,12 +21,19 @@
         >
           <slot name="start">
             <VLogoButton
-              v-if="!searchBarIsActive"
+              v-show="!searchBarIsActive"
               :is-fetching="isFetching"
               :is-search-route="true"
               class="w-12"
             />
-            <VBackButton v-else @click="handleBack" />
+            <VSearchBarButton
+              v-show="searchBarIsActive"
+              :icon-path="chevronLeftIcon"
+              :inner-size="8"
+              :aria-label="$t('header.back-button')"
+              :rtl-flip="true"
+              @click="handleBack"
+            />
           </slot>
 
           <input
@@ -55,9 +62,11 @@
             @keydown="handleKeydown"
           />
           <slot>
-            <VClearButton
+            <VSearchBarButton
               v-show="searchBarIsActive && searchTerm"
-              class="me-2"
+              :icon-path="closeIcon"
+              :aria-label="$t('browse-page.search-form.clear')"
+              inner-area-classes="bg-white"
               @click="clearSearchText"
             />
             <span
@@ -110,14 +119,14 @@ import { useI18nResultsCount } from '~/composables/use-i18n-utilities'
 import { useMediaStore } from '~/stores/media'
 import { isSearchTypeSupported, useSearchStore } from '~/stores/search'
 
-import VBackButton from '~/components/VHeader/VHeaderMobile/VBackButton.vue'
-import VClearButton from '~/components/VHeader/VSearchBar/VClearButton.vue'
 import VLogoButton from '~/components/VHeader/VLogoButton.vue'
 import VInputModal from '~/components/VModal/VInputModal.vue'
 import VContentSettingsModal from '~/components/VHeader/VHeaderMobile/VContentSettingsModal.vue'
 import VRecentSearches from '~/components/VRecentSearches/VRecentSearches.vue'
+import VSearchBarButton from '~/components/VHeader/VHeaderMobile/VSearchBarButton.vue'
 
 import closeIcon from '~/assets/icons/close-small.svg'
+import chevronLeftIcon from '~/assets/icons/chevron-left.svg'
 
 /**
  * Displays a text field for a search query and is attached to an action button
@@ -128,11 +137,10 @@ export default defineComponent({
   name: 'VHeaderMobile',
   components: {
     VContentSettingsModal,
-    VBackButton,
-    VClearButton,
     VInputModal,
     VLogoButton,
     VRecentSearches,
+    VSearchBarButton,
   },
   setup() {
     const searchInputRef = ref<HTMLInputElement | null>(null)
@@ -320,7 +328,8 @@ export default defineComponent({
     )
 
     return {
-      closeIcon,
+      chevronLeftIcon: chevronLeftIcon as unknown as string,
+      closeIcon: closeIcon as unknown as string,
       searchInputRef,
 
       isHeaderScrolled,
@@ -348,5 +357,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style scoped></style>
diff --git a/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue b/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
new file mode 100644
index 0000000000..2c87cb16e8
--- /dev/null
+++ b/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
@@ -0,0 +1,52 @@
+<template>
+  <VIconButton
+    size="search-medium"
+    class="border-tx bg-tx"
+    :button-props="{ variant: 'plain--avoid' }"
+    v-on="$listeners"
+  >
+    <template #default="{ iconSize }">
+      <span
+        class="relative flex flex-shrink-0 flex-grow-0 items-center justify-center rounded-sm group-focus-visible:ring group-focus-visible:ring-pink group-active:ring group-active:ring-pink"
+        :class="[`h-${innerSize} w-${innerSize}`, innerAreaClasses]"
+      >
+        <VIcon
+          :icon-path="iconPath"
+          :rtl-flip="rtlFlip"
+          class="pointer-events-none"
+          :size="iconSize"
+        />
+        <slot name="notification" />
+      </span>
+    </template>
+  </VIconButton>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from '@nuxtjs/composition-api'
+
+import VIcon from '~/components/VIcon/VIcon.vue'
+import VIconButton from '~/components/VIconButton/VIconButton.vue'
+
+export default defineComponent({
+  name: 'VSearchBarButton',
+  components: { VIcon, VIconButton },
+  props: {
+    iconPath: {
+      type: String,
+      required: true,
+    },
+    innerSize: {
+      type: Number as PropType<6 | 8>,
+      default: 8,
+    },
+    innerAreaClasses: {
+      type: String,
+      default: 'bg-dark-charcoal-10',
+    },
+    rtlFlip: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>
diff --git a/src/components/VHeader/VSearchBar/VClearButton.vue b/src/components/VHeader/VSearchBar/VClearButton.vue
deleted file mode 100644
index 6ddfa75ff1..0000000000
--- a/src/components/VHeader/VSearchBar/VClearButton.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <VIconButton
-    :button-props="{ variant: 'plain' }"
-    :icon-props="{ iconPath: closeIcon }"
-    size="smaller"
-    class="border-tx text-dark-charcoal-70"
-    :aria-label="$t('browse-page.search-form.clear')"
-    @click="$emit('click')"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
-
-import closeIcon from '~/assets/icons/close-small.svg'
-
-export default defineComponent({
-  name: 'VClearButton',
-  setup() {
-    return {
-      closeIcon,
-    }
-  },
-})
-</script>

From dfe09068d2dd2f0887310088b3a2267f1871ab15 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Sun, 9 Oct 2022 07:19:49 +0300
Subject: [PATCH 6/8] Add hover styles to the buttons

---
 src/components/VHeader/VHeaderMobile/VHeaderMobile.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 831638ead1..0226befbe1 100644
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -32,6 +32,7 @@
               :inner-size="8"
               :aria-label="$t('header.back-button')"
               :rtl-flip="true"
+              inner-area-classes="hover:bg-dark-charcoal hover:text-white"
               @click="handleBack"
             />
           </slot>
@@ -66,7 +67,7 @@
               v-show="searchBarIsActive && searchTerm"
               :icon-path="closeIcon"
               :aria-label="$t('browse-page.search-form.clear')"
-              inner-area-classes="bg-white"
+              inner-area-classes="bg-white hover:bg-dark-charcoal-10"
               @click="clearSearchText"
             />
             <span

From 255d56d3073b002707e7d5ed2adc4bc6d96857cb Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Sun, 9 Oct 2022 08:40:58 +0300
Subject: [PATCH 7/8] Remove defaults for inner-area-classes

---
 src/components/VHeader/VHeaderMobile/VHeaderMobile.vue    | 2 +-
 src/components/VHeader/VHeaderMobile/VSearchBarButton.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 0226befbe1..0a42c79f1f 100644
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -32,7 +32,7 @@
               :inner-size="8"
               :aria-label="$t('header.back-button')"
               :rtl-flip="true"
-              inner-area-classes="hover:bg-dark-charcoal hover:text-white"
+              inner-area-classes="bg-dark-charcoal-10 hover:bg-dark-charcoal hover:text-white"
               @click="handleBack"
             />
           </slot>
diff --git a/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue b/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
index 2c87cb16e8..ab52170ae8 100644
--- a/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
+++ b/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
@@ -41,7 +41,7 @@ export default defineComponent({
     },
     innerAreaClasses: {
       type: String,
-      default: 'bg-dark-charcoal-10',
+      default: '',
     },
     rtlFlip: {
       type: Boolean,

From 5f431abd15fdeea6f738a3110b9d37fd8273f8a0 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Sun, 9 Oct 2022 08:50:22 +0300
Subject: [PATCH 8/8] Add the `isFetching` prop to VContentSettingsModal

---
 src/components/VHeader/VHeaderMobile/VHeaderMobile.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 0a42c79f1f..f70b569e15 100644
--- a/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -76,7 +76,10 @@
             >
               {{ searchStatus }}
             </span>
-            <VContentSettingsModal v-show="!searchBarIsActive" />
+            <VContentSettingsModal
+              v-show="!searchBarIsActive"
+              :is-fetching="isFetching"
+            />
           </slot>
         </form>
       </div>