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 @@
-
-
-
@@ -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 @@
-
+
{{ $t('options.filters') }} [F]
@@ -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;