Improved keyboard navigation for tabs, interactions, and fiber-commits
Brian Vaughn committed
Apr 7, 2019 at 09:00 UTC
2b868821d5ade63da9da4befd967377770c6b6fc
7 files changed
+50
-35
src/devtools/views/Profiler/ProfilingImportExportButtons.js
+1
@@ -85,6 +85,7 @@ export default function ProfilingImportExportButtons() {
85
className={styles.Input}
86
type="file"
87
onChange={handleFiles}
88
+ tabIndex={-1}
89
/>
90
<Button
91
disabled={isProfiling}
src/devtools/views/Profiler/SidebarCommitInfo.css
+17
-12
@@ -12,33 +12,38 @@
12
border-top: 1px solid var(--color-border);
13
}
14
15
-.List,
16
-.InteractionList {
15
+.List {
16
list-style: none;
17
margin: 0;
18
padding: 0;
19
}
20
22
-.InteractionList {
21
+.ListItem {
22
margin: 0 0 0.5rem;
23
}
24
26
-.ListItem {
27
- margin: 0 0 0.5rem;
25
+.NoInteractions {
26
+ color: var(--color-dim);
27
}
28
30
-.InteractionListItem,
31
-.InteractionListItemNone {
29
+.Interactions {
30
+ margin: 0 0 0.5rem;
31
+}
32
+.Interaction {
33
+ display: block;
34
+ width: 100%;
35
+ text-align: left;
36
+ background: none;
37
+ border: none;
38
padding: 0.25rem 0.5rem;
39
+ color: var(--color-text);
40
}
34
-.InteractionListItem:hover {
41
+.Interaction:focus,
42
+.Interaction:hover {
43
+ outline: none;
44
background-color: var(--color-hover-background);
45
}
46
38
-.InteractionListItemNone {
39
- color: var(--color-dim);
40
-}
41
-
47
.Label {
48
overflow: hidden;
49
text-overflow: ellipsis;
src/devtools/views/Profiler/SidebarCommitInfo.js
+7
-7
@@ -84,22 +84,22 @@ export default function SidebarCommitInfo(_: Props) {
84
ms
85
</span>
86
</li>
87
- <li className={styles.InteractionList}>
87
+ <li className={styles.Interactions}>
88
<label className={styles.Label}>Interactions</label>:
89
- <ul className={styles.InteractionList}>
89
+ <div className={styles.InteractionList}>
90
{interactions.length === 0 ? (
91
- <li className={styles.InteractionListItemNone}>None</li>
91
+ <div className={styles.NoInteractions}>None</div>
92
) : null}
93
{interactions.map((interaction, index) => (
94
- <li
94
+ <button
95
key={index}
96
- className={styles.InteractionListItem}
96
+ className={styles.Interaction}
97
onClick={() => viewInteraction(interaction)}
98
>
99
{interaction.name}
100
- </li>
100
+ </button>
101
))}
102
- </ul>
102
+ </div>
103
</li>
104
{captureScreenshots && (
105
<li>
src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+15
-10
@@ -32,21 +32,26 @@
32
margin-bottom: 0.5rem;
33
}
34
35
-.List {
36
- list-style: none;
37
- margin: 0;
38
- padding: 0;
39
-}
40
-
41
-.CurrentListItem,
42
-.ListItem {
35
+.CurrentCommit,
36
+.Commit {
37
+ display: block;
38
+ width: 100%;
39
+ text-align: left;
40
+ background: none;
41
+ border: none;
42
padding: 0.25rem 0.5rem;
43
+ color: var(--color-text);
44
}
45
-.ListItem:hover {
45
+.Commit:focus,
46
+.Commit:hover {
47
+ outline: none;
48
background-color: var(--color-hover-background);
49
}
50
49
-.CurrentListItem {
51
+.CurrentCommit {
52
background-color: var(--color-selected-background);
53
color: var(--color-selected-foreground);
54
}
55
+.CurrentCommit:focus {
56
+ outline: none;
57
+}
src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+5
-6
@@ -41,17 +41,17 @@ export default function SidebarSelectedFiberInfo(_: Props) {
41
const time = commitTimes[commitIndex];
42
43
listItems.push(
44
- <li
44
+ <button
45
key={commitIndex}
46
className={
47
selectedCommitIndex === commitIndex
48
- ? styles.CurrentListItem
49
- : styles.ListItem
48
+ ? styles.CurrentCommit
49
+ : styles.Commit
50
}
51
onClick={() => selectCommitIndex(commitIndex)}
52
>
53
{formatTime(time)}s for {formatDuration(duration)}ms
54
- </li>
54
+ </button>
55
);
56
}
57
@@ -71,8 +71,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
71
</Button>
72
</div>
73
<div className={styles.Content}>
74
- <label className={styles.Label}>Rendered at</label>:
75
- <ul className={styles.List}>{listItems}</ul>
74
+ <label className={styles.Label}>Rendered at</label>: {listItems}
75
</div>
76
</Fragment>
77
);
src/devtools/views/Profiler/SnapshotSelector.css
+1
@@ -11,6 +11,7 @@
11
}
12
.Commits:focus {
13
outline: none;
14
+ background-color: var(--color-button-background-focus);
15
}
16
17
.IndexLabel {
src/devtools/views/TabBar.css
+4
@@ -15,6 +15,10 @@
15
.TabCurrent:hover {
16
background-color: var(--color-hover-background);
17
}
18
+.Tab:focus-within,
19
+.TabCurrent:focus-within {
20
+ background-color: var(--color-hover-background);
21
+}
22
23
.TabCurrent {
24
border-bottom: 3px solid var(--color-selected-border);