Improve consistency of the Cancel/OK button pairs

[afercia]

Description

In various parts of the UI, Cancel/OK button pairs are in use where the 'OK' button is the primary action (Save, Apply, Create, etc.). These button paris are mostly used within modal dialogs and popups. Turns out there's some inconsistency especially about the 'Cancel' button type / variant: sometimes it's a secondary button, sometimes a tertiary one. There's no apparent reason for this difference. Also, sometimes the alignment and spacing is not consistent.

• For better consistency, the 'Cancel' buttons should always be either secondary or tertiary.
• The alignment / spacing should be standardized.

Maybe consider to create a new UI component to ensure consistency and avoid repetitive code.

A few example screenshots:

Secondary:

Tertiary:

Tertiary:

Tertiary:

No type specified and inconsistent alignment. This will be likely fixed in #50384

Tertiary:

Secondary:

Tertiary:

Tertiary:

Tertiary:

Tertiary:

Edge cases:

Edit site > VIew mode > Save modal dialog:

Guide modal dialog: Previous, Next, and Finish buttons:

Note about the tertiary button accessibility:

Worth reminding the tertiary button isn't fully accessible as it relies only on color. In absence of color, this button is not distinguishable from normal text as there's no shape to identify the button or any other styling to do that (for example an underline).

Step-by-step reproduction instructions

• Go through the UI and check the styling of the buttons in the screenshots above.

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

[afercia]

Note: as I'm noticing more and more small inconsistencies in the UI, I'd like to propose to create a new dedicated GitHub issue label for that. Suggestions welcome.

[Mamaduka]

cc @WordPress/gutenberg-design

[paaljoachim]

I believe @richtabor would like to take a closer look at this issue.

[richtabor]

I'd like to propose to create a new dedicated GitHub issue label for that.

I don't personally think we need an issue for inconsistencies, but certainly tagging @wordpress/gutenberg-design will help keep them surfaced.

[richtabor]

Very nice.

Buttons

Bringing more consistency is what buttons are used for cancel/ok pairs would be the first step. Looks like some are using secondary, while other tertiary button styles.

Labels

I don't think the labels themselves need to be 1:1 across the board.

They should probably reference the action intended, as these are confirmations. I.e. "Delete Menu" confirmation modal of "Delete Menu", or simply "Delete", not "Confirm". Let's get clear on this before pushing PRs.

The cancel action should always be "Cancel", which looks the be the case (just varying button styles).

[joedolson]

For accessibility, I'd strongly prefer that these actions always used the secondary style. It's a better user experience to be able to recognize controls and know their control boundaries.

[afercia]

For accessibility, I'd strongly prefer that these actions always used the secondary style. It's a better user experience to be able to recognize controls and know their control boundaries.

For reference: the lack of accessibility of the tertiary buttons is a long standing issue and it was reported long time ago in #23890