Font size picker: unexpected change of context when selecting Custom option from select via the keyboard

[afercia]

Description

Observed while working on #69011

When the Font size picker shows more than 5 font sizes, it renders a CustomSelectControl instead of a ToggleGroup (the group of buttons with t-shirt sizes).

The last option within CustomSelectControl is 'Custom'. Actually, this isn't an option to select one of hte provided font sizes. Instead, it's an interactive control to switch the Font size picker to its third UI variant: the UnitControl + RangeControl.

Semantically, this is arguable as a select control is supposed to contain values rather than interactive controls that do something.

The main point is about interaction though. While clicking the 'Custom' option with a pointing device or touch may be kinf od an acceptabel interaction, it is not when using the keyboard.

In fact, it is possible to change the selected option in the CustomSelectControl even keeping the dropdown closed. By just using the Down or Up arrow keys, the option changes. When reaching the last option 'Custom', the whole UI switches to the third variant, which is totally unexpected in this keyboard interaction scenario. Also, focus is lost.

Animated GIF to illustrate mouse and keyboard interaction:

Triggering such an unexpected change of context (the whole UI changes to something entirely different) is also a specific WCAG violation. Not to mention the focus loss.

Step-by-step reproduction instructions

• Use a theme that provides more than 5 font sizes.
• Alternatively, activate Twenty Twenty-Four and manually add one more font size in the theme.json file.
• Select a Paragraph block.
• Observe the font size picker in the inspector shows the CustomSelectControl.
• Use the keyboard to navigate and move focus to the CustomSelectControl.
• Keep the CustomSelectControl. closed and just use the Down arrow key to change the selected option.
• Observe that once you arrow to the last option 'Custom', the entire UI switches to the UnitControl + RangeControl variant.
• Observe there is no information at all that the UI is going to change with this interaction and no information after the UI changes.
• Observe that focus is lost.

Screenshots, screen recording, code snippet

No response

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[afercia]

While there may be ways to mitigate this problem e.g. making sure the dropdown opens and stays open when arrowing, I would strongly recommend to remove the 'Custom' option from the dropdown.

A Listbox isn't expected to contain interactive controls.
Also, the 'Custom' option duplicates the toggle button to switch to the Custom size UI and it's unnecessary.

[himanshupathak95]

Also, the 'Custom' option duplicates the toggle button to switch to the Custom size UI and it's unnecessary.

I agree @afercia and it perfectly makes sense. I think removing the "Custom" option from the select would be better on multiple fronts.

Also, I think whenever hovered on the toggle for entering custom sizes, the unit input field must be focused immediately for a better user experience and accessibility, especially for keyboard users.

If these fixes sound good, then I would like to work on this.

[afercia]

@himanshupathak95 thansl for looking into this issue.

I think whenever hovered on the toggle for entering custom sizes, the unit input field must be focused immediately

Do you mean the 'Set custom sizeicon button? I'm not sure focus should be moved when pressing it. The button does have anaria-pressed="false"attribute that changes totrue` to inform it has been activated. Focud should be moved only when strictly necessary.

Rather, I don't like the fact the aria-label of the button changes dynamically depending on the UI state.
It changes from aria-label="Set custom size" to aria-label="Use size preset". A label should not be dynamic, as also mentioned in other conversations in past issues and PRs. That's a pattern used also in other places though and should be addressed separately.