Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal: Increase size of the Close button #66758

Closed
2 of 6 tasks
afercia opened this issue Nov 5, 2024 · 1 comment · Fixed by #66792
Closed
2 of 6 tasks

Modal: Increase size of the Close button #66758

afercia opened this issue Nov 5, 2024 · 1 comment · Fixed by #66792
Assignees
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Status] In Progress Tracking issues with work in progress [Type] Regression Related to a regression in the latest release

Comments

@afercia
Copy link
Contributor

afercia commented Nov 5, 2024

Description

Splitting this out from #66277

In #65102 / #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 #65102 nor #65131 had any accessibility label and any consideration related to accessibility. I'd consider the change from #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.

  • Yes

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

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@afercia afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Regression Related to a regression in the latest release labels Nov 5, 2024
@afercia afercia changed the title Modal: Increase size and of Close button Modal: Increase size of the Close button Nov 5, 2024
@afercia
Copy link
Contributor Author

afercia commented Nov 6, 2024

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:

Image

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Nov 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Status] In Progress Tracking issues with work in progress [Type] Regression Related to a regression in the latest release
Projects
None yet
1 participant