Improve media views accessibility

[afercia]

Splitting this out from #29371

About the media grid:

Replying to bramd:

I had some thoughts about this and discussed it on the WP a11y mailinglist, where people seem to agree.

Currently, we use aria to indicate the list as a group of checkboxes, I propose we make that a listbox with multiselection if applicable (role="listbox", aria-multiselect). Then it also makes sense to mark the whole thing with aria role application to indicate we handle focus inside. We can rely on the arrow key navigation and make the list focusable by tabbing to it. This means the individual items will get a tabindex of -1. As an added bonus, we get the screenreader reading indexes for freee (e.g. "Testfile" item 1 of 3).

First try to apply @bramd idea, the attachment grid has now an ARIA role of "application" and seems it's working nicely. Added ARIA roles, attributes, improved keyboard accessibility and screen readers feedback. It's complex so please bear with me :) It's just a first try and there are still many things to refine.
Any thoughts more than welcome, please test extensively.

Basically, when in the attachment grid:

• use arrows to navigate through attachments in any direction
• use tab to navigate sequentially
• once an attachment is selected, additional controls "Deselect" and "Edit details" will be announced, use tab to focus and activate them
• arrows navigation will skip the additional controls so it's possible to navigate quickly through attachments even when many of them are selected

Focus is no more automatically moved to the Details sidebar. The idea is to have a dedicated control to move to the Attachment Details that will be revealed just when the attachment is selected.

Many other details, TL;DR

Some things to improve:

• labels refinements
• add a control to go back from Attachment Details to the currently selected image
• better "saved" feedback message after editing attachment details
• inline help
• visual: designers feedback welcome

[afercia]

Additional notes, things to improve:

• disabled buttons should be really disabled, not just look disabled via CSS
• sometimes focus is no more constrained in the modals (e.g. end of media items navigation when using the keyboard)
• aria-selected should be used only when attachments are actually selectable (e.g. not in the Media Library grid mode)
• edit attachment details modal (media.view.MediaFrame.EditAttachments): navigation with left and right arrows conflicts with screen readers arrows navigation, propose to use Alt+Shift as modifiers
• role=application needs to be set on a proper element wrapping only the attachments list

[ceo]

Okay, so went through this on stable (4.0.1), nightly (4.1beta2-30673) and on trunk with the patch using VO in Safari (Yosemite). Went through on stable for context because I'm pretty sure the slight functionality I get in beta2 is from the fix for #30386.

In any case, on nightly selecting an image pops me over to the URL field within Attachment Details and I can edit everything within there and insert the selected image. (At least so long as I don't want to select anything else instead.)

On trunk with the patch, opening the Add Media panel puts me outside of it, so I have to use the web rotor to get to the Insert Media heading. From there I can't get into the grid at all. (Can't within the Media Library from the navigation menu either, by the way.) Arrowing around I skip over the grid entirely and go from the Search field to the Insert into post button.

[arush]

Tested with IE 10 and 11 with Jaws and this totally does not work. Tested with NVDA latest release and Firefox latest and it works flawlessly. Not sure what to do about IE and VO/Jaws as FF supports about 85% of the accessibility standards and the others drop significantly.

[afercia]

Thanks to everyone for testing, after the ​Monday testing meeting on Slack now we have a precious feedback.

Testers reported using role=listbox for the media grid and role=option for the media grid items:

• works nicely in Firefox + NVDA @arush reported "this is the best fix ever. As long as I use Firefox and Nvda I can insert media with no problem"
• works with some issues in Chrome + NVDA (tested by me)
• doesn't work at all in IE 10 and 11 + JAWS
• doesn't work at all in Safari + VoiceOver

Spent some time doing additional testing the best I can and tried a crazy thing: testing with Internet Explorer 8 and JAWS 15 and, surprisingly, it works. It's not perfect, but it works. I can select, do multiple selection, deselect, edit details, etc. Wondering why it doesn't work in IE 10 and 11.
I'm fairly confident with a bit of research and development we can get better results but I need testers :)

Found this test case by James Craig, WAI-ARIA editor and many other things, which is basically the same thing we're trying with the media grid: a div with role=application with a listbox and option items:
​http://cookiecrook.com/test/aria/multiselect/listbox.html
I'd like to invite everyone to test on different platforms, browsers, screen readers and report results here.

Alternatively, I've seen some improvements using list and listitem and to my understanding, listbox and option are internally mapped as list and listitem by the various ​accessibility APIs.
It would be nice to have help from some experts, anyway it's worth doing some more investigations.

[afercia]

Related: #30386

[wonderboymusic]

Fire up grunt watch please and edit the new media modules - this patch uses media-views.js

[afercia]

Replying to wonderboymusic:

Fire up grunt watch please and edit the new media modules - this patch uses media-views.js

I know I know :) patch needs a refresh, as well as other patches after the media views split. Will do when/if the accessibility team will make a decision about how to proceed, this patch was still in an "experimental" stage.

[rianrietveld]

Discussed this in the accessibility team meeting:
We need to replace this ticket for clearer and smaller tickets.
So this one we close.

[afercia]

Just wanted to add experimentation and research on this ticket was precious. We also made some mistakes :) While research done here has a historic value, a new, better, approach would be trying to address smaller issues with smaller patches, one by one.