diff --git a/frontend/assets/css/main.scss b/frontend/assets/css/main.scss
index 2bf8cfc6c..ab4335179 100644
--- a/frontend/assets/css/main.scss
+++ b/frontend/assets/css/main.scss
@@ -96,3 +96,16 @@ svg{
     }
   }
 }
+
+// see https://tailwindcss.com/docs/screen-readers
+sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/frontend/components/bc/BcContentFilter.vue b/frontend/components/bc/BcContentFilter.vue
new file mode 100644
index 000000000..3a5c54ab5
--- /dev/null
+++ b/frontend/components/bc/BcContentFilter.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import type InputText from 'primevue/inputtext'
+
+interface Props {
+  searchPlaceholder?: string;
+  disabledFilter?: boolean;
+}
+const props = defineProps<Props>()
+
+defineEmits<{(e: 'filter-changed', value: string): void }>()
+
+const isFilterVisible = ref(false)
+const filter = ref('')
+
+const button = ref<{$el: HTMLButtonElement} | null>(null)
+
+const input = ref<{$el: HTMLInputElement} | null>(null)
+const focusAndSelect = (inputElement: {$el: HTMLInputElement}) => {
+  if (inputElement?.$el) {
+    // make sure the input is not disabled anymore
+    nextTick(() => {
+      inputElement.$el.focus()
+      inputElement.$el.select()
+    })
+  }
+}
+const closeFilter = () => {
+  isFilterVisible.value = false
+  button.value?.$el.focus()
+}
+const handleClick = () => {
+  isFilterVisible.value = !isFilterVisible.value
+  if (input.value) {
+    focusAndSelect(input.value)
+  }
+}
+</script>
+
+<template>
+  <div class="filter_elements_container">
+    <InputText
+      ref="input"
+      v-model="filter"
+      :placeholder="props.searchPlaceholder"
+      :disabled="!isFilterVisible"
+      :class="{ visible: isFilterVisible }"
+      @keydown.escape.stop="closeFilter"
+      @input="$emit('filter-changed', filter)"
+    />
+    <Button
+      ref="button"
+      :disabled="disabledFilter"
+      :aria-expanded="isFilterVisible"
+      class="p-button-icon-only"
+      :class="{ filter_visible: isFilterVisible }"
+      @click="handleClick"
+    >
+      <span class="sr-only">
+        {{ !isFilterVisible ? $t('filter.open') : $t('filter.close') }}
+      </span>
+      <FontAwesomeIcon :icon="faMagnifyingGlass" />
+    </Button>
+  </div>
+</template>
+
+<style lang="scss">
+.filter_elements_container {
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+
+  > :first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    height: var(--default-button-height);
+    width: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    transition: width 0.2s ease-in-out, opacity 0.01s ease-in-out 0.19s,
+      padding 0.2s ease-in-out;
+
+    &.visible {
+      width: 230px;
+      opacity: 100%;
+      padding: 4px;
+
+      transition: width 0.2s ease-in-out, opacity 0.01s ease-in-out,
+        padding 0.2s ease-in-out;
+    }
+  }
+
+  > :last-child {
+    flex-shrink: 0;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    transition: all 0.2s ease-in-out;
+
+    &.filter_visible {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+</style>
diff --git a/frontend/components/bc/ContentFilter.vue b/frontend/components/bc/ContentFilter.vue
deleted file mode 100644
index 58480fe0f..000000000
--- a/frontend/components/bc/ContentFilter.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import {
-  faMagnifyingGlass
-} from '@fortawesome/pro-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
-interface Props {
-  searchPlaceholder?: string,
-  disabledFilter?: boolean
-}
-const props = defineProps<Props>()
-
-defineEmits<{(e: 'filter-changed', value: string): void }>()
-
-const filterVisible = ref(false)
-const filter = ref<string>('')
-</script>
-
-<template>
-  <div class="filter_elements_container">
-    <InputText
-      v-model="filter"
-      :placeholder="props.searchPlaceholder"
-      :class="{visible:filterVisible}"
-      :disabled="disabledFilter || !filterVisible"
-      @input="$emit('filter-changed', filter)"
-    />
-    <Button :disabled="disabledFilter" class="p-button-icon-only" :class="{filter_visible:filterVisible}" @click="filterVisible=!filterVisible">
-      <FontAwesomeIcon :icon="faMagnifyingGlass" />
-    </Button>
-  </div>
-</template>
-
-<style lang="scss">
-  .filter_elements_container {
-    display: flex;
-    justify-content: flex-end;
-    position: relative;
-
-    > :first-child{
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      height: var(--default-button-height);
-      width: 0;
-      opacity: 0;
-      padding: 0;
-      position: absolute;
-      transition:
-        width 0.2s ease-in-out,
-        opacity 0.01s ease-in-out 0.19s,
-        padding 0.2s ease-in-out;
-
-      &.visible {
-        width: 230px;
-        opacity: 100%;
-        padding: 4px;
-
-        transition:
-          width 0.2s ease-in-out,
-          opacity 0.01s ease-in-out,
-          padding 0.2s ease-in-out;
-      }
-    }
-
-    > :last-child{
-      flex-shrink: 0;
-      border-top-left-radius: var(--border-radius);
-      border-bottom-left-radius: var(--border-radius);
-      transition: all 0.2s ease-in-out;
-
-      &.filter_visible {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-</style>
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index b3c1cc0e4..8b8f09382 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -109,8 +109,10 @@
     "valid": "Valid"
   },
   "filter": {
+    "close": "Open Filter.",
+    "disabled": "Filter disabled.",
     "enabled": "Filter enabled.",
-    "disabled": "Filter disabled."
+    "open": "Close Filter."
   },
   "premium": {
     "title": "beaconcha.in Premium",