diff --git a/src/leaflet/control/DynmapLayerControl.ts b/src/leaflet/control/DynmapLayerControl.ts index 4b01e5a..2599624 100644 --- a/src/leaflet/control/DynmapLayerControl.ts +++ b/src/leaflet/control/DynmapLayerControl.ts @@ -27,6 +27,7 @@ import '@/assets/icons/checkbox.svg'; import {useStore} from "@/store"; import {MutationTypes} from "@/store/mutation-types"; import {watch} from "vue"; +import {handleKeyboardEvent} from "@/util/events"; const store = useStore(); @@ -70,6 +71,12 @@ export class DynmapLayerControl extends Control.Layers { this._section!.style.display = ''; this.handleResize(); + const firstCheckbox = this._container!.querySelector('input'); + + if(firstCheckbox) { + (firstCheckbox as HTMLElement).focus(); + } + // @ts-ignore super._checkDisabledLayers(); return this; @@ -89,6 +96,11 @@ export class DynmapLayerControl extends Control.Layers { DomEvent.disableClickPropagation(container); DomEvent.disableScrollPropagation(container); + DomEvent.on(container, 'keydown', (e: Event) => { + const elements = Array.from(container.querySelectorAll('input')) as HTMLElement[]; + handleKeyboardEvent(e as KeyboardEvent, elements); + }); + const section = this._section = DomUtil.create('section', className + '-list'), button = this._layersButton = DomUtil.create('button', className + '-toggle', container); diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index e03fd33..e148554 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -53,8 +53,6 @@ @mixin button-focused { outline: var(--outline-focus) auto thick !important; - //background-color: var(--background-base); - //color: var(--text-base); z-index: 1; border-color: var(--background-dark); } diff --git a/src/scss/style.scss b/src/scss/style.scss index ed6198d..1fae61d 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -130,6 +130,19 @@ input { opacity: 1; } } + + @include focus { + & ~ span:after { + content: ''; + outline: var(--outline-focus) 2px solid; + position: absolute; + top: 0; + right: -0.5rem; + bottom: 0; + left: -0.5rem; + border-radius: 0.5rem; + } + } } svg {