Make tree reachable by focus
Dan Abramov committed
Apr 3, 2019 at 18:58 UTC
c60f991d8755d64afce71d832364451f8ec3b56c
1 file changed
+32
-16
src/devtools/views/Components/Tree.js
+32
-16
@@ -113,7 +113,7 @@ export default function Tree(props: Props) {
113
<FixedSizeList
114
className={styles.List}
115
height={height}
116
- innerElementType={innerElementType}
116
+ innerElementType={TreeWrapper}
117
itemCount={numElements}
118
itemData={itemData}
119
itemSize={lineHeight}
@@ -129,18 +129,34 @@ export default function Tree(props: Props) {
129
);
130
}
131
132
-// This style override enables the background color to fill the full visible width,
133
-// when combined with the CSS tweaks in Element.
134
-// A lot of options were considered; this seemed the one that requires the least code.
135
-// See https://github.com/bvaughn/react-devtools-experimental/issues/9
136
-const innerElementType = ({ style, ...rest }) => (
137
- <div
138
- style={{
139
- ...style,
140
- display: 'inline-block',
141
- minWidth: '100%',
142
- width: undefined,
143
- }}
144
- {...rest}
145
- />
146
-);
132
+function TreeWrapper({ style, ...rest }) {
133
+ const {
134
+ numElements,
135
+ selectedElementIndex,
136
+ selectElementAtIndex,
137
+ } = useContext(TreeContext);
138
+
139
+ const handleFocus = () => {
140
+ if (selectedElementIndex === null && numElements > 0) {
141
+ selectElementAtIndex(0);
142
+ }
143
+ };
144
+
145
+ // This style override enables the background color to fill the full visible width,
146
+ // when combined with the CSS tweaks in Element.
147
+ // A lot of options were considered; this seemed the one that requires the least code.
148
+ // See https://github.com/bvaughn/react-devtools-experimental/issues/9
149
+ return (
150
+ <div
151
+ tabIndex={0}
152
+ onFocus={handleFocus}
153
+ style={{
154
+ ...style,
155
+ display: 'inline-block',
156
+ minWidth: '100%',
157
+ width: undefined,
158
+ }}
159
+ {...rest}
160
+ />
161
+ );
162
+}