Re-focus dropdown button before closing menu with keyboard

singingwolfboy commented

2026-04-14 11:49:11 +02:00

Contributor

We are using this code in our project -- thanks so much for sharing it! I've found an interesting accessibility bug where closing a dropdown menu using the keyboard causes the focus to move to the root of the document, rather than returning to the dropdown button. It appears to be because we are using CSS to hide the menu when the editor is not focused, using CSS rules like these:

.ProseMirror-menubar {
    display: none;
}
.ProseMirror-menubar-wrapper:focus-within .ProseMirror-menubar {
    display: flex;
}

When the existing code closes the dropdown menu, the focused element is removed from the DOM, which causes the focus to move to the root of the document. This causes the display: none to apply, because the focus is no longer within the menubar. Then, the JS tries to move the focus to the button in the menubar, but it can't, because the browser won't move focus to an element that has display: none.

Switching the order of these statements appears to make it work as expected. In most cases, it shouldn't matter in what order these statements execute; do you mind making the btn.focus() line run first, so that it properly handles this edge case?

We are using this code in our project -- thanks so much for sharing it! I've found an interesting accessibility bug where closing a dropdown menu using the keyboard causes the focus to move to the root of the document, rather than returning to the dropdown button. It appears to be because we are using CSS to hide the menu when the editor is not focused, using CSS rules like these: ```css .ProseMirror-menubar { display: none; } .ProseMirror-menubar-wrapper:focus-within .ProseMirror-menubar { display: flex; } ``` When the existing code closes the dropdown menu, the focused element is removed from the DOM, which causes the focus to move to the root of the document. This causes the `display: none` to apply, because the focus is no longer within the menubar. Then, the JS tries to move the focus to the button in the menubar, but it can't, because the browser won't move focus to an element that has `display: none`. Switching the order of these statements appears to make it work as expected. In most cases, it shouldn't matter in what order these statements execute; do you mind making the `btn.focus()` line run first, so that it properly handles this edge case?

singingwolfboy added 1 commit

2026-04-14 11:49:11 +02:00