Improve search filter & modal accessibility

package.json

@@ -64,6 +64,7 @@
     "lodash.debounce": "^4.0.8",
     "marked": "^12.0.2",
     "path-browserify": "^1.0.1",
+    "portal-vue": "^2.1.7",
     "process": "^0.11.10",
     "swiper": "^11.1.1",
     "video.js": "7.21.5",

src/renderer/App.js

@@ -11,6 +11,7 @@ import FtToast from './components/ft-toast/ft-toast.vue'
 import FtProgressBar from './components/ft-progress-bar/ft-progress-bar.vue'
 import FtPlaylistAddVideoPrompt from './components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue'
 import FtCreatePlaylistPrompt from './components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue'
+import FtSearchFilters from './components/ft-search-filters/ft-search-filters.vue'
 import { marked } from 'marked'
 import { IpcChannels } from '../constants'
 import packageDetails from '../../package.json'
@@ -34,6 +35,7 @@ export default defineComponent({
     FtProgressBar,
     FtPlaylistAddVideoPrompt,
     FtCreatePlaylistPrompt,
+    FtSearchFilters
   },
   data: function () {
     return {
@@ -46,6 +48,7 @@ export default defineComponent({
       latestBlogUrl: '',
       updateChangelog: '',
       changeLogTitle: '',
+      isPromptOpen: false,
       lastExternalLinkToBeOpened: '',
       showExternalLinkOpeningPrompt: false,
       externalLinkOpeningPromptValues: [
@@ -77,6 +80,9 @@ export default defineComponent({
     showCreatePlaylistPrompt: function () {
       return this.$store.getters.getShowCreatePlaylistPrompt
     },
+    showSearchFilters: function () {
+      return this.$store.getters.getShowSearchFilters
+    },
     windowTitle: function () {
       const routePath = this.$route.path
       if (!routePath.startsWith('/channel/') && !routePath.startsWith('/watch/') && !routePath.startsWith('/hashtag/')) {
@@ -143,12 +149,6 @@ export default defineComponent({
     secColor: 'checkThemeSettings',
 
     locale: 'setLocale',
-
-    $route () {
-      // react to route changes...
-      // Hide top nav filter panel on page change
-      this.$refs.topNav?.hideFilters()
-    }
   },
   created () {
     this.checkThemeSettings()
@@ -295,6 +295,10 @@ export default defineComponent({
       this.showBlogBanner = false
     },
 
+    handlePromptPortalUpdate: function(newVal) {
+      this.isPromptOpen = newVal
+    },
+
     openDownloadsPage: function () {
       const url = 'https://freetubeapp.io#download'
       openExternalLink(url)
@@ -544,7 +548,7 @@ export default defineComponent({
       'updateMainColor',
       'updateSecColor',
       'showOutlines',
-      'hideOutlines'
+      'hideOutlines',
     ])
   }
 })

src/renderer/App.vue

@@ -8,45 +8,10 @@
       isLocaleRightToLeft: isLocaleRightToLeft
     }"
   >
-    <top-nav ref="topNav" />
-    <side-nav ref="sideNav" />
-    <ft-flex-box
-      class="flexBox routerView"
-      role="main"
-    >
-      <div
-        v-if="showUpdatesBanner || showBlogBanner"
-        class="banner-wrapper"
-      >
-        <ft-notification-banner
-          v-if="showUpdatesBanner"
-          class="banner"
-          :message="updateBannerMessage"
-          role="link"
-          @click="handleUpdateBannerClick"
-        />
-        <ft-notification-banner
-          v-if="showBlogBanner"
-          class="banner"
-          :message="blogBannerMessage"
-          role="link"
-          @click="handleNewBlogBannerClick"
-        />
-      </div>
-      <transition
-        v-if="dataReady"
-        mode="out-in"
-        name="fade"
-      >
-        <!-- <keep-alive> -->
-        <RouterView
-          ref="router"
-          class="routerView"
-        />
-      <!-- </keep-alive> -->
-      </transition>
-    </ft-flex-box>
-
+    <portal-target
+      name="promptPortal"
+      @change="handlePromptPortalUpdate"
+    />
     <ft-prompt
       v-if="showReleaseNotes"
       :label="changeLogTitle"
@@ -75,6 +40,9 @@
       :option-values="externalLinkOpeningPromptValues"
       @click="handleExternalLinkOpeningPromptAnswer"
     />
+    <ft-search-filters
+      v-if="showSearchFilters"
+    />
     <ft-playlist-add-video-prompt
       v-if="showAddToPlaylistPrompt"
     />
@@ -85,6 +53,51 @@
     <ft-progress-bar
       v-if="showProgressBar"
     />
+    <top-nav
+      ref="topNav"
+      :inert="isPromptOpen"
+    />
+    <side-nav
+      ref="sideNav"
+      :inert="isPromptOpen"
+    />
+    <ft-flex-box
+      class="flexBox routerView"
+      role="main"
+      :inert="isPromptOpen"
+    >
+      <div
+        v-if="showUpdatesBanner || showBlogBanner"
+        class="banner-wrapper"
+      >
+        <ft-notification-banner
+          v-if="showUpdatesBanner"
+          class="banner"
+          :message="updateBannerMessage"
+          role="link"
+          @click="handleUpdateBannerClick"
+        />
+        <ft-notification-banner
+          v-if="showBlogBanner"
+          class="banner"
+          :message="blogBannerMessage"
+          role="link"
+          @click="handleNewBlogBannerClick"
+        />
+      </div>
+      <transition
+        v-if="dataReady"
+        mode="out-in"
+        name="fade"
+      >
+        <!-- <keep-alive> -->
+        <RouterView
+          ref="router"
+          class="routerView"
+        />
+        <!-- </keep-alive> -->
+      </transition>
+    </ft-flex-box>
   </div>
 </template>
 

src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
@@ -24,6 +24,9 @@ export default defineComponent({
     }
   },
   computed: {
+    title: function () {
+      return this.$t('User Playlists.CreatePlaylistPrompt.New Playlist Name')
+    },
     allPlaylists: function () {
       return this.$store.getters.getAllPlaylists
     },
@@ -34,7 +37,7 @@ export default defineComponent({
   mounted: function () {
     this.playlistName = this.newPlaylistVideoObject.title
     // Faster to input required playlist name
-    this.$refs.playlistNameInput.focus()
+    nextTick(() => this.$refs.playlistNameInput.focus())
   },
   methods: {
     createNewPlaylist: function () {

src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue

@@ -1,9 +1,10 @@
 <template>
   <ft-prompt
+    :label="title"
     @click="hideCreatePlaylistPrompt"
   >
     <h2 class="center">
-      {{ $t('User Playlists.CreatePlaylistPrompt.New Playlist Name') }}
+      {{ title }}
     </h2>
     <ft-flex-box>
       <ft-input

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css

@@ -6,16 +6,6 @@
   text-align: center;
 }
 
-/* Style for `ft-prompt` */
-:deep(.promptCard) {
-  /* Currently only this prompt has enough content to make prompt too high */
-  max-block-size: 95%;
-
-  /* Some child(s) will grow vertically */
-  display: flex;
-  flex-direction: column;
-}
-
 .searchInputsRow {
   display: grid;
 

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 import debounce from 'lodash.debounce'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
@@ -44,11 +44,16 @@ export default defineComponent({
       doSearchPlaylistsWithMatchingVideos: false,
       updateQueryDebounce: function() {},
       lastShownAt: Date.now(),
-      lastActiveElement: null,
       sortBy: SORT_BY_VALUES.LatestUpdatedFirst,
     }
   },
   computed: {
+    title: function () {
+      return this.$tc('User Playlists.AddVideoPrompt.Select a playlist to add your N videos to', this.toBeAddedToPlaylistVideoCount, {
+        videoCount: this.toBeAddedToPlaylistVideoCount,
+      })
+    },
+
     showingCreatePlaylistPrompt: function () {
       return this.$store.getters.getShowCreatePlaylistPrompt
     },
@@ -185,7 +190,7 @@ export default defineComponent({
       if (val > oldVal) {
         // Focus back to search input only when playlist added
         // Allow search and easier deselecting new created playlist
-        this.$refs.searchBar.focus()
+        nextTick(() => this.$refs.searchBar.focus())
       }
     },
 
@@ -195,19 +200,17 @@ export default defineComponent({
       // Only care when CreatePlaylistPrompt hidden
       // Shift focus from button to prevent unwanted click event
       // due to enter key press in CreatePlaylistPrompt
-      this.$refs.searchBar.focus()
+      nextTick(() => this.$refs.searchBar.focus())
     },
   },
   mounted: function () {
-    this.lastActiveElement = document.activeElement
     this.updateQueryDebounce = debounce(this.updateQuery, 500)
-    // User might want to search first if they have many playlists
-    this.$refs.searchBar.focus()
     document.addEventListener('keydown', this.keyboardShortcutHandler)
+    // User might want to search first if they have many playlists
+    nextTick(() => this.$refs.searchBar.focus())
   },
   beforeDestroy() {
     document.removeEventListener('keydown', this.keyboardShortcutHandler)
-    this.lastActiveElement?.focus()
   },
   methods: {
     hide: function () {

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue

@@ -1,11 +1,11 @@
 <template>
   <ft-prompt
+    theme="flex-column"
+    :label="title"
     @click="hide"
   >
     <h2 class="heading">
-      {{ $tc('User Playlists.AddVideoPrompt.Select a playlist to add your N videos to', toBeAddedToPlaylistVideoCount, {
-        videoCount: toBeAddedToPlaylistVideoCount,
-      }) }}
+      {{ title }}
     </h2>
     <p class="selected-count">
       {{ $tc('User Playlists.AddVideoPrompt.N playlists selected', selectedPlaylistCount, {

src/renderer/components/ft-prompt/ft-prompt.css

@@ -7,7 +7,7 @@
   background-color: rgb(0 0 0 / 70%);
 
   /* Higher than components like playlist info */
-  z-index: 200;
+  z-index: 201;
   padding: 15px;
   box-sizing: border-box;
   display: flex;
@@ -17,6 +17,7 @@
 
 .promptCard {
   overflow-y: scroll;
+  max-block-size: 95%;
 }
 
 .promptCard.autosize {
@@ -34,6 +35,31 @@
   box-sizing: border-box;
 }
 
+.promptCard.flex-column {
+    /* Some child(ren) will grow vertically */
+    display: flex;
+    flex-direction: column;
+}
+
+.promptCard.slim {
+  max-inline-size: 70%;
+  inset-inline-start: 15%;
+  padding-block: 10px;
+}
+
 .center {
   text-align: center;
 }
+
+@media only screen and (width <= 680px) {
+  .promptCard.slim {
+    padding-block: 5px;
+  }
+}
+
+@media only screen and (width <= 500px) {
+  .promptCard.slim {
+    max-inline-size: 80%;
+    inset-inline-start: 10%;
+  }
+}