prosemirror/prosemirror-menu
1
0
Fork 0
Code Issues 7 Pull requests Activity

fix tabindex for initial rendering dropdown items #39

Closed
singingwolfboy wants to merge 1 commit from more-accessibility-improvements into master
pull from: more-accessibility-improvements
merge into: prosemirror:master
Conversation 3 Commits 1 Files changed 2 +8 -1
singingwolfboy commented 2026-01-28 10:13:52 +01:00 (Migrated from github.com)
Copy link

When the items in a dropdown are rendered, they should also have their tabindex set to -1 for all items except the first focusable item.

When the items in a dropdown are rendered, they should _also_ have their `tabindex` set to `-1` for all items except the first focusable item.
marijnh commented 2026-01-28 10:29:45 +01:00 (Migrated from github.com)
Copy link

Shouldn't they just be all set to -1, and then rely on the opening action to both set the proper initial focusIndex and mark that one as focusable?

Also, it seems like a good idea to make opening a submenu via the click handler move focus into that menu. Opening a top-level drop-down already does this. I guess the focus logic currently in btn.addEventListener("keydown" should go into openSubmenu?

Shouldn't they just be all set to -1, and then rely on the opening action to both set the proper initial focusIndex _and_ mark that one as focusable? Also, it seems like a good idea to make opening a submenu via the click handler move focus into that menu. Opening a top-level drop-down already does this. I guess the focus logic currently in `btn.addEventListener("keydown"` should go into `openSubmenu`?
singingwolfboy commented 2026-01-28 10:37:19 +01:00 (Migrated from github.com)
Copy link

Shouldn't they just be all set to -1, and then rely on the opening action to both set the proper initial focusIndex and mark that one as focusable?

That's possible as well -- although it is possible to open a submenu without focusing the first item in the submenu, using the "Enter" or "Space" keys instead of the "RightArrow" key. If we solve it that way, then opening the submenu with "Enter" or "Space" would result in all items in the submenu having tabindex="-1", which is not quite the expected behavior, but also not such a big deal. The user is probably aware at this point that they are supposed to navigate through the toolbar using the arrow keys, not by tabbing.

Also, it seems like a good idea to make opening a submenu via the click handler move focus into that menu. Opening a top-level drop-down already does this. I guess the focus logic currently in btn.addEventListener("keydown" should go into openSubmenu?

That seems reasonable to me -- but if you want to maintain focus on the editor when using the mouse, you'll need to test the e.detail attribute to see if the click event was triggered by the mouse or by the keyboard.

> Shouldn't they just be all set to -1, and then rely on the opening action to both set the proper initial focusIndex and mark that one as focusable? That's possible as well -- although it _is_ possible to open a submenu without focusing the first item in the submenu, using the "Enter" or "Space" keys instead of the "RightArrow" key. If we solve it that way, then opening the submenu with "Enter" or "Space" would result in all items in the submenu having `tabindex="-1"`, which is not _quite_ the expected behavior, but also not such a big deal. The user is probably aware at this point that they are supposed to navigate through the toolbar using the arrow keys, not by tabbing. > Also, it seems like a good idea to make opening a submenu via the click handler move focus into that menu. Opening a top-level drop-down already does this. I guess the focus logic currently in `btn.addEventListener("keydown"` should go into `openSubmenu`? That seems reasonable to me -- but if you want to maintain focus on the editor when using the mouse, you'll need to test the `e.detail` attribute to see if the `click` event was triggered by the mouse or by the keyboard.
marijnh commented 2026-01-29 09:50:26 +01:00 (Migrated from github.com)
Copy link

Attached patch initializes these with tabindex -1.

Attached patch initializes these with tabindex -1.

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
prosemirror/prosemirror-menu!39
No description provided.