From 3a9d95ed3ebf47f31a6f1e934321c4e7059ebb4f Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Tue, 11 Oct 2022 15:23:10 +0800
Subject: [PATCH] refactor(demo-app): improve sign-out button in demo-app

---
 packages/demo-app/src/App.module.scss | 4 ++++
 packages/demo-app/src/App.tsx         | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/demo-app/src/App.module.scss b/packages/demo-app/src/App.module.scss
index 57d1df62d..377f30aef 100644
--- a/packages/demo-app/src/App.module.scss
+++ b/packages/demo-app/src/App.module.scss
@@ -75,6 +75,10 @@
         cursor: pointer;
         background: var(--color-hover);
       }
+
+      &:focus {
+        outline: 3px solid var(--color-focused-variant);
+      }
     }
 
     .continue {
diff --git a/packages/demo-app/src/App.tsx b/packages/demo-app/src/App.tsx
index fb48181e9..7327d8a98 100644
--- a/packages/demo-app/src/App.tsx
+++ b/packages/demo-app/src/App.tsx
@@ -81,7 +81,11 @@ const Main = () => {
           tabIndex={0}
           className={styles.button}
           onClick={async () => signOut(`${window.location.origin}/demo-app`)}
-          onKeyDown={async () => signOut(`${window.location.origin}/demo-app`)}
+          onKeyDown={({ key }) => {
+            if (key === 'Enter' || key === ' ') {
+              void signOut(`${window.location.origin}/demo-app`);
+            }
+          }}
         >
           {t('sign_out')}
         </div>