Fixed recent bots keyboard nav issue. (#2013)

microsoft · Dec 9, 2019 · 483f53f · 483f53f
1 parent 7e51dcf
commit 483f53f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git 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)
   - [2014](https://github.com/microsoft/BotFramework-Emulator/pull/2014)
   - [2015](https://github.com/microsoft/BotFramework-Emulator/pull/2015)
   - [2017](https://github.com/microsoft/BotFramework-Emulator/pull/2017)

diff --git 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
@@ -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>
                 )