Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 21:38:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Poprawki dostępności

Browse Source
This commit is contained in:
Spythere
2022-09-23 22:58:23 +02:00
parent 95a027f284
commit a9b72d0b7a
3 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalOptions.vue
+9 -6
View File
@@ -2,7 +2,7 @@
<div class="filters-options"> <div class="filters-options">
<div class="bg" v-if="showOptions" @click="showOptions = false"></div> <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" /> <img :src="getIcon('filter2')" alt="Open filters" />
{{ $t('options.filters') }} [F] {{ $t('options.filters') }} [F]
</button> </button>
@@ -75,11 +75,6 @@
</button> </button>
</div> </div>
</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> </div>
</transition> </transition>
</div> </div>
@@ -144,6 +139,14 @@ export default defineComponent({
// Override keyMixin function // Override keyMixin function
onKeyDownFunction() { onKeyDownFunction() {
this.showOptions = !this.showOptions; 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 }) { onSorterChange(item: { id: string | number; value: string }) {
src/components/TrainsView/TrainOptions.vue
+4 -4
View File
@@ -2,7 +2,7 @@
<div class="filters-options" @keydown.esc="showOptions = false"> <div class="filters-options" @keydown.esc="showOptions = false">
<div class="bg" v-if="showOptions" @click="showOptions = false"></div> <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" /> <img :src="getIcon('filter2')" alt="Open filters" />
{{ $t('options.filters') }} [F] {{ $t('options.filters') }} [F]
</button> </button>
@@ -125,9 +125,9 @@ export default defineComponent({
toggleShowOptions() { toggleShowOptions() {
this.showOptions = !this.showOptions; this.showOptions = !this.showOptions;
// this.$nextTick(() => { this.$nextTick(() => {
// if (this.showOptions) (this.$refs['initFocusedElement'] as any)?.focus(); if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
// }); });
}, },
onSorterChange(item: { id: string | number; value: string }) { onSorterChange(item: { id: string | number; value: string }) {
src/styles/global.scss
+8 -1
View File
@@ -133,6 +133,14 @@ input {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
*:focus {
outline: none;
}
*:focus-visible {
outline: 1px solid $accentCol;
}
.title { .title {
color: $accentCol; color: $accentCol;
font-weight: 600; font-weight: 600;
@@ -226,7 +234,6 @@ button {
border-radius: 0.75em 0.75em 0 0; border-radius: 0.75em 0.75em 0 0;
background-color: #1b1b1b; background-color: #1b1b1b;
img { img {
height: 1.3em; height: 1.3em;
margin-right: 0.5rem; margin-right: 0.5rem;