feat(seaside): Improve KeyboardController to add event on element

instead of on window

seaside/src/common/components/CurtainModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="grid bg-base-200 bg-opacity-60 z-30 w-full h-full absolute top-0 right-0 overflow-hidden"
-       @click="opened = false">
+       @click="opened = false" ref="root">
     <Transition
         enter-active-class="lg:duration-300 ease-in-out"
         enter-from-class="lg:transform lg:translate-x-full"
@@ -20,15 +20,18 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-facing-decorator';
 import { KeyboardController, listener, useKeyboardController } from '@/common/services/KeyboardController';
+import { ref } from 'vue';
 
 const LEAVE_EVENT: string = 'leave';
 
 @Component({
   name: 'CurtainModal',
   emits: [LEAVE_EVENT],
   setup() {
+    const root = ref(HTMLElement.prototype);
     return {
-      keyboardController: useKeyboardController(),
+      root,
+      keyboardController: useKeyboardController(root),
     };
   },
 })
@@ -52,7 +55,7 @@ export default class CurtainModal extends Vue {
     this.$emit(LEAVE_EVENT);
   }
 
-  unmounted(): void {
+  beforeUnmount(): void {
     this.keyboardController.purge();
   }
 }

seaside/src/common/services/KeyboardController.ts

@@ -1,3 +1,5 @@
+import { Ref, UnwrapRef } from '@vue/reactivity';
+
 type KeyboardListener = {
     key: string,
     consumer: (event: KeyboardEvent) => void,
@@ -7,15 +9,15 @@ type OnKeydownCallback = (event: KeyboardEvent) => void;
 
 export type KeyboardController = {
     listeners: Map<string, KeyboardListener>,
-    root: HTMLElement,
+    root: Ref<UnwrapRef<HTMLElement>>,
     callback?: OnKeydownCallback,
     register: (...toRegister: KeyboardListener[]) => this
     start: () => void;
     stop: () => void;
     purge: () => void;
 };
 
-export function useKeyboardController(root: HTMLElement): KeyboardController {
+export function useKeyboardController(root: Ref<UnwrapRef<HTMLElement>>): KeyboardController {
     return {
         listeners: new Map(),
         root: root,
@@ -41,12 +43,14 @@ export function listener(key: string, consumer: (event: KeyboardEvent) => void):
 
 function startController(controller: KeyboardController): void {
     controller.callback = (event: KeyboardEvent) => onKeyDownListener(controller.listeners, event);
-    controller.root.addEventListener('keydown', controller.callback, false);
+    controller.root.value.addEventListener('keydown', controller.callback, false);
+    controller.root.value.tabIndex = -1;
+    controller.root.value.focus();
 }
 
 function stopController(controller: KeyboardController): void {
     if (controller.callback) {
-        controller.root.removeEventListener('keydown', controller.callback, false);
+        controller.root.value.removeEventListener('keydown', controller.callback, false);
     }
 }
 
@@ -59,7 +63,8 @@ function purgeController(controller: KeyboardController): void {
 
 function onKeyDownListener(listeners: Map<string, KeyboardListener>, event: KeyboardEvent): void {
     const targetType: string = (event.target as HTMLInputElement).type?.toLowerCase() || 'accepted';
-    if (!listeners || event.altKey || ['text', 'password', 'textarea'].includes(targetType)) {
+    if (!listeners || event.altKey ||
+        (['text', 'password', 'textarea', 'email'].includes(targetType) && event.key !== 'Escape')) {
         return;
     }
     if (!event.altKey && listeners.has(event.key)) {

seaside/src/security/components/CreateAccountComponent.vue

@@ -16,7 +16,7 @@
       <label class="label -mt-6">
         <span class="label-text">Username</span>
       </label>
-      <input v-model="account.name" type="text" placeholder="username"
+      <input v-model="account.name" type="text" placeholder="User Name"
              class="input input-bordered w-full"
              :class="{'input-error': errors.has('name')}" @change="onFieldChange('name')">
       <label class="label -mt-1">
@@ -27,7 +27,7 @@
       <label class="label -mt-6">
         <span class="label-text">Mail</span>
       </label>
-      <input v-model="account.mail" type="email" placeholder="mail address" name="ukyilkil"
+      <input v-model="account.mail" type="email" placeholder="okenobi@ght1pc9kc.fr"
              class="input input-bordered w-full"
              :class="{'input-error': errors.has('mail')}" @change="onFieldChange('mail')">
       <label class="label -mt-1">
@@ -85,7 +85,6 @@ import { passwordAnonymousCheckStrength, passwordGenerate } from '@/security/ser
 import { EyeIcon } from '@heroicons/vue/24/solid';
 import { userCreate } from '@/security/services/UserService';
 import notificationService from '@/services/notification/NotificationService';
-import { useKeyboardController } from '@/common/services/KeyboardController';
 
 const CLOSE_EVENT: string = 'close';
 
@@ -95,7 +94,6 @@ const CLOSE_EVENT: string = 'close';
   setup() {
     return {
       userStore: useStore(),
-      keyboardController: useKeyboardController(),
     };
   },
 })

seaside/src/techwatch/components/newslist/NewsList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-5xl" ref="news-list">
+  <div class="max-w-5xl focus:outline-none" ref="newsList">
     <template v-for="(card, idx) in news" :key="card.data.id">
       <NewsCard :ref="card.data.id" :card="card"
                 @activate="activateNewsCard(idx)" @addFilter="onAddFilter" @clickTitle="markNewsRead(idx, true)">
@@ -67,6 +67,7 @@ import { EnvelopeIcon, EnvelopeOpenIcon, PaperClipIcon, ShareIcon } from '@heroi
 import { FireIcon } from '@heroicons/vue/20/solid';
 import { KeyboardController, listener, useKeyboardController } from '@/common/services/KeyboardController';
 import { ref } from 'vue';
+import { Ref, UnwrapRef } from '@vue/reactivity';
 
 @Component({
   name: 'NewsList',
@@ -76,14 +77,15 @@ import { ref } from 'vue';
   },
   setup() {
     const store = useStore();
-    const newsList = ref(HTMLElement);
+    const newsList: Ref<UnwrapRef<HTMLElement>> = ref(HTMLElement.prototype);
     return {
       store: store,
       userStore: store.state.user,
       newsStore: store.state.news,
       activateOnScroll: useScrollingActivation(),
       infiniteScroll: useInfiniteScroll(),
-      keyboardController: useKeyboardController(newsList.value.prototype),
+      keyboardController: useKeyboardController(newsList),
+      newsList,
     };
   },
 })
@@ -374,10 +376,14 @@ export default class NewsList extends Vue implements ScrollActivable, InfiniteSc
     actionServiceReload('news');
   }
 
+  beforeUnmount(): void {
+    this.keyboardController.purge();
+
+  }
+
   unmounted(): void {
     this.activateOnScroll.disconnect();
     this.infiniteScroll.disconnect();
-    this.keyboardController.purge();
     actionServiceUnregisterFunction();
   }