don't show focus outline on mouse or touch events, only keyboard focus.

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.

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;

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;