Improved keyboard navigation for tabs, interactions, and fiber-commits

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}

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 {

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>

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;
+}

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>
   );

src/devtools/views/Profiler/SnapshotSelector.css

@@ -11,6 +11,7 @@
 }
 .Commits:focus {
   outline: none;
+  background-color: var(--color-button-background-focus);
 }
 
 .IndexLabel {

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);