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" />
@@ -8,7 +8,7 @@
     </div>
 
     <transition name="card-anim">
-      <div class="card" v-if="isVisible">
+      <div class="card" v-if="isVisible" >
         <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
 

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,24 +99,32 @@ h1.option-title {
   }
 }
 
-.search_content > .search {
-  margin: 0.5em auto;
-}
+.search_content {
+  .search {
+    margin: 0.5em auto;
+  }
 
-.search_content > button {
-  display: flex;
-  justify-content: center;
-  margin: 0 auto;
-}
+  .search_actions {
+    display: flex;
+    margin: 1em 0 0.5em 0;
 
-.search_content > .search_actions {
-  display: flex;
-  margin: 1em 0 0.5em 0;
+    button {
+      margin: 0.25em 0.5em;
+      background-color: #424242;
+      color: white;
+    }
+  }
 
-  button {
-    margin: 0.25em 0.5em;
-    background-color: #424242;
-    color: white;
+  .search-box {
+    .search_input {
+    }
+
+    .search-exit {
+      position: absolute;
+      transform: translateY(-50%);
+      top: 50%;
+      right: 0;
+    }
   }
 }
 

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;