Keyboard navigation in Appearance > Header is broken
|Reported by:||kovshenin||Owned by:||johnbillion|
It's impossible to use the Appearance > Header section with the keyboard because the Enter button will submit the form using the top-most submit input, which is not always the Save Changes button. How to reproduce, in Appearance > Header, using Twenty Eleven:
- Select one of the default header images
- Check the Show header text with your image option
- Enter #111 for Text Color
- Click Save Changes
At this point everything looks fine, but here comes the trouble:
- Enter #222 for Text Color and hit Enter
You'll notice that #222 hasn't been set as the Text Color, instead your chosen header image (in step 1) has been removed, as if the Remove Header Image button was clicked.
- Enter #333 for Text Color and hit Enter
When both Remove Header Image and Restore Original Header Text buttons are not present, the Return key submits the form using Save Changes, as expected. It's not limited to Text Color, but any other element that can submit the form using the Enter key.
I've been facing the exact same problem when doing an options panel for a theme with multiple actions as submit buttons, still haven't found a good solution. Marked as 3.3.2 but I believe it's been around earlier.
Change History (11)
- Component changed from Accessibility to Appearance
- Focuses accessibility added
comment:7 @johnbillion — 7 months ago
- Owner set to johnbillion
- Resolution set to fixed
- Status changed from new to closed