Checkbox trees can't be toggled from the keyboard

[eatyourgreens]

Screen.Recording.2024-12-08.at.10.08.43.mov

Here, I'm tabbing to the checkbox tree in Chrome, then navigating it with the cursor keys. I should be able to toggle each checkbox on/off with space (or enter) but that doesn't work. I think the keyboard handler for expanding/contracting a list is overriding the handler for the checkbox control.

I fixed this in https://github.com/nismod/irv-jamaica. I'll go back and dig out the changes that I made.

[eatyourgreens]

Here's a checkbox tree in https://github.com/nismod/irv-jamaica. I'm using the cursor keys to navigate the tree (left/right to open and close tree nodes, up/down to move through the tree) and space/enter to select/deselect the focused node. I think this is how a checkbox tree is expected to work from the keyboard.

Screen.Recording.2024-12-08.at.10.19.37.mov

[eatyourgreens]

I think this PR fixed the keyboard handlers for the tree view, as part of an upgrade to Material UI.

• build(deps): upgrade to React 18  irv-jamaica#2

This PR might also be relevant: fixing missing labels for input controls. I'm not sure that unlabelled checkboxes are a problem for the checkbox trees in the global tool.

• fix(frontend): unlabelled form controls irv-jamaica#134