Opened 5 weeks ago
Last modified 4 weeks ago
#65814 accepted defect (bug)
Image editor: Buttons become progressively unreachable with the keyboard
| Reported by: | afercia | Owned by: | joedolson |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.2 |
| Component: | Media | Version: | |
| Severity: | normal | Keywords: | has-screenshots has-patch |
| Cc: | Focuses: | accessibility |
Description (last modified by )
This happens while using the image editor under two conditions:
- Tab through the buttons within the image editor.
- Close and reopen the image editor dialog, then tab through the buttons.
The buttons become 'progressively' unreachable with the keyboard as in:
- The first time the dialog opens, initial focus is set to the 'Crop' button.
- Tab through all the dialog UI.
- Once on the 'Crop' button again, it got a
tabindex="-1"attribute so it is now not focusable and not operable with the keyboard. - Close and reopen the Image editor dialog.
- 'Crop' stays not focusable.
- Initial focus is set to the 'Scale' button.
- Tab through the modal until you reach again the buttons at the top.
- Now the 'Scale' button is not focusable any longer.
- Close and reopen the Image editor dialog again.
- The 'Scale' button stays not focusable.
- Initial focus is set to the 'Image rotation' control.
- Repeat the steps above.
- Each time, one more button will have a
tabindex="-1"attribute until only the 'X' close and 'Back' buttons will be the only focusable controls within the dialog.
See attached video recording to better illustrate.
Attachments (1)
Change History (7)
This ticket was mentioned in PR #12921 on WordPress/wordpress-develop by @rishabhwp.
5 weeks ago
#3
- Keywords has-patch added
imageEdit.focusManager() unconditionally set tabindex="-1" on whichever element it moved focus to when the Image Editor dialog opened, either an admin notice or, when no notice was present, the first tabbable control in the dialog (such as the Crop button).
This is necessary for the admin notice because it is a <div> and is not natively focusable. However, native controls like <button> elements are already focusable and part of the normal Tab order. Adding tabindex="-1" removes them from that order, and the attribute was never removed afterward.
As a result, when the dialog opened without a notice, the initially focused control was permanently removed from the keyboard Tab order. Repeated open and close cycles progressively affected more controls (Crop, then Scale, then the rotation control, and so on).
This PR limits the tabindex="-1" assignment to the admin notice only. When no notice is present, focus is moved directly to the first tabbable control without modifying its tabindex, preserving the expected keyboard navigation.
Trac ticket: https://core.trac.wordpress.org/ticket/65814
## Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Sonnet 5
Used for: Code Review & Testing
#4
@
4 weeks ago
Hi @joedolson, I was able to reproduce the issue and submitted PR to fix it. Please take a look when you get a chance. Thanks!
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Good chance that I either caused this or failed to notice it, so I'm going to accept ownership.