Image Editor: Incorrect initial focus as crop area receives focus instead of modal dialog

[himanshupathak95]

Description

Identified from https://core.trac.wordpress.org/ticket/65804

When the "Edit media" modal opens (triggered by the Crop button on an Image block), initial keyboard focus is incorrectly sent to the crop area canvas rather than the modal dialog container.

Expected behavior

Per ARIA's dialog pattern and the existing Gutenberg convention: when a modal has multiple flows and actions, focus should be set on the dialog container on open, not on a specific internal
control. The crop area is keyboard-reachable; it just shouldn't be the initial target.

Actual behavior

Focus is placed on the crop area div immediately when the modal mounts. Pressing Tab moves to the first resize handle. Screen readers announce the crop area context rather than the modal title/dialog structure.

Probable fix

Added in #77994, remove focusOnMount from <MediaEditorCanvas>. The <Modal> in MediaEditorModal already uses focusOnMount={true}, which correctly focuses the dialog frame/container. This is consistent with how other complex modals in codebase handle focus.

diff --git a/packages/media-editor/src/components/media-editor/index.tsx b/packages/media-editor/src/components/media-editor/index.tsx
index d1dbab5cd53..02b725e50fb 100644
--- a/packages/media-editor/src/components/media-editor/index.tsx
+++ b/packages/media-editor/src/components/media-editor/index.tsx
@@ -610,7 +610,6 @@ function MediaEditorContent( {
 									<div className="media-editor__canvas-area">
 										{ isImage ? (
 											<MediaEditorCanvas
-												focusOnMount
 												isPlacementActive={
 													isPlacementActive
 												}

Step-by-step reproduction instructions

1. Edit a post that contains an Image block.
2. Select the image block and click the Crop (Edit media) button in the block toolbar.
3. The "Edit media" modal opens.
4. Press Tab once; focus jumps to a resize handle inside the crop area.
5. Using a screen reader, the first announced element after the modal opens is inside the crop area, not the dialog itself.

Screenshots, screen recording, code snippet

See Trac Issue for detailed images and screencasts

Environment info

• WordPress: 7.1-beta2-62825
• Subdirectory: No
• PHP: 8.3.32
• Server: Apache/2.4.68 (Debian)
• Database: mysqli (Server: 12.3.2-MariaDB-ubu2404 / Client: mysqlnd 8.3.32)
• Browser: Chrome 151.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Gutenberg 23.8.0-rc.1
  • Test Reports 1.3.0

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

[talldan]

cc @andrewserong & @ramonjd for visibility

[ramonjd]

The crop area is keyboard-reachable; it just shouldn't be the initial target.

I'll look at this. Thanks for the heads up @talldan