From 2b868821d5ade63da9da4befd967377770c6b6fc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 7 Apr 2019 09:00:52 -0700
Subject: [PATCH] Improved keyboard navigation for tabs, interactions, and
 fiber-commits

---
 .../Profiler/ProfilingImportExportButtons.js  |  1 +
 .../views/Profiler/SidebarCommitInfo.css      | 33 +++++++++++--------
 .../views/Profiler/SidebarCommitInfo.js       | 14 ++++----
 .../Profiler/SidebarSelectedFiberInfo.css     | 25 ++++++++------
 .../Profiler/SidebarSelectedFiberInfo.js      | 11 +++----
 .../views/Profiler/SnapshotSelector.css       |  1 +
 src/devtools/views/TabBar.css                 |  4 +++
 7 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index b97c2a317c..a6c0b14b2b 100644
--- a/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -85,6 +85,7 @@ export default function ProfilingImportExportButtons() {
         className={styles.Input}
         type="file"
         onChange={handleFiles}
+        tabIndex={-1}
       />
       <Button
         disabled={isProfiling}
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.css b/src/devtools/views/Profiler/SidebarCommitInfo.css
index cde971ef67..276bbb5708 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -12,31 +12,36 @@
   border-top: 1px solid var(--color-border);
 }
 
-.List,
-.InteractionList {
+.List {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.InteractionList {
-  margin: 0 0 0.5rem;
-}
-
 .ListItem {
   margin: 0 0 0.5rem;
 }
 
-.InteractionListItem,
-.InteractionListItemNone {
-  padding: 0.25rem 0.5rem;
-}
-.InteractionListItem:hover {
-  background-color: var(--color-hover-background);
+.NoInteractions {
+  color: var(--color-dim);
 }
 
-.InteractionListItemNone {
-  color: var(--color-dim);
+.Interactions {
+  margin: 0 0 0.5rem;
+}
+.Interaction {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  padding: 0.25rem 0.5rem;
+  color: var(--color-text);
+}
+.Interaction:focus,
+.Interaction:hover {
+  outline: none;
+  background-color: var(--color-hover-background);
 }
 
 .Label {
diff --git a/src/devtools/views/Profiler/SidebarCommitInfo.js b/src/devtools/views/Profiler/SidebarCommitInfo.js
index 085ce46195..1ee99b2b82 100644
--- a/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -84,22 +84,22 @@ export default function SidebarCommitInfo(_: Props) {
               ms
             </span>
           </li>
-          <li className={styles.InteractionList}>
+          <li className={styles.Interactions}>
             <label className={styles.Label}>Interactions</label>:
-            <ul className={styles.InteractionList}>
+            <div className={styles.InteractionList}>
               {interactions.length === 0 ? (
-                <li className={styles.InteractionListItemNone}>None</li>
+                <div className={styles.NoInteractions}>None</div>
               ) : null}
               {interactions.map((interaction, index) => (
-                <li
+                <button
                   key={index}
-                  className={styles.InteractionListItem}
+                  className={styles.Interaction}
                   onClick={() => viewInteraction(interaction)}
                 >
                   {interaction.name}
-                </li>
+                </button>
               ))}
-            </ul>
+            </div>
           </li>
           {captureScreenshots && (
             <li>
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index 357c3fd4f5..a3759a1a6d 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -32,21 +32,26 @@
   margin-bottom: 0.5rem;
 }
 
-.List {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.CurrentListItem,
-.ListItem {
+.CurrentCommit,
+.Commit {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
   padding: 0.25rem 0.5rem;
+  color: var(--color-text);
 }
-.ListItem:hover {
+.Commit:focus,
+.Commit:hover {
+  outline: none;
   background-color: var(--color-hover-background);
 }
 
-.CurrentListItem {
+.CurrentCommit {
   background-color: var(--color-selected-background);
   color: var(--color-selected-foreground);
 }
+.CurrentCommit:focus {
+  outline: none;
+}
diff --git a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index cf8d1c84b7..8739509575 100644
--- a/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -41,17 +41,17 @@ export default function SidebarSelectedFiberInfo(_: Props) {
     const time = commitTimes[commitIndex];
 
     listItems.push(
-      <li
+      <button
         key={commitIndex}
         className={
           selectedCommitIndex === commitIndex
-            ? styles.CurrentListItem
-            : styles.ListItem
+            ? styles.CurrentCommit
+            : styles.Commit
         }
         onClick={() => selectCommitIndex(commitIndex)}
       >
         {formatTime(time)}s for {formatDuration(duration)}ms
-      </li>
+      </button>
     );
   }
 
@@ -71,8 +71,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         </Button>
       </div>
       <div className={styles.Content}>
-        <label className={styles.Label}>Rendered at</label>:
-        <ul className={styles.List}>{listItems}</ul>
+        <label className={styles.Label}>Rendered at</label>: {listItems}
       </div>
     </Fragment>
   );
diff --git a/src/devtools/views/Profiler/SnapshotSelector.css b/src/devtools/views/Profiler/SnapshotSelector.css
index 4a19d964bf..e4f8aec57d 100644
--- a/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/src/devtools/views/Profiler/SnapshotSelector.css
@@ -11,6 +11,7 @@
 }
 .Commits:focus {
   outline: none;
+  background-color: var(--color-button-background-focus);
 }
 
 .IndexLabel {
diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css
index 07362e6bde..e1a536e07f 100644
--- a/src/devtools/views/TabBar.css
+++ b/src/devtools/views/TabBar.css
@@ -15,6 +15,10 @@
 .TabCurrent:hover {
   background-color: var(--color-hover-background);
 }
+.Tab:focus-within,
+.TabCurrent:focus-within {
+  background-color: var(--color-hover-background);
+}
 
 .TabCurrent {
   border-bottom: 3px solid var(--color-selected-border);