From 7dd1c06f3fab408a435829d94898dc5b2330e3bb Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 3 May 2024 19:29:10 +0200
Subject: [PATCH] chore: accessibility of filters

---
 src/components/JournalView/JournalOptions.vue |   2 +-
 .../StationsView/StationFilterCard.vue        |  22 +-
 src/components/StationsView/StationTable.vue  | 543 +++++++++---------
 src/components/TrainsView/TrainOptions.vue    |   2 +-
 4 files changed, 281 insertions(+), 288 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 8b7d023..d427a21 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -9,7 +9,7 @@
         ref="button"
       >
         <img src="/images/icon-filter2.svg" alt="Open filters" />
-        {{ $t('options.filters') }} [F]
+        [F] {{ $t('options.filters') }}
         <span class="active-indicator" v-if="currentOptionsActive"></span>
       </button>
 
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 782e47c..46ebe58 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -3,7 +3,7 @@
     <div class="card_controls">
       <button class="btn--filled btn--image" @click="toggleCard">
         <img class="button_icon" src="/images/icon-filter2.svg" alt="filter icon" />
-        {{ $t('options.filters') }} [F]
+        [F] {{ $t('options.filters') }}
         <span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
       </button>
 
@@ -28,8 +28,8 @@
     </div>
 
     <transition name="card-anim">
-      <div class="card" v-if="isVisible" tabindex="0" ref="cardEl">
-        <div class="card_content">
+      <div class="card" v-if="isVisible" tabindex="0" ref="cardRef" @keydown.r="resetFilters">
+        <div class="card_content" @scroll="onScroll" ref="cardContentRef">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
           <p class="card_info" v-html="$t('filters.desc')"></p>
 
@@ -137,7 +137,7 @@
               :disabled="filterStore.areFiltersAtDefault"
               :data-disabled="filterStore.areFiltersAtDefault"
             >
-              {{ $t('filters.reset') }}
+              [R] {{ $t('filters.reset') }}
             </button>
             <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
           </div>
@@ -171,7 +171,10 @@ export default defineComponent({
     currentRegion: { id: '', value: '' },
 
     delayInputTimer: -1,
-    chosenSearchScenery: ''
+    chosenSearchScenery: '',
+
+    scrollTop: 0,
+    lastFocusedEl: null as HTMLElement | null
   }),
 
   setup() {
@@ -237,7 +240,10 @@ export default defineComponent({
 
     isVisible(value: boolean) {
       this.$nextTick(() => {
-        if (value) (this.$refs['cardEl'] as HTMLDivElement).focus();
+        if (value) {
+          (this.$refs['cardRef'] as HTMLDivElement).focus();
+          (this.$refs['cardContentRef'] as HTMLDivElement).scrollTop = this.scrollTop;
+        }
       });
     }
   },
@@ -248,6 +254,10 @@ export default defineComponent({
       this.isVisible = !this.isVisible;
     },
 
+    onScroll(e: Event) {
+      this.scrollTop = (e.target as HTMLElement).scrollTop;
+    },
+
     handleInput(e: Event) {
       const target = e.target as HTMLInputElement;
 
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 3d141d3..f283a10 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -1,301 +1,295 @@
 <template>
   <section class="station_table">
-    <transition name="status-anim" mode="out-in">
-      <div class="table_wrapper" :key="apiStore.dataStatuses.connection">
-        <table>
-          <thead>
-            <tr>
-              <th
-                v-for="headerName in headIds"
-                :key="headerName"
-                @click="changeSorter(headerName)"
-                class="header-text"
-                :class="headerName"
-              >
-                <span class="header_wrapper">
-                  <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
-
-                  <img
-                    class="sort-icon"
-                    v-if="sorterActive.headerName == headerName"
-                    :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
-                    alt="sort icon"
-                  />
-                </span>
-              </th>
-
-              <th
-                v-for="headerName in headIconsIds"
-                :key="headerName"
-                @click="changeSorter(headerName)"
-                class="header-image"
-                :class="headerName"
-              >
-                <span class="header_wrapper">
-                  <img
-                    :src="`/images/icon-${headerName}.svg`"
-                    :alt="headerName"
-                    :title="$t(`sceneries.headers.${headerName}`)"
-                  />
-
-                  <img
-                    class="sort-icon"
-                    v-if="sorterActive.headerName == headerName"
-                    :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
-                    alt="sort icon"
-                  />
-                </span>
-              </th>
-            </tr>
-          </thead>
-
-          <tbody>
-            <tr
-              v-for="station in stations"
-              :class="{ 'last-selected': lastSelectedStationName == station.name }"
-              :key="station.name"
-              @click.left="setScenery(station.name)"
-              @click.right="openForumSite($event, station.generalInfo?.url)"
-              @keydown.enter="setScenery(station.name)"
-              @keydown.space="openForumSite($event, station.generalInfo?.url)"
-              tabindex="0"
+    <div class="table_wrapper">
+      <table>
+        <thead>
+          <tr>
+            <th
+              v-for="headerName in headIds"
+              :key="headerName"
+              @click="changeSorter(headerName)"
+              class="header-text"
+              :class="headerName"
             >
-              <td class="station-name" :class="station.generalInfo?.availability">
-                <b v-if="station.generalInfo?.project" style="color: salmon">{{
-                  station.generalInfo.project
-                }}</b>
-                {{ station.name }}
-              </td>
+              <span class="header_wrapper">
+                <div v-html="$t(`sceneries.headers.${headerName}`)"></div>
 
-              <td class="station-level">
-                <span v-if="station.generalInfo">
-                  <span
-                    v-if="
-                      station.generalInfo.reqLevel > -1 &&
-                      station.generalInfo.availability != 'nonPublic' &&
-                      station.generalInfo.availability != 'unavailable'
-                    "
-                    :style="calculateExpStyle(station.generalInfo.reqLevel)"
-                  >
-                    {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
-                  </span>
-
-                  <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                    <img
-                      src="/images/icon-abandoned.svg"
-                      alt="non-public"
-                      :title="$t('sceneries.info.abandoned')"
-                    />
-                  </span>
-
-                  <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                    <img
-                      src="/images/icon-lock.svg"
-                      alt="non-public"
-                      :title="$t('sceneries.info.non-public')"
-                    />
-                  </span>
-
-                  <span v-else>
-                    <img
-                      src="/images/icon-unavailable.svg"
-                      alt="unavailable"
-                      :title="$t('sceneries.info.unavailable')"
-                    />
-                  </span>
-                </span>
-
-                <span v-else> ? </span>
-              </td>
-
-              <td class="station-status">
-                <StationStatusBadge
-                  :isOnline="station.onlineInfo ? true : false"
-                  :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
+                <img
+                  class="sort-icon"
+                  v-if="sorterActive.headerName == headerName"
+                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                  alt="sort icon"
                 />
-              </td>
+              </span>
+            </th>
 
-              <td class="station-dispatcher-name">
-                <span v-if="station.onlineInfo?.dispatcherName">
-                  <b
-                    v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                    @click.stop="openDonationModal"
-                    data-popup-key="DonatorPopUp"
-                    :data-popup-content="$t('donations.dispatcher-message')"
-                  >
-                    <img src="/images/icon-diamond.svg" alt="" />
-                    {{ station.onlineInfo.dispatcherName }}
-                  </b>
+            <th
+              v-for="headerName in headIconsIds"
+              :key="headerName"
+              @click="changeSorter(headerName)"
+              class="header-image"
+              :class="headerName"
+            >
+              <span class="header_wrapper">
+                <img
+                  :src="`/images/icon-${headerName}.svg`"
+                  :alt="headerName"
+                  :title="$t(`sceneries.headers.${headerName}`)"
+                />
 
-                  <div v-else>
-                    {{ station.onlineInfo.dispatcherName }}
-                  </div>
-                </span>
-              </td>
+                <img
+                  class="sort-icon"
+                  v-if="sorterActive.headerName == headerName"
+                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
+                  alt="sort icon"
+                />
+              </span>
+            </th>
+          </tr>
+        </thead>
 
-              <td class="station-dispatcher-exp">
+        <tbody>
+          <tr
+            v-for="station in stations"
+            :class="{ 'last-selected': lastSelectedStationName == station.name }"
+            :key="station.name"
+            @click.left="setScenery(station.name)"
+            @click.right="openForumSite($event, station.generalInfo?.url)"
+            @keydown.enter="setScenery(station.name)"
+            @keydown.space="openForumSite($event, station.generalInfo?.url)"
+            tabindex="0"
+          >
+            <td class="station-name" :class="station.generalInfo?.availability">
+              <b v-if="station.generalInfo?.project" style="color: salmon">{{
+                station.generalInfo.project
+              }}</b>
+              {{ station.name }}
+            </td>
+
+            <td class="station-level">
+              <span v-if="station.generalInfo">
                 <span
-                  v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
-                  :style="
-                    calculateExpStyle(
-                      station.onlineInfo.dispatcherExp,
-                      station.onlineInfo.dispatcherIsSupporter
-                    )
+                  v-if="
+                    station.generalInfo.reqLevel > -1 &&
+                    station.generalInfo.availability != 'nonPublic' &&
+                    station.generalInfo.availability != 'unavailable'
                   "
+                  :style="calculateExpStyle(station.generalInfo.reqLevel)"
                 >
-                  {{
-                    station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp
-                  }}
+                  {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
                 </span>
-              </td>
 
-              <td class="station-tracks">
-                <div v-if="station.generalInfo">
-                  <span
-                    v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
-                    class="track catenary"
-                    :title="`${$t('sceneries.info.single-track-routes-catenary')}${
-                      station.generalInfo.routes.singleElectrifiedNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.singleElectrifiedNames.length }}
-                  </span>
+                <span v-else-if="station.generalInfo.availability == 'abandoned'">
+                  <img
+                    src="/images/icon-abandoned.svg"
+                    alt="non-public"
+                    :title="$t('sceneries.info.abandoned')"
+                  />
+                </span>
 
-                  <span
-                    v-if="station.generalInfo.routes.singleOtherNames.length != 0"
-                    class="track no-catenary"
-                    :title="`${$t('sceneries.info.single-track-routes-other')}${
-                      station.generalInfo.routes.singleOtherNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.singleOtherNames.length }}
-                  </span>
+                <span v-else-if="station.generalInfo.availability == 'nonPublic'">
+                  <img
+                    src="/images/icon-lock.svg"
+                    alt="non-public"
+                    :title="$t('sceneries.info.non-public')"
+                  />
+                </span>
+
+                <span v-else>
+                  <img
+                    src="/images/icon-unavailable.svg"
+                    alt="unavailable"
+                    :title="$t('sceneries.info.unavailable')"
+                  />
+                </span>
+              </span>
+
+              <span v-else> ? </span>
+            </td>
+
+            <td class="station-status">
+              <StationStatusBadge
+                :isOnline="station.onlineInfo ? true : false"
+                :dispatcherStatus="station.onlineInfo?.dispatcherStatus"
+              />
+            </td>
+
+            <td class="station-dispatcher-name">
+              <span v-if="station.onlineInfo?.dispatcherName">
+                <b
+                  v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
+                  @click.stop="openDonationModal"
+                  data-popup-key="DonatorPopUp"
+                  :data-popup-content="$t('donations.dispatcher-message')"
+                >
+                  <img src="/images/icon-diamond.svg" alt="" />
+                  {{ station.onlineInfo.dispatcherName }}
+                </b>
+
+                <div v-else>
+                  {{ station.onlineInfo.dispatcherName }}
                 </div>
-              </td>
+              </span>
+            </td>
 
-              <td class="station-tracks">
-                <div v-if="station.generalInfo">
-                  <span
-                    v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
-                    class="track catenary"
-                    :title="`${$t('sceneries.info.double-track-routes-catenary')}${
-                      station.generalInfo.routes.doubleElectrifiedNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.doubleElectrifiedNames.length }}
-                  </span>
+            <td class="station-dispatcher-exp">
+              <span
+                v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
+                :style="
+                  calculateExpStyle(
+                    station.onlineInfo.dispatcherExp,
+                    station.onlineInfo.dispatcherIsSupporter
+                  )
+                "
+              >
+                {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
+              </span>
+            </td>
 
-                  <span
-                    v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
-                    class="track no-catenary"
-                    :title="`${$t('sceneries.info.double-track-routes-other')}${
-                      station.generalInfo.routes.doubleOtherNames.length
-                    }`"
-                  >
-                    {{ station.generalInfo.routes.doubleOtherNames.length }}
-                  </span>
-                </div>
-              </td>
-
-              <td class="station-info">
+            <td class="station-tracks">
+              <div v-if="station.generalInfo">
                 <span
-                  v-if="station.generalInfo?.signalType"
-                  class="scenery-icon icon-info"
-                  :class="station.generalInfo?.controlType.replace('+', '-')"
-                  :title="
-                    $t('sceneries.info.control-type') +
-                    $t(`controls.${station.generalInfo?.controlType}`)
-                  "
+                  v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
+                  class="track catenary"
+                  :title="`${$t('sceneries.info.single-track-routes-catenary')}${
+                    station.generalInfo.routes.singleElectrifiedNames.length
+                  }`"
                 >
-                  {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+                  {{ station.generalInfo.routes.singleElectrifiedNames.length }}
                 </span>
 
-                <img
-                  v-if="station.generalInfo?.signalType"
-                  class="icon-info"
-                  :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-                  :alt="station.generalInfo.signalType"
-                  :title="
-                    $t('sceneries.info.signals-type') +
-                    $t(`signals.${station.generalInfo.signalType}`)
-                  "
-                />
+                <span
+                  v-if="station.generalInfo.routes.singleOtherNames.length != 0"
+                  class="track no-catenary"
+                  :title="`${$t('sceneries.info.single-track-routes-other')}${
+                    station.generalInfo.routes.singleOtherNames.length
+                  }`"
+                >
+                  {{ station.generalInfo.routes.singleOtherNames.length }}
+                </span>
+              </div>
+            </td>
 
-                <img
-                  v-if="station.generalInfo?.SUP"
-                  class="icon-info"
-                  src="/images/icon-SUP.svg"
-                  alt="SUP (RASP-UZK)"
-                  :title="$t('sceneries.info.SUP')"
-                />
+            <td class="station-tracks">
+              <div v-if="station.generalInfo">
+                <span
+                  v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
+                  class="track catenary"
+                  :title="`${$t('sceneries.info.double-track-routes-catenary')}${
+                    station.generalInfo.routes.doubleElectrifiedNames.length
+                  }`"
+                >
+                  {{ station.generalInfo.routes.doubleElectrifiedNames.length }}
+                </span>
 
-                <img
-                  v-if="station.generalInfo?.ASDEK"
-                  class="icon-info"
-                  src="/images/icon-ASDEK.svg"
-                  alt="dSAT ASDEK"
-                  :title="$t('sceneries.info.ASDEK')"
-                />
+                <span
+                  v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
+                  class="track no-catenary"
+                  :title="`${$t('sceneries.info.double-track-routes-other')}${
+                    station.generalInfo.routes.doubleOtherNames.length
+                  }`"
+                >
+                  {{ station.generalInfo.routes.doubleOtherNames.length }}
+                </span>
+              </div>
+            </td>
 
-                <img
-                  v-if="!station.generalInfo"
-                  class="icon-info"
-                  src="/images/icon-unknown.svg"
-                  alt="icon-unknown"
-                  :title="$t('sceneries.info.unknown')"
-                />
-              </td>
-
-              <td class="station-users" :class="{ inactive: !station.onlineInfo }">
-                <span class="text--primary">{{ station.onlineInfo?.currentUsers ?? '-' }}</span>
-                /
-                <span class="text--primary">{{ station.onlineInfo?.maxUsers ?? '-' }}</span>
-              </td>
-
-              <td class="station-likes" :class="{ inactive: !station.onlineInfo }">
-                <span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
-              </td>
-
-              <td class="station-spawns" :class="{ inactive: !station.onlineInfo }">
-                <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
-              </td>
-
-              <td
-                class="station-schedules all"
-                style="width: 30px"
-                :class="{ inactive: !station.onlineInfo }"
+            <td class="station-info">
+              <span
+                v-if="station.generalInfo?.signalType"
+                class="scenery-icon icon-info"
+                :class="station.generalInfo?.controlType.replace('+', '-')"
+                :title="
+                  $t('sceneries.info.control-type') +
+                  $t(`controls.${station.generalInfo?.controlType}`)
+                "
               >
-                {{ station.onlineInfo?.scheduledTrainCount.all ?? '-' }}
-              </td>
+                {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+              </span>
 
-              <td
-                class="station-schedules unconfirmed"
-                style="width: 30px"
-                :class="{ inactive: !station.onlineInfo }"
-              >
-                {{ station.onlineInfo?.scheduledTrainCount.unconfirmed ?? '-' }}
-              </td>
+              <img
+                v-if="station.generalInfo?.signalType"
+                class="icon-info"
+                :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+                :alt="station.generalInfo.signalType"
+                :title="
+                  $t('sceneries.info.signals-type') +
+                  $t(`signals.${station.generalInfo.signalType}`)
+                "
+              />
 
-              <td
-                class="station-schedules confirmed"
-                style="width: 30px"
-                :class="{ inactive: !station.onlineInfo }"
-              >
-                {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+              <img
+                v-if="station.generalInfo?.SUP"
+                class="icon-info"
+                src="/images/icon-SUP.svg"
+                alt="SUP (RASP-UZK)"
+                :title="$t('sceneries.info.SUP')"
+              />
 
-        <Loading
-          v-if="apiStore.dataStatuses.connection == Status.Loading && stations.length == 0"
-        />
+              <img
+                v-if="station.generalInfo?.ASDEK"
+                class="icon-info"
+                src="/images/icon-ASDEK.svg"
+                alt="dSAT ASDEK"
+                :title="$t('sceneries.info.ASDEK')"
+              />
 
-        <div class="no-stations" v-else-if="stations.length == 0">
-          {{ $t('sceneries.no-stations') }}
-        </div>
+              <img
+                v-if="!station.generalInfo"
+                class="icon-info"
+                src="/images/icon-unknown.svg"
+                alt="icon-unknown"
+                :title="$t('sceneries.info.unknown')"
+              />
+            </td>
+
+            <td class="station-users" :class="{ inactive: !station.onlineInfo }">
+              <span class="text--primary">{{ station.onlineInfo?.currentUsers ?? '-' }}</span>
+              /
+              <span class="text--primary">{{ station.onlineInfo?.maxUsers ?? '-' }}</span>
+            </td>
+
+            <td class="station-likes" :class="{ inactive: !station.onlineInfo }">
+              <span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
+            </td>
+
+            <td class="station-spawns" :class="{ inactive: !station.onlineInfo }">
+              <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
+            </td>
+
+            <td
+              class="station-schedules all"
+              style="width: 30px"
+              :class="{ inactive: !station.onlineInfo }"
+            >
+              {{ station.onlineInfo?.scheduledTrainCount.all ?? '-' }}
+            </td>
+
+            <td
+              class="station-schedules unconfirmed"
+              style="width: 30px"
+              :class="{ inactive: !station.onlineInfo }"
+            >
+              {{ station.onlineInfo?.scheduledTrainCount.unconfirmed ?? '-' }}
+            </td>
+
+            <td
+              class="station-schedules confirmed"
+              style="width: 30px"
+              :class="{ inactive: !station.onlineInfo }"
+            >
+              {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <Loading v-if="apiStore.dataStatuses.connection == Status.Loading && stations.length == 0" />
+
+      <div class="no-stations" v-else-if="stations.length == 0">
+        {{ $t('sceneries.no-stations') }}
       </div>
-    </transition>
+    </div>
   </section>
 </template>
 
@@ -395,20 +389,9 @@ export default defineComponent({
 
 $rowCol: #424242;
 
-.change-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity 100ms ease-in;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
 .table_wrapper {
   overflow: auto;
+  overflow-y: scroll;
   font-weight: 500;
   height: 90vh;
   min-height: 550px;
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 721e4f6..5763527 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -4,7 +4,7 @@
 
     <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
       <img src="/images/icon-filter2.svg" alt="Open filters icon" />
-      {{ $t('options.filters') }} [F]
+      [F] {{ $t('options.filters') }}
       <span class="active-indicator" v-if="currentOptionsActive"></span>
     </button>