Improve search filter & modal accessibility #3975

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

FreeTubeBot merged 17 commits into FreeTubeApp:development from kommunarr:fix-filter-accessibility

May 1, 2024

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -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",
@@ Expand Down @@

src/renderer/App.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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'
@@ Expand All / @@ -34,6 +35,7 @@ export default defineComponent({ @@
         FtProgressBar,
         FtPlaylistAddVideoPrompt,
         FtCreatePlaylistPrompt,
+        FtSearchFilters
       },
       data: function () {
         return {
@@ Expand All / @@ -46,6 +48,7 @@ export default defineComponent({ @@
           latestBlogUrl: '',
           updateChangelog: '',
           changeLogTitle: '',
+          isPromptOpen: false,
           lastExternalLinkToBeOpened: '',
           showExternalLinkOpeningPrompt: false,
           externalLinkOpeningPromptValues: [
@@ Expand Down Expand Up / @@ -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/')) {
@@ Expand Down Expand Up / @@ -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()
@@ Expand Down Expand Up / @@ -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)
@@ Expand Down Expand Up / @@ -544,7 +548,7 @@ export default defineComponent({ @@
           'updateMainColor',
           'updateSecColor',
           'showOutlines',
-          'hideOutlines'
+          'hideOutlines',
         ])
       }
     })

src/renderer/App.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -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"
@@ Expand Down Expand Up / @@ -75,6 +40,9 @@ @@
           :option-values="externalLinkOpeningPromptValues"
           @click="handleExternalLinkOpeningPromptAnswer"
         />
+        <ft-search-filters
+          v-if="showSearchFilters"
+        />
         <ft-playlist-add-video-prompt
           v-if="showAddToPlaylistPrompt"
         />
@@ Expand All / @@ -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>
@@ Expand Down @@

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

-Original file line number
+Diff line change
@@ -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
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
@@ Expand Down @@

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

-Original file line number
+Diff line change
@@ -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, {
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
@@ Expand All / @@ -17,6 +17,7 @@ @@
     .promptCard {
       overflow-y: scroll;
+      max-block-size: 95%;
     }
     .promptCard.autosize {
@@ Expand All / @@ -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%;
+      }
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve search filter & modal accessibility #3975

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!