Size Change: -3 B (0%)

Total Size: 1.42 MB

_{compressed-size-action}

Flaky tests detected in 07eca49044ca377a67e5f9ba8fa445c7e6c2a57b.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5331419262
📝 Reported issues:

• [Flaky Test] page-list submenu user interactions #51348 in /test/e2e/specs/editor/blocks/navigation.spec.js

This PR introduces a regression, as the toottip was made visible for accessibility reasons in #49657 / #49659

Icon buttons must always visually expose their accessible name. Tooltips have this specific purpose.

The fact that when clicking with the mouse the tooltip looks somehow 'disconnected' from the button is because there's no visible focus style.

When navigating the menu and a new level is displayed, the back button receives focus. Since it is focused, it is expected that it shows a focus style and a tooltip. Instead, this expected behavior is altered because of visual reasons:

• The desire to hide focus style on mouse click by using :focus-visible instead of :focus can be an anti-pattern in some cases and should always be considered with extreme care.
• The desire to hide the icon buttons tooltip is an anti-pattern and a no-go for accessibility.

Probbly, the best solution would be to not set focus on the Back button when navigating, in the first place. Focus should always go to a meaningful place but not unexpectedly alter other aspects of the UI.

I see there's a broader ongoing discussion now on #51762 and a better solution could be implemented byt not setting focus on the back button, see #51762 (comment)

I'd encourage to opt for that approach.

Lastly, I'd like to kindly as to mark an issue or PR with the accessibility label when it touces important accessibility features like focus, tooltips, and the like. Thanks.