Allow UI buttons to be pressed via spacebar #55
Conversation
pocka
left a comment
There was a problem hiding this comment.
Thanks, good catch!
The code still triggers drag operation, which is unnecessary. Appending condition in the above early returns would be suffice.
if (ev.key !== FrameCanvas.DRAG_MODE_KEY || /* here */) {
return;
}
// or new `switch` statement here if there are more elements that accept space key.
switch (document.activeElement?.shadowRoot?.activeElement?.tagName) {
case "BUTTON":
case "SOME_ELEMENT_IDK":
return;
default:
break;
}
The reason I didn't just exit early is because if a user clicks a button with the mouse it receives focus, but not visibly. So for instance if a user clicks the copy button and doesn't interact with any other element, the copy button is still focused and hitting the spacebar will click it again rather than allowing drag mode to be entered, which might be confusing. I figured just allowing the user to drag while focused on a button was better. I do think it's a bit strange, but I prefer it to the above scenario. Personally I'd avoid using the spacebar for this sort of action, but in this case I understand that this is replicating figma behavior. |
|
I checked the Figma for this situation and they don't activate drag / pan mode when the focus is on a sidebar element. The correct place to improve keyboard usability is the canvas (non focusable, almost no keyboard controls) rather than the inspector panel. |
aae9925 to
d75951f
Compare
Yeah I have WIP on this that I plan on opening a draft PR for, I have the focusing/drill in/out behavior similar to figma, but am kinda stuck on what to do about the focus looping and allowing the user to navigate to the inspector panel. |
|
@pocka I just pushed up a different solution, I think this one is a bit better, it only allows drag mode to be enabled when the viewport is hovered and focus is not on some other element, thus preventing the keydown handler from stopping normal spacebar actions such as scrolling or pressing buttons in those situations. |
pocka
left a comment
There was a problem hiding this comment.
This feels natural and I like that there is no hacky code here. Focus management code tends to be hacky tangled spaghetti, but this patch is simple and easy to understand!
I left some style-related comments.
d75951f to
6de74a8
Compare
This is a small fix that allows buttons in the UI to be pressed via the keyboard when the spacebar is pressed.
I presume the keydown and keyup listeners were prevent default and stopping propagation in order to prevent the default scrolling behavior of the spacebar. This was also preventing the buttons in the UI from being pressed when they have focus.
This allows buttons to continue to be pressed by checking the active element (within the shadow root) and not preventing default or stopping propagation if it is a button tag.