Fonts Library: Fonts modal dialog action buttons accessibility

[afercia]

Description

In the Fonts modal dialog, the action buttons at the bottom of the dialog offer room for accesisbility improvements.

1
Proximity of controls.
See the related core Trac ticket at https://core.trac.wordpress.org/ticket/40822
Low vision users, users who use screen amgnifiers, etc. struggle to find user interface controls that are places far from each other. In core, over time, we've been fixing several occurrences where buttons or other controls were unnecessarily (and inconsistently) places far from each other.
Also in Gutenberg, most of the instances of action buttons ore other controls that are logically related are places close each other.

Instead, in the Fonts modal dialog, the 'Delete' button and the 'Update' button are places at the opposite bottom corners of the dialog. Screenshot:

In most of the other modal dialogs buttons are placed close each other, and there's a good reason for that. Example screenshot:

In core, such buttons are placed close each other even when one of the buttons action is a destructive action. Example screenshot:

The buttons in the Fonts modal dialog appeaer to be inconsistent with other UIs in Gutenberg and thei rpalcement is not in line with the best practices established in core.

2
Controls for destructive actions should be red.
As a long established pattern, destructive actions in core use the color red.
I'm not sure why, but the 'Delete' button in this modal dialog is blue. I don't think we should deviate from clear patterns that have been established in core since ages.

Step-by-step reproduction instructions

• Go to Site editor > Styles > Typography.
• Click the 'Aa' icon labeled 'Manage fonts' to open the Fonts modal dialog.
• Make sure you have at least one custom font installed, e.g. a font installed from Google.
• Go to the font details sub-view by clicking on its name.
• Observe at the bottom of the modal dialog the 'Delete' button is blue and it's placed in the bottom left corner, while the 'Update' button is placed in the bottom right corner.

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

[matiasbenedetto]

Thanks for reporting this. Here's a potential fix for it: #58212