From e36cfe41cb697e05e37b854eae561f8a9624f02d Mon Sep 17 00:00:00 2001
From: Brandon Ruffridge <bruffridge@users.noreply.github.com>
Date: Tue, 20 Feb 2024 12:09:53 -0500
Subject: [PATCH] don't show focus outline on mouse or touch events, only
 keyboard focus.

---
 README.md                       | 3 ++-
 src/components/Hamburger.svelte | 6 +++++-
 src/components/Sidebar.svelte   | 5 ++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index ba7db1f..f60bf93 100644
--- a/README.md
+++ b/README.md
@@ -31,13 +31,14 @@ npm run dev
 ### Known issues
 
 - add a loading icon, while thread is loading. so user doesn't just see the navbar and blank screen.
-- blank screen bug on threaded chat messages on ios safari and chrome.
 - deep-chat speechToText: submit command word is sent in message on safari and chrome on iOS.
 
 - deep-chat textToSpeech: doesn't read messages aloud on safari or chrome on iOS.
 
 ### Nice to haves
 
+- after you select a chat on mobile, close the sidebar.
+- have sidebar opened by default on larger screen sizes.
 - save chat logs.
 - ability rate responses and add feedback.
 - ability to send ratings, feedback and chat log to us.
diff --git a/src/components/Hamburger.svelte b/src/components/Hamburger.svelte
index 7204fcc..4f985ec 100644
--- a/src/components/Hamburger.svelte
+++ b/src/components/Hamburger.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div class="container flex items-center">
-    <button tabindex="0" class="menu" class:open on:click={() => open = !open}>
+    <button tabindex="0" class="focus:outline-none menu" class:open on:click={() => open = !open}>
         <img class="menu-image" src="chevron-right-blue.svg" alt="menu"/>
     </button>
 </div>
@@ -12,6 +12,10 @@
     button {
         padding: 3px;
     }
+
+    button:focus-visible {
+        outline: 5px auto -webkit-focus-ring-color;
+    }
     
     .container {
         width: 2em;
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index a48e5cd..b2179bf 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -22,7 +22,7 @@
 </script>
 
   <aside class="absolute full shadow-lg flex flex-col" class:open>
-    <button tabindex="0" class="new-thread rounded-full m-2 text-base font-sans p-2" disabled={!open} on:click={handleButtonClick}>New Thread</button>
+    <button tabindex="0" class="focus:outline-none new-thread rounded-full m-2 text-base font-sans p-2" disabled={!open} on:click={handleButtonClick}>New Thread</button>
     <nav class="w-full">
       {#if threads !== null}
         {#each threads as thread}
@@ -33,6 +33,9 @@
   </aside>
 
 <style>
+  button:focus-visible {
+    outline: 5px auto -webkit-focus-ring-color; 
+  }
 
   aside {
     z-index: 20;