From a9b72d0b7ac3b32a380a6ad5c72de53c9df5183f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 23 Sep 2022 22:58:23 +0200
Subject: [PATCH] =?UTF-8?q?Poprawki=20dost=C4=99pno=C5=9Bci?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue | 15 +++++++++------
 src/components/TrainsView/TrainOptions.vue    |  8 ++++----
 src/styles/global.scss                        |  9 ++++++++-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index cfb88de..2fcb886 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/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 }) {
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index c511bbd..17bb4df 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/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 }) {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 38f943f..803fe16 100644
--- a/src/styles/global.scss
+++ b/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;