Description

In Site Editor > Styles > Typography

there's now a group of presets font variations. Screenshot:

Under the hood, they are div elements with an ARIA role=button. As such, they are perceived as buttons and users expect them to behave like buttons. However:

• They don't work with the Space bar. I would like to remind that buttons work with both the Enter key and the Space bar key.
• They don't have a tooltip. I would like to remind that all icon buttons must have a tooltip to visually expose their accessible name.

It seems to me there's no reason to use a div element with role=button. To fix the accessibility part I'd suggest to:

• Use a native button element.
• Add a tooltip. Better: add visible text label below the buttons.

From a design perspective, I'm not sure this UI is clear in the first place.

• As a used, I don't know what Presets are and how to use the,
• The selected state is visually indicated only by a border color change.
• I'm not sure I understand how to unselect a preset.

Step-by-step reproduction instructions

• Go to Site Editor > Styles > Typography
• Observe the preset work when activated with the Enter key.
• Observe they don't work when tryint to use the Space bar key.
• Observe there's no tooltip so the variant name is not visible at all.
• Observe it's not clear how to unselect a varaint.

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