Skip to content

Commit 9a20ec0

Browse files
author
Alberto Iannaccone
committed
make board selector item focusable
1 parent 0b89c75 commit 9a20ec0

File tree

1 file changed

+31
-9
lines changed

1 file changed

+31
-9
lines changed

arduino-ide-extension/src/browser/boards/boards-toolbar-item.tsx

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,12 @@ export namespace BoardsDropDown {
2828

2929
export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
3030
protected dropdownElement: HTMLElement;
31+
listRef: React.RefObject<HTMLDivElement>;
3132

3233
constructor(props: BoardsDropDown.Props) {
3334
super(props);
3435

36+
this.listRef = React.createRef();
3537
let list = document.getElementById('boards-dropdown-container');
3638
if (!list) {
3739
list = document.createElement('div');
@@ -41,6 +43,14 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
4143
}
4244
}
4345

46+
override componentDidUpdate(prevProps: BoardsDropDown.Props): void {
47+
if (prevProps.coords === 'hidden' && this.listRef.current) {
48+
this.listRef.current.focus();
49+
}
50+
}
51+
52+
override componentDidMount(): void {}
53+
4454
override render(): React.ReactNode {
4555
return ReactDOM.createPortal(this.renderNode(), this.dropdownElement);
4656
}
@@ -61,17 +71,22 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
6171
position: 'absolute',
6272
...coords,
6373
}}
74+
ref={this.listRef}
75+
tabIndex={0}
6476
>
65-
{items
66-
.map(({ name, port, selected, onClick }) => ({
67-
boardLabel: name,
68-
port,
69-
selected,
70-
onClick,
71-
}))
72-
.map(this.renderItem)}
77+
<div className="arduino-boards-dropdown-list--items-container">
78+
{items
79+
.map(({ name, port, selected, onClick }) => ({
80+
boardLabel: name,
81+
port,
82+
selected,
83+
onClick,
84+
}))
85+
.map(this.renderItem)}
86+
</div>
7387
<div
7488
key={footerLabel}
89+
tabIndex={0}
7590
className="arduino-boards-dropdown-item arduino-board-dropdown-footer"
7691
onClick={() => this.props.openBoardsConfig()}
7792
>
@@ -93,6 +108,11 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
93108
onClick: () => void;
94109
}): React.ReactNode {
95110
const protocolIcon = iconNameFromProtocol(port.protocol);
111+
const onKeyUp = (e: React.KeyboardEvent) => {
112+
if (e.key === 'Enter') {
113+
onClick();
114+
}
115+
};
96116

97117
return (
98118
<div
@@ -101,6 +121,8 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
101121
'arduino-boards-dropdown-item--selected': selected,
102122
})}
103123
onClick={onClick}
124+
onKeyUp={onKeyUp}
125+
tabIndex={0}
104126
>
105127
<div
106128
className={classNames(
@@ -235,6 +257,7 @@ export class BoardsToolBarItem extends React.Component<
235257
selectedPort: board.port,
236258
};
237259
}
260+
this.setState({ coords: 'hidden' });
238261
},
239262
}))}
240263
openBoardsConfig={this.openDialog}
@@ -245,7 +268,6 @@ export class BoardsToolBarItem extends React.Component<
245268

246269
protected openDialog = () => {
247270
this.props.commands.executeCommand(ArduinoCommands.OPEN_BOARDS_DIALOG.id);
248-
this.setState({ coords: 'hidden' });
249271
};
250272
}
251273
export namespace BoardsToolBarItem {

0 commit comments

Comments
 (0)