Cannot access edit menu options with keyboard inside Image Editor

[davidakennedy]

What happened: When I visit /wp-admin/upload.php?item=0000 and navigate to the Edit image panel with a keyboard only, I cannot access the items inside .imgedit-menu These are the rotate, crop buttons, etc.

What I expected: I would expect to be able to focus on those items, visibly see that they have focus and operate the items.

Steps to reproduce: 1. /wp-admin/upload.php?item=0000 2. Navigate into the Edit image tab by pressing the tab key. Press enter. 3. Try to tab to the items inside .imgedit-menu

Thoughts/Solutions: Each of the items are divs. Divs are not naturally focusable by the keyboard. These should be real buttons or links, preferably buttons.

[ocean90]

The issue exists for each screen, where wp_image_editor() is used.

[afercia]

First try to improve image editor accessibility. Please notice in the media views there's not even a real form element (unless I'm missing something), so just tried to make the fields and controls a bit more semantic.
In the proposed patch:

• the main buttons are now buttons
• added some fieldsets and legends to group related controls, screen readers are happy
• added some missing labels
• the help toggles are now keyboard accessible and use aria-expanded attribute

Still to address:

• manage focus after "Scale" button gets activated

[rianrietveld]

Tested 28864.patch with keyboard only: all buttons get focus, works good.

The only thing not working good: after clicking the "scale" button the focus drops out of the panel.

[afercia]

Handle focus after Scale and Restore

[afercia]

Refreshed patch restores focus on the "Scale" button after the frame gets refreshed on "Scale" and "Restore" actions.

[afercia]

Refreshed patch: cross browser input line-height

[afercia]

Refreshed patch with better cross-browser line-height for input fields and minor CSS refinements.

[rianrietveld]

Tested patch 28864.3.patch with keyboard only, works, tabbing forward and backward also keeps the focus inside the media-model, so that's good too.

[afercia]

@todo

• disabled buttons should be really disabled (and not focusable), not just "look" disabled
• new ticket to propose research and development for a new "inline help system"

[florianziegler]

​As discussed, we should probably use disabled="disabled" to make the buttons "not focusable".

Imho, this makes sense from a semantic perspective, as well.

[afercia]

handles buttons disabled state and focus

[afercia]

Updated patch handles the buttons disabled state and tries to manage focus to avoid it gets lost when buttons gets disabled (e.g. undo, redo, crop). Would recommend some devs with strong JavaScript-fu to review the focus management part.

[afercia]

removes some debugging stuff

[afercia]

Please discard patch 4, forgot to clean out some debugging stuff.

[afercia]

ensure the undo button is enabled before moving focus

[afercia]

Refreshed patch to be sure the undo button is enabled before moving focus on it, plus some small CSS refinements mainly for input fields and buttons. Open to discuss about those CSS changes if required.

Please notice the responsive mode of the image editor isn't optimal and is inconsistent, in one place based on floats, in other two places based on absolute positioning. I'd propose to create a new ticket for that, any thoughts more than welcome.

[afercia]

Refreshed patch. I would love to see this in WordPress 4.5. Lots of small changes here so maybe now would be the perfect time for commit consideration since we're at the beginning of a new release cycle.

Not saying it's perfect, but it is an improvement. Further accessibility improvements should go in separate tickets, for example:

• consider to add feedback/confirmation messages using wp.a11y.speak()
• make the crop selection keyboard accessible

Some testing would be nice :)

Related: #26396.

[afercia]

Refreshed patch after [36162]. Also, some cleanup and improvements.

Worth reminding this ticket focuses only on keyboard accessibility. The image editor would need further improvements, for example audible confirmation messages with wp.a11y.speak() after image edits complete successfully, etc. Also, the (lack of) responsive view could be improved.

[afercia]

Refreshed patch after [36171].

[afercia]

In 36223:

Media: make the Image Editor usable with a keyboard.

For accessibility, all interactive controls must be operable from the keyboard.
Replaces <div>s used as UI controls with buttons. Groups some logically-related
form elements.

Fixes #28864.