From 855232ee4263e992c63e6f0eea6168515e731005 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Saraj=C3=A4rvi?= <joonas.sarajarvi@solita.fi>
Date: Thu, 7 Jul 2022 14:28:50 +0300
Subject: [PATCH 1/2] AE-1763 Keyboard-navigable header menus

More ideal might be to behave more similarly to the Select2 component.

This change is more limited, but it makes it at least possible to use
these menus from the keyboard.
---
 src/pages/header/Header.svelte | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/pages/header/Header.svelte b/src/pages/header/Header.svelte
index be25af657..3247caccf 100644
--- a/src/pages/header/Header.svelte
+++ b/src/pages/header/Header.svelte
@@ -16,6 +16,15 @@
   let nameNode;
   let ohjeNode;
 
+  const toggleNameDropdown = () => (showNameDropdown = !showNameDropdown);
+  const toggleOhjeDropdown = () => (showOhjeDropdown = !showOhjeDropdown);
+
+  const enterHandler = handler => e => {
+    if (e.keyCode === 13) {
+      handler();
+    }
+  };
+
   const fullName = kayttaja => `${kayttaja.etunimi} ${kayttaja.sukunimi}`;
 
   $: links = R.compose(
@@ -99,8 +108,10 @@
         <div
           bind:this={ohjeNode}
           class="relative cursor-pointer hover:underline"
-          on:click={() => (showOhjeDropdown = !showOhjeDropdown)}>
-          <span> {$_('navigation.ohjeet')} </span>
+          on:click={toggleOhjeDropdown}>
+          <span tabindex="0" on:keydown={enterHandler(toggleOhjeDropdown)}>
+            {$_('navigation.ohjeet')}
+          </span>
           <span class="material-icons absolute">keyboard_arrow_down</span>
           {#if showOhjeDropdown}
             <div
@@ -129,8 +140,8 @@
         <div
           bind:this={nameNode}
           class="relative cursor-pointer hover:underline"
-          on:click={() => (showNameDropdown = !showNameDropdown)}>
-          <span>
+          on:click={toggleNameDropdown}>
+          <span tabindex="0" on:keydown={enterHandler(toggleNameDropdown)}>
             {fullName(user)}
           </span>
           <span class="material-icons absolute">keyboard_arrow_down</span>

From dac720da7071a71f1bed20f42dd617e70ef1ac97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joonas=20Saraj=C3=A4rvi?= <joonas.sarajarvi@solita.fi>
Date: Fri, 8 Jul 2022 12:51:54 +0300
Subject: [PATCH 2/2] AE-1774 Use keys module for the key code

---
 src/pages/header/Header.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/header/Header.svelte b/src/pages/header/Header.svelte
index 3247caccf..42e57fd6c 100644
--- a/src/pages/header/Header.svelte
+++ b/src/pages/header/Header.svelte
@@ -4,6 +4,7 @@
 
   import * as Navigation from '@Utility/navigation';
   import * as Kayttajat from '@Utility/kayttajat';
+  import * as keys from '@Utility/keys';
   import { _ } from '@Language/i18n';
 
   import LanguageSelect from './language-select';
@@ -20,7 +21,7 @@
   const toggleOhjeDropdown = () => (showOhjeDropdown = !showOhjeDropdown);
 
   const enterHandler = handler => e => {
-    if (e.keyCode === 13) {
+    if (e.keyCode === keys.ENTER) {
       handler();
     }
   };