From f52b56b6debacb231bb63cac0ea6f074c7fe1d83 Mon Sep 17 00:00:00 2001
From: Tony <tonyanziano5@gmail.com>
Date: Fri, 6 Dec 2019 15:23:15 -0800
Subject: [PATCH] Fixed recent bots keyboard nav issue.

---
 CHANGELOG.md                                  |  1 +
 .../editor/recentBotsList/recentBotsList.scss | 37 ++++++++++++-------
 .../editor/recentBotsList/recentBotsList.tsx  |  4 +-
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4abf7a09..9cecee627 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [2009](https://github.com/microsoft/BotFramework-Emulator/pull/2009)
   - [2010](https://github.com/microsoft/BotFramework-Emulator/pull/2010)
   - [2012](https://github.com/microsoft/BotFramework-Emulator/pull/2012)
+  - [2013](https://github.com/microsoft/BotFramework-Emulator/pull/2013)
 
 - [main] Increased ngrok spawn timeout to 15 seconds to be more forgiving to slower networks in PR [1998](https://github.com/microsoft/BotFramework-Emulator/pull/1998)
 
diff --git a/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.scss b/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.scss
index e90b94027..cfe4f5381 100644
--- a/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.scss
+++ b/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.scss
@@ -57,8 +57,8 @@
       color: var(--my-bots-entry-hover-color);
     }
 
-    .recent-bot-action-bar {
-      display: block;
+    .recent-bot-action-bar > button {
+      opacity: 1;
     }
   }
 
@@ -75,34 +75,45 @@
         text-decoration: underline;
       }
     }
+
+    &:focus ~ .recent-bot-action-bar > button {
+      opacity: 1;
+    }
   }
 }
 
 
 .recent-bot-action-bar {
   background-color: transparent;
-  display: none;
+  display: flex;
+  align-items: center;
   height: 100%;
+  width: auto;
   min-width: 16px;
   position: absolute;
   right: 0;
-  top: 2px;
-  width: auto;
+  top: 0;
+  padding-right: 4px;
 
   > button {
     border: 0;
     cursor: pointer;
-    height: 0;
+    height: 16px;
     padding: 0;
-    width: 0;
+    width: 16px;
+    background-color: transparent;
+    opacity: 0;
+
+    &:focus {
+      opacity: 1;
+    }
 
-    &:after {
-      color: var(--my-bots-entry-color);
-      content: "\2716";
-      font-size: 12px;
+    > span {
+      -webkit-mask: url('../../media/ic_close.svg');
+      display: block;
       height: 16px;
-      width: 8px;
-      margin-right: 8px;
+      width: 16px;
+      background-color: var(--my-bots-entry-color);
     }
   }
 }
diff --git a/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.tsx b/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.tsx
index 8d8b8ce06..21661fbce 100644
--- a/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.tsx
+++ b/packages/app/client/src/ui/editor/recentBotsList/recentBotsList.tsx
@@ -68,7 +68,9 @@ export class RecentBotsList extends Component<RecentBotsListProps, {}> {
                       {bot.path}
                     </TruncateText>
                     <div className={styles.recentBotActionBar}>
-                      <button data-index={index} onClick={this.onDeleteBotClick} />
+                      <button data-index={index} onClick={this.onDeleteBotClick}>
+                        <span />
+                      </button>
                     </div>
                   </li>
                 )