srjp: poprawki dostępności modalu

src/components/JournalView/JournalTimetablesList.vue

@@ -29,9 +29,8 @@
                   <span
                     class="general-train"
                     tabindex="0"
-                    @click.stop="showTimetable(timetable)"
-                    @keydown.enter="showTimetable(timetable)"
-                    style="cursor: pointer"
+                    @click.stop="showTimetable(timetable, $event.currentTarget)"
+                    @keydown.enter="showTimetable(timetable, $event.currentTarget)"
                   >
                     <span class="text--grayed">#{{ timetable.id }}</span>
 
@@ -360,10 +359,10 @@ export default defineComponent({
         return { stopName, html, confirmed };
       });
     },
-    showTimetable(timetable: TimetableHistory) {
-      if (!timetable) return;
-      if (timetable.terminated) return;
-      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString());
+    showTimetable(timetable: TimetableHistory, target: EventTarget | null) {
+      if (timetable?.terminated) return;
+
+      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString(), target);
     },
     onImageError(e: Event) {
       const imageEl = e.target as HTMLImageElement;
@@ -437,6 +436,7 @@ hr {
 }
 
 .general-train {
+  cursor: pointer;
   display: flex;
   flex-wrap: wrap;
   align-items: center;

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -13,8 +13,8 @@
       :class="train.stopStatus"
       :key="train.trainId"
       tabindex="0"
-      @click="selectModalTrain(train.trainId)"
-      @keydown.enter="selectModalTrain(train.trainId)"
+      @click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
+      @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
     >
       <span class="user_train">{{ train.trainNo }}</span>
       <span class="user_name">{{ train.driverName }}</span>
@@ -27,7 +27,6 @@
 </template>
 
 <script lang="ts">
-
 import { computed, defineComponent } from 'vue';
 import imageMixin from '../../../mixins/imageMixin';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
@@ -130,4 +129,3 @@ $disconnected: slategray;
   }
 }
 </style>
-

src/components/SceneryView/SceneryTimetable.vue

@@ -67,8 +67,8 @@
           v-for="(scheduledTrain, i) in computedScheduledTrains"
           :key="scheduledTrain.trainId"
           tabindex="0"
-          @click.prevent.stop="selectModalTrain(scheduledTrain.trainId)"
-          @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId)"
+          @click.prevent.stop="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
+          @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
         >
           <span class="timetable-general">
             <span class="general-info">

src/components/TrainsView/TrainInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="train-info" tabindex="0">
+  <div class="train-info">
     <section class="train-route">
       <div class="train_general">
         <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
@@ -41,13 +41,6 @@
       </div>
 
       <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
-        <!-- <span class="timetable_progress-bar">
-          <span class="bar-bg"></span>
-          <span
-            class="bar-fg"
-            :style="{ width: `${Math.floor(confirmedPercentage(train.timetableData.followingStops))}%` }"
-          ></span>
-        </span> -->
         <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
 
         <span class="timetable_progress-distance">

src/components/TrainsView/TrainTable.vue

@@ -17,8 +17,9 @@
             class="train-row"
             v-for="train in currentTrains"
             :key="train.trainId"
-            @click.stop="selectModalTrain(train.trainId)"
-            @keydown.enter="selectModalTrain(train.trainId)"
+            tabindex="0"
+            @click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
+            @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
           >
             <TrainInfo :train="train" />
           </li>

src/mixins/modalTrainMixin.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { Ref, defineComponent } from 'vue';
 import { useStore } from '../store/store';
 
 export default defineComponent({
@@ -15,15 +15,17 @@ export default defineComponent({
   },
 
   methods: {
-    selectModalTrain(trainId: string) {
+    selectModalTrain(trainId: string, target?: EventTarget | null) {
       this.store.chosenModalTrainId = trainId;
       document.body.classList.add('no-scroll');
+      if (target) this.store.modalLastClickedTarget = target;
     },
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
 
       setTimeout(() => {
+        (this.store.modalLastClickedTarget as any)?.focus();
         document.body.classList.remove('no-scroll');
       }, 150);
     },

src/scripts/interfaces/store/storeTypes.ts

@@ -6,6 +6,7 @@ import Station from '../Station';
 import Train from '../Train';
 import { DispatcherStatsAPIData } from '../api/DispatcherStatsAPIData';
 import { DriverStatsAPIData } from '../api/DriverStatsAPIData';
+import { Ref } from 'vue';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 
@@ -46,6 +47,7 @@ export interface StoreState {
 
   listenerLaunched: boolean;
   blockScroll: boolean;
+  modalLastClickedTarget: EventTarget | null;
 }
 
 export interface APIData {

src/store/store.ts

@@ -58,6 +58,7 @@ export const useStore = defineStore('store', {
 
       blockScroll: false,
       listenerLaunched: false,
+      modalLastClickedTarget: null
     } as StoreState),
 
   actions: {