Tabbing to Font size ToggleGroupControl applies a font size

[jeryj]

Description

When using a keyboard, you can't tab past the Typography Size in the Block Settings Sidebar without also applying a font size. There's no way to get past the field and also remain at the default style (no font size option).

Step-by-step reproduction instructions

• Select a paragraph without any font sizes applied
• Tab to the block settings sidebar
• Continue tabbing past the font size selector in the Typography panel
• The first font size option will be applied when you tab to the font size toggle group panel
• Tab past the field, and the option will still be applied

Screenshots, screen recording, code snippet

Screen.Recording.2024-06-28.at.9.44.42.AM.mov

Video shows the cursor on a paragraph in the post editor. Tab keypresses move focus to the Block settings sidebar for the paragraph. There is no option selected for the Typography Font Size. When the tab key moves focus to the font size selector, the first option (small) is selected. Tab key is pressed again to move past the field and the small option is still selected, even though it was never intentionally acted on (enter or space keypress).

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

I also noticed this issue a couple of times last week.

[mirka]

Confirming that this is an issue with the ToggleGroupControl itself, where focusing the component will forcibly select the first option. This should be fixed, especially because semantically this is a radio group and radio groups shouldn't work that way.

There's also a design aspect to this that needs to be resolved (discussed in #64439), because the current design only allows for a focus ring on the entire component and not a single option. But I think it would make sense to at least address the functionality part of this bug even if the design is not ready yet.

[Mamaduka]

Confirming that this is an issue with the ToggleGroupControl itself, where focusing the component will forcibly select the first option.

@mirka, is this by "design" or just a bug in the component?

[mirka]

is this by "design" or just a bug in the component?

Definitely a bug!

[Mamaduka]

It looks like the behavior is coming from this line introduced in #50278.

gutenberg/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx

Line 156 in 1df91fb

toggleGroupControlContext.setValue( value );

cc @ciampo

[ciampo]

Thank you for the ping and report! I'll look into it and report back

[ciampo]

I took a look, here are some considerations:

Currently, option items become selected when focused (ie. clicking them, pressing arrow keys). In that sense, we haven't yet distinguished in code between "this option item received focus because the user tabbed to the component" and "this option item received focus because the user moved the selection between options". We also currently lack the visual cues to show a "focussed but not selected" option item.

We have recently started discussing updates to style and behaviour of ToggleGroupControl in #64439, and I think we're close to reaching a consensus. If we were to implement a solution like the one discussed in #64439 (comment) and following, it feels like it would inherently fix this issue too (thanks to the individual focus styles, different from selected styles). An item could receive focus, but wouldn't be automatically selected. Only when the user explicitly presses arrow keys, (or clicks / pressed the enter key) a new option item is made (assuming that the item is not disabled).

cc @jameskoster