Fixes #59459

What?

The global styles Varaition are made with foucsable div elements instead of native buttons.
When using div rather than a button, all the native button features and intereaction should be re-implemented. That appears to not be the case with the current implementation.

• Variations don't work with the Space bar, they only work with the Enter key.
• There's no Tooltip or any other text to visually expose the accessible name.
• The focus style is inconsistend, as it's a custom style and not the standard one implemented for buttons.
• The active state is communicated only with a color change of the visual outline, which i sinsufficient.
• The variant description, if any, is appended to the label. This is far from ideal. Labels are meant to provide the accessible name of a control, that's not the place for descriptions.

Why?

Overall, given the amount of code that would be required to make a focusable div element fully accessible and behave like a button, it's way better to use a button element. There's no reason to not use a button element a smodern browsers allow to fully style them.

More importantly, custom implementation should be avoided as they defeat the purpose of building a library of reusable component in the first place. It's unlikely that custom implementations have the same level of accessibility and the same design consistnecy of the base components. Instead of implementing custom interactive controls in the UI, the base component should be used and if a new variant of a base component is desired that should be added to the base component.

This PR replaces the focusable div elements with a Button compoennt, becuase the Button brings in all the accessibility, interaction, and base styles like focus style that we need to make a better usable and accessible UI.

How?

• Replaces the focusable div custom implementation with a Button component.
• Moves the description out from the label to a visually hidden description referenced by aria-describedby.
• Removes no longer necessary JS and CSS.
• Changes the active styling to use a shape instead of just a color change. I opted to use the checkmark icon as that's already used as a pattern to indicate 'selected' in other parts of hte editor e.g. dropdown menus and elsewhere.

Testing Instructions

• Set Twenty Twenty-Four as active theme.
• Edit the src/wp-content/themes/twentytwentyfour/styles/maelstrom.json file and add a description to the style variant e.g.: "description": "This is the Maelstrom description"
• Go to Site Editor > Design > Styles
• Observe the styles variations in the navigation panel have no relevant visual changes.
• Inspect the source and observe the variations are now button elements.
• Check the variations work with click, Enter key and Space bar key.
• Check these instances of the variations don't show a tooltip because the variation name is already shown on hover and focus.
• Check the focus style is consistent with one used for other controls, as it's now the default focus style of the Button component.
• Inspect the source and observe the Maelstrom variant button does have a visually hidden description This is the Maelstrom description.
• Select one of the variations and observe the active state is visually provided by a checkmark icon at the top right of the variation. Semantically it's an aria-current="true" attribute, this hasn't changed.
• Switch the Site Editor to edit mode.
• Go to Styles > Typography > Presets
• Observe the variations are not button elements and don't have relevant visual changes.
• Check the variations work with click, Enter key and Space bar key.
• Check these instances of the variations do show a tooltip to visually expose the variation name.
• Check the focus style is consistent.
• Inspect the source and observe the Maelstrom variant button does have a visually hidden description.
• Select one of the variations and observe the active state is visually provided by a checkmark icon.
• Go to Styles > Typography > Presets
• Repeat the steps above.
• Go to Styles > Browse styles
• Repeat the steps above.

Testing Instructions for Keyboard

Screenshots or screencast

Before with focus and active states. Notice the states difference is basically only a color change of the visual outline (although there's a barely noticeable change in the outline thickness). Basically this is color alone, which is insufficient.

Before with focus and active states: