Image Editor: Incorrect initial focus as crop area receives focus instead of modal dialog
[Type] Bug
### 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](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) 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 https://github.com/WordPress/gutenberg/pull/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
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](https://core.trac.wordpress.org/ticket/65804) 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.
- [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.
- [x] Block
- [x] Classic
- [x] Hybrid (e.g. classic with theme.json)
- [ ] Not sure
2 条评论