Fixed focus styles for OwnersStack dropdown toggle button
Brian Vaughn committed
Apr 21, 2019 at 08:59 UTC
91f74a513433a7060c3ff6de6f2df88efb4f12d0
2 files changed
+16
-4
src/devtools/views/Components/OwnersStack.css
+13
-3
@@ -42,13 +42,19 @@
42
border-radius: 0.25rem;
43
display: inline-flex;
44
align-items: center;
45
- padding: 0.25rem;
45
+ padding: 0;
46
flex: 0 0 auto;
47
border: none;
48
background: var(--color-button-background);
49
color: var(--color-button);
50
margin-right: 0.5rem;
51
}
52
+.MenuButtonContent {
53
+ display: inline-flex;
54
+ align-items: center;
55
+ border-radius: 0.25rem;
56
+ padding: 0.25rem;
57
+}
58
.MenuButton:hover {
59
color: var(--color-button-hover);
60
}
@@ -57,10 +63,14 @@
63
color: var(--color-button-active);
64
outline: none;
65
}
60
-.MenuButton:focus-within {
61
- background: var(--color-button-background-focus);
66
+
67
+.MenuButton:focus,
68
+.MenuButtonContent:focus {
69
outline: none;
70
}
71
+.MenuButton:focus > .MenuButtonContent {
72
+ background: var(--color-button-background-focus);
73
+}
74
75
.Modal[data-reach-menu-list] {
76
display: inline-flex;
src/devtools/views/Components/OwnersStack.js
+3
-1
@@ -97,7 +97,9 @@ function ElementsDropdown({
97
<Menu>
98
{/* TODO (tooltips) <Tooltip label="Open elements dropdown"> */}
99
<MenuButton className={styles.MenuButton}>
100
- <ButtonIcon type="more" />
100
+ <span className={styles.MenuButtonContent} tabIndex={-1}>
101
+ <ButtonIcon type="more" />
102
+ </span>
103
</MenuButton>
104
{/* TODO (tooltips) </Tooltip> */}
105
<MenuList className={styles.Modal}>