DropDown for Year in Review (#3717)

* Accessibility updates * Show "Share" button on large screen sizes --------- Co-authored-by: advplyr <advplyr@protonmail.com>
2024-12-20 19:06:06 +01:00 · 2024-12-16 23:44:06 +01:00 · 2024-12-16 23:44:06 +01:00 · 858d697d0f
commit 858d697d0f
parent 6cef1e3f12
4 changed files with 64 additions and 23 deletions
--- a/client/components/stats/YearInReview.vue
+++ b/client/components/stats/YearInReview.vue
@ -1,9 +1,9 @@
 <template>
  <div>
-    <div v-if="processing" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
+    <div v-if="processing" role="img" :aria-label="$strings.MessageLoading" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
      <widgets-loading-spinner />
    </div>
-    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" />
+    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" :aria-label="$getString('LabelPersonalYearReview', [variant + 1])" />
  </div>
 </template>

--- a/client/components/stats/YearInReviewBanner.vue
+++ b/client/components/stats/YearInReviewBanner.vue
@ -7,7 +7,7 @@
    </div>

    <div class="flex items-center">
-      <p class="hidden md:block text-xl font-semibold">{{ $getString('HeaderYearReview', [yearInReviewYear]) }}</p>
+      <h1 class="hidden md:block text-xl font-semibold">{{ $getString('HeaderYearReview', [yearInReviewYear]) }}</h1>
      <div class="hidden md:block flex-grow" />
      <ui-btn class="w-full md:w-auto" @click.stop="clickShowYearInReview">{{ showYearInReview ? $strings.LabelYearReviewHide : $strings.LabelYearReviewShow }}</ui-btn>
    </div>
@ -16,17 +16,22 @@
    <div v-if="showYearInReview">
      <div class="w-full h-px bg-slate-200/10 my-4" />

-      <div class="flex items-center justify-center mb-2 max-w-[800px] mx-auto">
+      <div v-if="availableYears.length > 1" class="mb-2 py-2 max-w-[800px] mx-auto">
+        <!-- year selector -->
+        <ui-dropdown v-model="yearInReviewYear" small :items="availableYears" :disabled="processingYearInReview" class="max-w-24" @input="yearInReviewYearChanged" />
+      </div>
+
+      <div role="toolbar" class="flex items-center justify-center mb-2 max-w-[800px] mx-auto">
        <!-- previous button -->
-        <ui-btn small :disabled="!yearInReviewVariant || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant--">
+        <ui-btn small :disabled="!yearInReviewVariant || processingYearInReview" :aria-label="$strings.ButtonPrevious" class="inline-flex items-center font-semibold" @click="yearInReviewVariant--">
          <span class="material-symbols text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
          <span class="hidden sm:inline-block pr-2">{{ $strings.ButtonPrevious }}</span>
        </ui-btn>
        <!-- share button -->
-        <ui-btn v-if="showShareButton" small :disabled="processingYearInReview" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReview">{{ $strings.ButtonShare }} </ui-btn>
+        <ui-btn v-if="showShareButton" small :disabled="processingYearInReview" class="inline-flex items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReview">{{ $strings.ButtonShare }} </ui-btn>

        <div class="flex-grow" />
-        <p class="hidden sm:block text-lg font-semibold">{{ $getString('LabelPersonalYearReview', [yearInReviewVariant + 1]) }}</p>
+        <h2 class="hidden sm:block text-lg font-semibold">{{ $getString('LabelPersonalYearReview', [yearInReviewVariant + 1]) }}</h2>
        <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewVariant + 1 }}</p>
        <div class="flex-grow" />

@ -36,7 +41,7 @@
          <span class="material-symbols sm:!hidden text-lg py-px">refresh</span>
        </ui-btn>
        <!-- next button -->
-        <ui-btn small :disabled="yearInReviewVariant >= 2 || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant++">
+        <ui-btn small :disabled="yearInReviewVariant >= 2 || processingYearInReview" :aria-label="$strings.ButtonNext" class="inline-flex items-center font-semibold" @click="yearInReviewVariant++">
          <span class="hidden sm:inline-block pl-2">{{ $strings.ButtonNext }}</span>
          <span class="material-symbols text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
        </ui-btn>
@ -46,23 +51,23 @@
      <!-- your year in review short -->
      <div class="w-full max-w-[800px] mx-auto my-4">
        <!-- share button -->
-        <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewShort" class="inline-flex sm:hidden items-center font-semibold mb-1" @click="shareYearInReviewShort">{{ $strings.ButtonShare }}</ui-btn>
+        <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewShort" class="inline-flex items-center font-semibold mb-1" @click="shareYearInReviewShort">{{ $strings.ButtonShare }}</ui-btn>
        <stats-year-in-review-short ref="yearInReviewShort" :year="yearInReviewYear" :processing.sync="processingYearInReviewShort" />
      </div>

      <!-- your server in review -->
-      <div v-if="isAdminOrUp" class="w-full max-w-[800px] mx-auto mb-2 mt-4 border-t pt-4 border-white/10">
+      <div v-if="isAdminOrUp" role="toolbar" class="w-full max-w-[800px] mx-auto mb-2 mt-4 border-t pt-4 border-white/10">
        <div class="flex items-center justify-center mb-2">
          <!-- previous button -->
-          <ui-btn small :disabled="!yearInReviewServerVariant || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant--">
+          <ui-btn small :disabled="!yearInReviewServerVariant || processingYearInReviewServer" :aria-label="$strings.ButtonPrevious" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant--">
            <span class="material-symbols text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
            <span class="hidden sm:inline-block pr-2">{{ $strings.ButtonPrevious }}</span>
          </ui-btn>
          <!-- share button -->
-          <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewServer" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReviewServer">{{ $strings.ButtonShare }} </ui-btn>
+          <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewServer" class="inline-flex items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReviewServer">{{ $strings.ButtonShare }} </ui-btn>

          <div class="flex-grow" />
-          <p class="hidden sm:block text-lg font-semibold">{{ $getString('LabelServerYearReview', [yearInReviewServerVariant + 1]) }}</p>
+          <h2 class="hidden sm:block text-lg font-semibold">{{ $getString('LabelServerYearReview', [yearInReviewServerVariant + 1]) }}</h2>
          <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewServerVariant + 1 }}</p>
          <div class="flex-grow" />

@ -72,7 +77,7 @@
            <span class="material-symbols sm:!hidden text-lg py-px">refresh</span>
          </ui-btn>
          <!-- next button -->
-          <ui-btn small :disabled="yearInReviewServerVariant >= 2 || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant++">
+          <ui-btn small :disabled="yearInReviewServerVariant >= 2 || processingYearInReviewServer" :aria-label="$strings.ButtonNext" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant++">
            <span class="hidden sm:inline-block pl-2">{{ $strings.ButtonNext }}</span>
            <span class="material-symbols text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
          </ui-btn>
@ -88,6 +93,7 @@ export default {
  data() {
    return {
      showYearInReview: false,
+      availableYears: [],
      yearInReviewYear: 0,
      yearInReviewVariant: 0,
      yearInReviewServerVariant: 0,
@ -100,6 +106,9 @@ export default {
  computed: {
    isAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    user() {
+      return this.$store.state.user.user
    }
  },
  methods: {
@ -112,25 +121,57 @@ export default {
    shareYearInReviewShort() {
      this.$refs.yearInReviewShort.share()
    },
+    yearInReviewYearChanged() {
+      this.$nextTick(() => {
+        this.refreshYearInReview()
+        this.refreshYearInReviewServer()
+      })
+    },
    refreshYearInReviewServer() {
-      this.$refs.yearInReviewServer.refresh()
+      if (this.$refs.yearInReviewServer != null) {
+        this.$refs.yearInReviewServer.refresh()
+      }
    },
    refreshYearInReview() {
-      this.$refs.yearInReview.refresh()
-      this.$refs.yearInReviewShort.refresh()
+      if (this.$refs.yearInReview != null && this.$refs.yearInReviewShort != null) {
+        this.$refs.yearInReview.refresh()
+        this.$refs.yearInReviewShort.refresh()
+      }
    },
    clickShowYearInReview() {
      this.showYearInReview = !this.showYearInReview
+    },
+    getAvailableYears() {
+      if (this.user) {
+        const oldestDate = this.user.createdAt
+        if (oldestDate) {
+          const date = new Date(oldestDate)
+          const oldestYear = date.getFullYear()
+          const currentYear = new Date().getFullYear()
+
+          const years = []
+          for (let year = currentYear; year >= oldestYear; year--) {
+            years.push({ value: year, text: year.toString() })
+          }
+
+          return years
+        }
+      }
+      // Fallback on error
+      return [{ value: this.yearInReviewYear, text: this.yearInReviewYear.toString() }]
    }
  },
  beforeMount() {
    this.yearInReviewYear = new Date().getFullYear()
+
    // When not December show previous year
    if (new Date().getMonth() < 11) {
      this.yearInReviewYear--
    }
  },
  mounted() {
+    this.availableYears = this.getAvailableYears()
+
    if (typeof navigator.share !== 'undefined' && navigator.share) {
      this.showShareButton = true
    } else {
--- a/client/components/stats/YearInReviewServer.vue
+++ b/client/components/stats/YearInReviewServer.vue
@ -1,9 +1,9 @@
 <template>
  <div>
-    <div v-if="processing" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
+    <div v-if="processing" role="img" :aria-label="$strings.MessageLoading" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
      <widgets-loading-spinner />
    </div>
-    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" />
+    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" :aria-label="$getString('LabelServerYearReview', [variant + 1])" />
  </div>
 </template>

--- a/client/components/ui/Dropdown.vue
+++ b/client/components/ui/Dropdown.vue
@ -1,7 +1,7 @@
 <template>
  <div class="relative w-full" v-click-outside="clickOutsideObj">
    <p v-if="label" class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
-    <button type="button" :aria-label="longLabel" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+    <button type="button" :aria-label="longLabel" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left sm:text-sm" :class="buttonClass" aria-haspopup="menu" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
      <span class="flex items-center">
        <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
        <span v-if="selectedSubtext">:&nbsp;</span>
@ -13,9 +13,9 @@
    </button>

    <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="listbox" :style="{ maxHeight: menuMaxHeight }">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto sm:text-sm" tabindex="-1" role="menu" :style="{ maxHeight: menuMaxHeight }">
        <template v-for="item in itemsToShow">
-          <li :key="item.value" class="text-gray-100 relative py-2 cursor-pointer hover:bg-black-400" :id="'listbox-option-' + item.value" role="option" tabindex="0" @keyup.enter="clickedOption(item.value)" @click="clickedOption(item.value)">
+          <li :key="item.value" class="text-gray-100 relative py-2 cursor-pointer hover:bg-black-400" role="menuitem" tabindex="0" @keyup.enter="clickedOption(item.value)" @click="clickedOption(item.value)">
            <div class="flex items-center">
              <span class="ml-3 block truncate font-sans text-sm" :class="{ 'font-semibold': item.subtext }">{{ item.text }}</span>
              <span v-if="item.subtext">:&nbsp;</span>