Poprawki dostępności searchboxów

src/components/StationsView/StationFilterCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="filter-card" v-click-outside="closeCard">
+  <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard" >
     <div class="card_btn">
       <button class="btn--image" @click="toggleCard">
         <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />

src/mixins/keyMixin.ts

@@ -19,7 +19,7 @@ export default defineComponent({
     onKeyDownFunction() {},
 
     handleKeyDown(e: KeyboardEvent) {
-      if (e.key.toLowerCase() == 'f' && !this.preventKeyDown) this.onKeyDownFunction();
+      if (e.key.toLowerCase() == 'f' && !this.preventKeyDown && !e.ctrlKey && !e.altKey) this.onKeyDownFunction();
     },
   },
 });

src/styles/filters_options.scss

@@ -99,17 +99,12 @@ h1.option-title {
   }
 }
 
-.search_content > .search {
+.search_content {
+  .search {
     margin: 0.5em auto;
   }
 
-.search_content > button {
-  display: flex;
-  justify-content: center;
-  margin: 0 auto;
-}
-
-.search_content > .search_actions {
+  .search_actions {
     display: flex;
     margin: 1em 0 0.5em 0;
 
@@ -120,6 +115,19 @@ h1.option-title {
     }
   }
 
+  .search-box {
+    .search_input {
+    }
+
+    .search-exit {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      right: 0;
+    }
+  }
+}
+
 @include smallScreen() {
   .filters-options {
     font-size: 1.2em;

src/styles/search_box.scss

@@ -19,7 +19,6 @@
 
   &-input {
     border: none;
-    border-radius: 0.5em 0 0 0.5em;
     background-color: #424242;
 
     padding: 0.35em 0.5em;
@@ -28,8 +27,6 @@
 
   &-exit {
     background-color: #424242;
-    padding: 0 0.5em;
-    border-radius: 0 0.5em 0.5em 0;
 
     img {
       vertical-align: middle;