Keyboard event handling and focus styles for layers

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);
 

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);
 }

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 {