ITADN

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

#81505Openhimanshupathak95 创建于 10 天前
[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 条评论