Can't navigate to flyouts

[Max Stephen Russell]

We have upgraded to Blockly v13.1.0 with keyboard navigation. Pressing T focuses the toolbox, and Up/Down arrows navigate between categories correctly. However, pressing Enter, Space, or Right Arrow while a category is focused does not open the flyout or move focus into it. I've confirmed that document.activeElement is inside the injectionDiv when the category is focused. What is needed to make Enter/Space/Right Arrow enter the flyout in v13?

Steve Russell

[Maribeth Moffatt]

I can't reproduce this in our test environments, so I'll need more information from you. With a standard category toolbox, the flyout typically opens as soon as you press T, and it would open the first category or the most recently opened category. Then you use the right arrow to navigate into the flyout.

- Do you see any errors in the console?

- Do you have a custom toolbox and/or flyout and if so in what ways have you customized them?

- What type of toolbox/flyout do you have? standard categories with autoclosing flyout or something else?

- Any particular browsers this happens on or is it all?

Thanks,

Maribeth

[Max Stephen Russell]

I should have looked more closely at the initial report I was given. To clarify: pressing T does open the flyout correctly. The problem is that Right Arrow (and Enter/Space) from a focused category does not move focus into the flyout. Aside from this little showstopper, the v13 upgrade seems to have been smooth and clean.

To answer your questions:

- Console errors: None during navigation.
- Custom toolbox: We have a customtoolboxlabel' (kind:"toolboxlabel" from the codelab) used as a visual section divider between categories. It overrides getId() to return '' and canBeFocused() to refrom keyboard navigation. All actual categories use standard Blockly kind: "category". One category (Conditions) has four nested subcategories.
- Flyout type: Standard autoclosing flyout.
- Renderer: 'thrasos'
- Browser: Chrome, Edge, Firefox

After pressing T, document.activeElement is confirmed inside the injectionDiv. Up/Down arrows navigate between categories correctly. Right Arrow, Enter, and Space do nothing.

I commented out all the custom labels as a test, with no different results.

Max Stephen Russell

[Max Stephen Russell]

Now I see a copy/paste paragraph got butchered. Here's the proper thing:

Custom toolbox: We have a custom toolbox item registered as 'toolboxlabel' (kind: "toolboxlabel") used as a visual section divider between categories. It overrides getId() to return '' and canBeFocused() to return false so it is excluded from keyboard navigation. All actual categories use standard Blockly kind: "category". One category (Conditions) has four nested subcategories.

I apologize for the sloppiness.

Steve

[Max Stephen Russell]

Here's more observation after lots of testing and trying:

1. Press T to focus the toolbox. A category receives focus and the flyout opens.
2. Press Enter or ArrowRight.
3. Nothing happens. The flyout remains open, focus stays on the toolbox category, and no navigation occurs.

At the moment Enter is pressed:
- document.activeElement — the toolbox category <div> with class blocklyPassiveFocus (not blocklyActiveFocus)
- Blockly.getFocusManager().getFocusedTree() — Toolbox
- Blockly.getFocusManager().getFocusedNode() — ToolboxCategory
- keyboardNavigationController.isActive — true
- Flyout is visible

Blockly's internal state is correct (toolbox is the focused tree, a category is the focused node, nav is active), but the category element has blocklyPassiveFocus rather than blocklyActiveFocus. The NAVIGATE_IN shortcut does not fire.

When getFocusManager().focusTree(toolbox) is called while a category is already selected, the category briefly receives blocklyActiveFocus (visible on the focusin event), but the subsequent internal setSelectedItem call (triggered by onNodeFocus) applies blocklyPassiveFocus to the same element. By the time any follow-up key is pressed, the category is in passive state.

Is there a supported API to navigate from a toolbox category into its flyout programmatically — one that correctly transitions focus without going through focusTree? Or is the blocklyPassiveFocus state after focusTree(toolbox) a known issue?

[Maribeth Moffatt]

Thanks for the additional info Steve. Unfortunately I'm still not seeing what you're seeing. Any chance you can spin up a minimum repro of this in a playground-type environment?

Do note that you'll want to use the right arrow key though, Enter isn't currently supported as a way to navigate into the category (though it might not be a bad idea to have enter also trigger it?)

Maribeth

[Maribeth Moffatt]

Also, just to check, is your flyout to the right of the toolbox? the arrow keys should map to the logical direction of the flyout so for example in right-to-left mode it would be the arrow key. But I'm not seeing the behavior you mention with the passiveFocus, so I'm assuming this isn't the problem, but wanted to mention to be sure.

[Max Stephen Russell]

Yes, my flyout is on the right. And as for the Enter key opening the flyout, that dumb assumption originated from Google Search AI when I was checking all over the place for ideas on why I was having this sudden problem after upgrading to V13.1.0:

In Blockly v13, you can enter and interact with the flyout using the T and Enter keys. [1]

Here is the exact sequence to access blocks from the flyout:

1. Press T: Moves focus from the main workspace to the toolbox or flyout.
2. Use Arrow Keys: Navigate between category headings.
3. Press Enter: Opens the flyout and moves focus to the first block inside.
4. Use Arrow Keys: Navigate up and down through the blocks in the flyout.
5. Press Enter (again): Selects the highlighted block and places it onto the main workspace in "move" mode.

Steve

[Max Stephen Russell]

Maribeth,

***In the Playground*** at https://blockly-demo.appspot.com/static/tests/playground.html:

1. I click on a category

2. I navigate with the up and down keys among the categories

3. I press the right arrow and . . . NOTHING. The right arrow key does not take me into the flyouts.

Same for the Advanced Playground.

This is the exact behavior that I'm experiencing in my Blockly web app. I  realize now that  on my laptop and on my iPad I have always clicked or tapped into the open flyouts.

So what do we conclude from this? I know you asked for more information, but maybe I should wait to see if I am simply misunderstanding something....

Thank you very much.

Steve Russell

[Mark Friedman]

FWIW, it works for me using Chrome, Firefox and Safafi on a Mac with the Advanced Playground, but not the basic playground.  Perhaps the standard playground isn't using the latest code?  Note that I needed to click the "Enable keyboard navigation" checkbox in the playground settings.

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/bfcd0ab7-5544-4315-8567-8b597bb0c188n%40googlegroups.com.

[Max Stephen Russell]

Mark, It’s not the other way around, is it? Could the checkbox be referring to the former plugin (which I had been using), and the regular Playground is using v13?

Steve

To view this discussion visit https://groups.google.com/d/msgid/blockly/CAOk7GcQywnH_4zcfxW66H%3D-6ANURQ-Mw_HCeaXoipRsBUuKPOg%40mail.gmail.com.

[Aaron Dodson]

The canonical playground with v13.1 is https://raspberrypifoundation.github.io/blockly/packages/blockly/tests/playground.html (and the advanced version on that same domain). The blockly-demo.appspot.com site is running v12, and the advanced playground there I believe is using v12 with an old version of the now-defunct keyboard-experimentation plugin.

Unfortunately we don't have the ability to update the appspot site directly; we are hoping to work with our contacts at Google to set up redirects soon however.

Aaron Dodson (he/him)

Staff Software Engineer

Raspberry Pi Foundation North America

A 501(c)(3) non-profit (81-5480308)

www.raspberrypi.org

To view this discussion visit https://groups.google.com/d/msgid/blockly/CAJ2Uox8LpyaS3QacLfSA9FoJcVm9E_ztA5T4qNvQvXW5Zz4o6A%40mail.gmail.com.

[Mark Friedman]

Sure, it's possible.  I don't know what version of Blockly either of the playgrounds is using for sure, but I do know that they exist in the same codebase and use the same domain in their URLs, so it would be surprising, actually, if they were using different versions of Blockly.  Have you tried to build the playgrounds yourself and test with the latest Blockly?

-Mark

To view this discussion visit https://groups.google.com/d/msgid/blockly/CAJ2Uox8LpyaS3QacLfSA9FoJcVm9E_ztA5T4qNvQvXW5Zz4o6A%40mail.gmail.com.

[Mark Friedman]

Thanks, Aaron!  I just tested, and the keyboard nav for the toolbox in the standard and advanced playgrounds at https://raspberrypifoundation.github.io all work as documented for me on Chrome, Firefox and Safari on my Mac.  

-Mark

To view this discussion visit https://groups.google.com/d/msgid/blockly/CAOEGtusHpd5z_XhUE7B7uoNBQcjwgHPKDDEfwUBzxt1m4CxcyA%40mail.gmail.com.

[Max Stephen Russell]

I guess Aaron has settled the question for me, as to whether this right arrow problem I'm having is related to Blockly v13. I have no problem navigating to the flyouts of  the canonical playground with v13, so I will drop the subject here and work on whatever I'm doing wrong.

Thanks.

Steve Russell

[Max Stephen Russell]

I reinstalled Blockly in a new folder. V13 is working beautifully with no navigation troubles.

Steve