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

@@ -1,133 +1,131 @@
-<template>
-  <section class="info-user-list">
-    <h3 class="user-header section-header">
-      <img :src="getIcon('user')" alt="icon-user" />
-      &nbsp;{{ $t('scenery.users') }} &nbsp;
-      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
-      >&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
-    </h3>
-
-    <div
-      v-for="(train, i) in computedStationTrains"
-      class="badge user"
-      :class="train.stopStatus"
-      :key="train.trainId"
-      tabindex="0"
-      @click="selectModalTrain(train.trainId)"
-      @keydown.enter="selectModalTrain(train.trainId)"
-    >
-      <span class="user_train">{{ train.trainNo }}</span>
-      <span class="user_name">{{ train.driverName }}</span>
-    </div>
-
-    <div class="badge user badge-none" v-if="!computedStationTrains || computedStationTrains.length == 0">
-      {{ $t('scenery.no-users') }}
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-
-import { computed, defineComponent } from 'vue';
-import imageMixin from '../../../mixins/imageMixin';
-import modalTrainMixin from '../../../mixins/modalTrainMixin';
-import routerMixin from '../../../mixins/routerMixin';
-import Station from '../../../scripts/interfaces/Station';
-import { useStore } from '../../../store/store';
-
-export default defineComponent({
-  mixins: [routerMixin, imageMixin, modalTrainMixin],
-
-  props: {
-    station: {
-      type: Object as () => Station,
-      default: {},
-    },
-  },
-
-  setup(props) {
-    const store = useStore();
-
-    const computedStationTrains = computed(() => {
-      if (!props.station) return [];
-
-      const station = props.station as Station;
-      if (!station.onlineInfo) return [];
-      if (!station.onlineInfo.stationTrains) return [];
-
-      return station.onlineInfo.stationTrains.map((train) => {
-        const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find((st) => st.trainNo === train.trainNo);
-
-        return {
-          ...train,
-          stopStatus: scheduledTrainStatus?.stopStatus || 'no-timetable',
-        };
-      });
-    });
-
-    return { computedStationTrains, store };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-$no-timetable: #aaa;
-$departed: springgreen;
-$stopped: #ffa600;
-$online: gold;
-$terminated: salmon;
-$disconnected: slategray;
-
-.info-user-list {
-  width: 100%;
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-
-.user {
-  cursor: pointer;
-
-  &_train {
-    color: black;
-    background-color: $no-timetable;
-
-    transition: background-color 200ms;
-    -ms-transition: background-color 200ms;
-    -webkit-transition: background-color 200ms;
-  }
-
-  &.no-timetable .user_train {
-    background-color: $no-timetable;
-  }
-
-  &.departed > &_train {
-    background-color: $departed;
-  }
-
-  &.stopped > &_train {
-    background-color: $stopped;
-  }
-
-  &.online > &_train {
-    background-color: $online;
-  }
-
-  &.terminated > &_train {
-    background-color: $terminated;
-  }
-
-  &.disconnected > &_train {
-    background-color: $disconnected;
-  }
-
-  &.offline {
-    background: firebrick;
-    pointer-events: none;
-  }
-}
-</style>
-
+<template>
+  <section class="info-user-list">
+    <h3 class="user-header section-header">
+      <img :src="getIcon('user')" alt="icon-user" />
+      &nbsp;{{ $t('scenery.users') }} &nbsp;
+      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
+      >&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
+    </h3>
+
+    <div
+      v-for="(train, i) in computedStationTrains"
+      class="badge user"
+      :class="train.stopStatus"
+      :key="train.trainId"
+      tabindex="0"
+      @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>
+    </div>
+
+    <div class="badge user badge-none" v-if="!computedStationTrains || computedStationTrains.length == 0">
+      {{ $t('scenery.no-users') }}
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import modalTrainMixin from '../../../mixins/modalTrainMixin';
+import routerMixin from '../../../mixins/routerMixin';
+import Station from '../../../scripts/interfaces/Station';
+import { useStore } from '../../../store/store';
+
+export default defineComponent({
+  mixins: [routerMixin, imageMixin, modalTrainMixin],
+
+  props: {
+    station: {
+      type: Object as () => Station,
+      default: {},
+    },
+  },
+
+  setup(props) {
+    const store = useStore();
+
+    const computedStationTrains = computed(() => {
+      if (!props.station) return [];
+
+      const station = props.station as Station;
+      if (!station.onlineInfo) return [];
+      if (!station.onlineInfo.stationTrains) return [];
+
+      return station.onlineInfo.stationTrains.map((train) => {
+        const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find((st) => st.trainNo === train.trainNo);
+
+        return {
+          ...train,
+          stopStatus: scheduledTrainStatus?.stopStatus || 'no-timetable',
+        };
+      });
+    });
+
+    return { computedStationTrains, store };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+$no-timetable: #aaa;
+$departed: springgreen;
+$stopped: #ffa600;
+$online: gold;
+$terminated: salmon;
+$disconnected: slategray;
+
+.info-user-list {
+  width: 100%;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+.user {
+  cursor: pointer;
+
+  &_train {
+    color: black;
+    background-color: $no-timetable;
+
+    transition: background-color 200ms;
+    -ms-transition: background-color 200ms;
+    -webkit-transition: background-color 200ms;
+  }
+
+  &.no-timetable .user_train {
+    background-color: $no-timetable;
+  }
+
+  &.departed > &_train {
+    background-color: $departed;
+  }
+
+  &.stopped > &_train {
+    background-color: $stopped;
+  }
+
+  &.online > &_train {
+    background-color: $online;
+  }
+
+  &.terminated > &_train {
+    background-color: $terminated;
+  }
+
+  &.disconnected > &_train {
+    background-color: $disconnected;
+  }
+
+  &.offline {
+    background: firebrick;
+    pointer-events: none;
+  }
+}
+</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: {