chore: accessibility of filters

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>
 

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;
 

src/components/StationsView/StationTable.vue

@@ -1,7 +1,6 @@
 <template>
   <section class="station_table">
-    <transition name="status-anim" mode="out-in">
-      <div class="table_wrapper" :key="apiStore.dataStatuses.connection">
+    <div class="table_wrapper">
       <table>
         <thead>
           <tr>
@@ -143,9 +142,7 @@
                   )
                 "
               >
-                  {{
-                    station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp
-                  }}
+                {{ station.onlineInfo.dispatcherExp < 2 ? 'L' : station.onlineInfo.dispatcherExp }}
               </span>
             </td>
 
@@ -287,15 +284,12 @@
         </tbody>
       </table>
 
-        <Loading
-          v-if="apiStore.dataStatuses.connection == Status.Loading && stations.length == 0"
-        />
+      <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>
     </div>
-    </transition>
   </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;

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>