Modal: Increase size of the Close button

[afercia]

Description

Splitting this out from https://github.com/WordPress/gutenberg/issues/66277

In https://github.com/WordPress/gutenberg/issues/65102 / https://github.com/WordPress/gutenberg/pull/65131 the size of the Modal X close button was changed from the no longer supported 36 pixels to 24 pixels.

The available options in the sizing scheme are 24, 32, and 40 pixels. The 32 pixels would have been a better choices. The target size is an important usability and accessibility feature. There's no need to make it unnecessarily too small. Whenever, possible, when there is enough space, the target size should be reasonably bigger than the minimum required of 24 pixels.

I have to note that neither https://github.com/WordPress/gutenberg/issues/65102 nor https://github.com/WordPress/gutenberg/pull/65131 had any accessibility label and any consideration related to accessibility. I'd consider the change from https://github.com/WordPress/gutenberg/pull/65131 a reduced level of usability and accessibility and, as such, a minor regression.

I'd like to propose to make this button size use at least the compact size variant of 32 pixels.

Step-by-step reproduction instructions

• Test on latest trunk.
• Open any modal e.g. the Preferences one, or the Keyboard shortcut one, or the one to rename a block.
• Observe the size of the X close button of the modal is 24 by 24 pixels.
• Test on WordPress 6.6.
• Repeat the steps above and observe the X close button of the modal is 36 by 36 pixels.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

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

[afercia]

Minor detail: the Spacer component added in https://github.com/WordPress/gutenberg/pull/65131/files#diff-7d9147900701280de3fb09897ba9b4e36f424b18412332fc2f72774ef1afe035R328-R331 to reserve some spacing before the Close button produces a horizontal spacing of 12 pixels. Seems to me this is inconsistent as for most of the cases I can think of the spacing between buttons in the editor is 8 pixels. Screenshot with a background color applied to the buttons to better illustrate: