Poprawki funkcjonalności i dostępności

src/components/Order.vue

@@ -19,6 +19,12 @@ import OrderSVue from './OrderS.vue';
 import OrderFooter from './OrderFooter.vue';
 import OrderOVue from './OrderO.vue';
 
+const orderComponents = {
+  orderN: OrderNVue,
+  orderS: OrderSVue,
+  orderO: OrderOVue,
+};
+
 export default defineComponent({
   components: { OrderNVue, OrderSVue, OrderFooter },
 
@@ -32,16 +38,7 @@ export default defineComponent({
 
   computed: {
     chosenOrderComponent() {
-      switch (this.store.chosenOrderType) {
-        case 'orderN':
-          return OrderNVue;
-        case 'orderS':
-          return OrderSVue;
-        case 'orderO':
-          return OrderOVue;
-        default:
-          return OrderNVue;
-      }
+      return orderComponents[this.store.chosenOrderType];
     },
   },
 });
@@ -121,6 +118,19 @@ input {
   font-size: 0.9em;
   text-align: center;
   color: black;
+
+  &:focus-visible {
+    border-bottom: 2px solid $accentCol;
+  }
+}
+
+input[type='checkbox'],
+input[type='radio'],
+textarea,
+select {
+  &:focus-visible {
+    outline: 2px solid $accentCol;
+  }
 }
 
 select {

src/components/OrderList.vue

@@ -3,6 +3,8 @@
     <h3>Zapisane rozkazy pisemne ({{ localOrderList.length }})</h3>
 
     <transition-group name="list" tag="ul">
+      <li class="no-orders-warning" v-if="sortedOrderList.length == 0" :key="-1">Brak zapisanych rozkazów!</li>
+
       <li v-for="order in sortedOrderList" :key="order.id">
         <b>
           {{ getOrderName(order.orderType) }} nr {{ order.orderBody['header']['orderNo'] }} dla pociągu nr
@@ -84,12 +86,12 @@ export default defineComponent({
   &-move,
   &-enter-active,
   &-leave-active {
-    transition: all 0.5s ease;
+    transition: all 250ms ease;
   }
   &-enter-from,
   &-leave-to {
     opacity: 0;
-    transform: translateX(30px);
+    transform: translateY(30px);
   }
 
   &-leave-active {
@@ -126,5 +128,11 @@ li {
   button {
     margin: 1em 1em 0 0;
   }
+
+  &.no-orders-warning {
+    text-align: center;
+    font-size: 1.2em;
+    cursor: default;
+  }
 }
 </style>

src/components/OrderN.vue

@@ -36,7 +36,7 @@
             <td>
               <strong>ZEZWALAM</strong> po otrzymaniu
               <select id="select-2a" v-model="order.row2.option1">
-                <option :value='`sygnału "Nakaz Jazdy"`'>sygnału "Nakaz Jazdy"</option>
+                <option :value="`sygnału &quot;Nakaz Jazdy&quot;`">sygnału "Nakaz Jazdy"</option>
                 <option value="tylko tego rozkazu pisemnego">tylko tego rozkazu pisemnego</option>
               </select>
               <div style="margin-top: 0.5rem">

src/components/OrderS.vue

@@ -28,7 +28,7 @@
             <td>
               zezwalam po otrzymaniu
               <select id="select-1a" v-model="order.row1.option1">
-                <option value='sygnału "nakaz jazdy"'>sygnału "nakaz jazdy"</option>
+                <option :value="`sygnału &quot;nakaz jazdy&quot;`">sygnału "nakaz jazdy"</option>
                 <option value="tylko tego rozkazu pisemnego">tylko tego rozkazu pisemnego</option>
               </select>
               <div style="margin-top: 0.5rem">

src/components/SideBar.vue

@@ -116,6 +116,10 @@ export default defineComponent({
     &:hover {
       cursor: pointer;
     }
+
+    &:focus-visible {
+      background-color: #6d6d6d73;
+    }
   }
 }