Poprawki dostępności

src/components/JournalView/JournalOptions.vue

@@ -2,7 +2,7 @@
   <div class="filters-options">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--image" @click="showOptions = !showOptions">
+    <button class="btn--image" @click="showOptions = !showOptions" ref="button">
       <img :src="getIcon('filter2')" alt="Open filters" />
       {{ $t('options.filters') }} [F]
     </button>
@@ -75,11 +75,6 @@
             </button>
           </div>
         </div>
-
-        <!-- <div class="data-status">
-          <span v-if="dataStatus == DataStatus.Loading"> Pobieranie danych...</span>
-          <span v-if="dataStatus == DataStatus.Loaded"> Pobrano dane </span>
-        </div> -->
       </div>
     </transition>
   </div>
@@ -144,6 +139,14 @@ export default defineComponent({
     // Override keyMixin function
     onKeyDownFunction() {
       this.showOptions = !this.showOptions;
+
+      this.$nextTick(() => {
+        if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
+      });
+    },
+
+    focusEnd() {
+      console.log('focus end');
     },
 
     onSorterChange(item: { id: string | number; value: string }) {

src/components/TrainsView/TrainOptions.vue

@@ -2,7 +2,7 @@
   <div class="filters-options" @keydown.esc="showOptions = false">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--image" @click="toggleShowOptions">
+    <button class="btn--image" @click="toggleShowOptions" ref="button">
       <img :src="getIcon('filter2')" alt="Open filters" />
       {{ $t('options.filters') }} [F]
     </button>
@@ -125,9 +125,9 @@ export default defineComponent({
     toggleShowOptions() {
       this.showOptions = !this.showOptions;
 
-      // this.$nextTick(() => {
-      //   if (this.showOptions) (this.$refs['initFocusedElement'] as any)?.focus();
-      // });
+      this.$nextTick(() => {
+        if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
+      });
     },
 
     onSorterChange(item: { id: string | number; value: string }) {

src/styles/global.scss

@@ -133,6 +133,14 @@ input {
   -webkit-tap-highlight-color: transparent;
 }
 
+*:focus {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 1px solid $accentCol;
+}
+
 .title {
   color: $accentCol;
   font-weight: 600;
@@ -226,7 +234,6 @@ button {
     border-radius: 0.75em 0.75em 0 0;
     background-color: #1b1b1b;
 
-
     img {
       height: 1.3em;
       margin-right: 0.5rem;