[4.0] Media Manager

[brianteeman]

The new media manager is almost completely inaccessible to any user who is not using a mouse especially when in the list view.

Even though it is tabular data and therefore should be a table the information is presented as a list :(

@zwiastunsw

[wilsonge]

I've been dabbling with trying to make it keyboard accessible the last week (note just trying to make the existing markup give or take work - not trying to convert it to a table unless that's a hard requirement). I can push up some incomplete work on it if it helps too.

[wilsonge]

By the way the one thing I can't work out. If i open the 'dropdown' that has the action buttons (i.e. edit etc), it resets the keyboard focus back to the html tag in the dom. is that expected when the dom is mutated or some weird part of vue.js or something else?

[brianteeman]

Tabular data should be presented as a table.

When you navigate through a table with your eyes you are able to understand what the data represents because you can see that it is in a column called size.

When you navigate through a table with a screen reader you can hear what the data represents because you can hear that it is in a column called size.

That's what all the pull requests using scope did)

Go with a simple unordered list when you only list single-dimensioned or unstructured entities.
Go with a description list when you have structured name-value pairs for one entity.
Go with a table when you list several structured entities that could be compared.

Finally
Do you need some kind of cross-referencing and/or sortable on different properties of the individual items? If so then use tables

Note that you can not sort the media manager list view at all by any of the pseudo columns

[brianteeman]

And I will repeat what I have said since the first public release of this media manager. Requiring a double click to select an item is just plain wrong.

[brianteeman]

By the way the one thing I can't work out. If i open the 'dropdown' that has the action buttons (i.e. edit etc), it resets the keyboard focus back to the html tag in the dom. is that expected when the dom is mutated or some weird part of vue.js or something else?

without seeing the code I cant tell

[wilsonge]

I'll push it into a local branch tomorrow (as i said it's still a long way from finished - so no point in making it a proper PR yet) so I can demo some of it.

[brianteeman]

the main thing about using lists would be that this would be different to every other view in joomla and that you can not do any type of sorting. Both of these issues make it less accessible by design even if the code is tweaked to satisfy automated tests

[zwiastunsw]

I am currently testing a new media manager. I confirm Brian's observations. Please take a few days (5-6) for a detailed evaluation and description.

[wilsonge]

https://github.com/wilsonge/joomla-cms/tree/media-manager-ally

Here's my WIP branch. I'm absolutely certain it won't be close to fully keyboard accessible yet. But should be a step in the right direction.

So what is in here is that tabbing takes you through the images and now will blur out the images to show the action areas. For the dropdown menu you can use enter to open it and escape to close it (no clue if they are the right buttons but that's easy enough to change). But when the menu appears/disappears the focussable area resets. Also hitting enter to open the menu selects the item - didn't have time to look into that yet. Also I've largely limited myself to working on the images in the list view - and then expanding that concept out is easy.

As I said it's still a long way from finished

[brianteeman]

Before I test did you make any changes to the list views as they are the biggest problems

[wilsonge]

No. I've been working on tabbing through the browse view (not sure if there's a name in the interface and browse is what's in the code) and using keyboards to open the menus:

[brianteeman]

Ok. Now I know which parts to test :)

Other than the cropping I'm not sure this is an improvement

[wilsonge]

When you tabbed through the elements before you still actually focussed on the dropdown/select box - they just weren't visable to the user. Now they are and the dropdown can be opened with the keyboard. That's the major change. I don't think I've changed the edit view?

[wilsonge]

Pushed a couple of fixes up - I think this fixes a most the bugs aside from when you open the menu with enter it also selects the item. I've spent the last hour trying to figure that one out and totally failed. So I'll leave it for another PR. Does the browse stuff become vaguely keyboard accessible with that branch?