Add a selection overview to the media library widget modal

This feature is part of Entity Browser module, if you use entity browser along with core media module then you will be able to see what all items are selected to be uploaded.

it would be nice to add a link to the selection count that shows an overview of all selected items.

Linking to where, exactly? The selection process is all going on inside a dialog so the overview should be in the same dialog. Does this actually mean a hyperlink, or some other "clickable" thing (a button) which reveals it ?

Some guidelines for making this accessible.

1. The summary would be better if it was visible, and didn't require any clicking at all to reveal it.
2. If clicking is used, it would be better if it revealed something adjacent to a disclosure button. A details/summary group would be ideal for that.
3. If clicking is used, it will be overcomplicating things if the summary is displayed somewhere else, further away in the DOM. That would mean special measures are needed to inform assistive tech users that newly-revealed information has appeared elsewhere on the screen.
4. And it would also overcomplicate things if clicking involved moving the focus to another element elsewhere in the DOM, because that's a context shift which may be disorientating, and/or make it awkward to recover your place in the task steps.

An alternative (or additional) way to indicate this would be with a message on each tab, to say how many are selected inside that group. Similar to the ones that Form API vertical tabs provides.

I think these proposals to programatically shift focus around inside a dialog are a very risky idea.

My list in #3 was ordered from feasible to not-feasible. To be clear, I am against #3.4 entirely. (I should be more careful what I suggest.)

The dialog is basically a small window attached to the trigger button ("add media") in the underlying page. We programatically move focus to the dialog, and constrain focus to the dialog until the task is finished (or aborted). That's a straightforward change of context which has lots of affordances to help orientate yourself. Notably, dialogs have a name, and are announced as dialogs (role), and focus moves to the start of the dialog. Those are equivalent to what you get from a normal page load in the browser, or the windows and dialogs of any other desktop application.

It's one thing to programatically move focus to a dialog, which has well-known structure, semantics, and behaviour like these. But it's quite another thing to move focus around inside a dialog. It's rare to find shifts like that inside native application dialogs (I can't think of any) and we see that sort of thing on a nornal web page either.

#5.2

2. The button would be in the button pane of the dialog, not really sure how we could fit the whole summary in there

Hang on, is there a design for this already?

#5.3

3. My first thought was to make it similar to how the vertical tab links work. We replace the modal content and move the focus. Does that work?

I'm not sure I understand this. Does this mean the vertical tabs have gone when you see the summary?

#5.4

Does it help if we have a button 'Back to selection' which shifts the focus back to the state the user came from?

No, I doubt it. This is just adding more complexity (yet another button) to try to get around a bad situation. First you have an unexpected change of context, via a programnatic focus shift. which means users have to reorientate themselves after that. Then you're expecting them to discover (i.e. look for) another control to shift focus back again. This is unusual behaviour; I can't think of an example of where that happens in a native desktop application dialog.

we can't guarantee the items are actually visible on the tab. Specially if there are hundreds of media items in the library. For example, if you selected something in page 2 and 5 of that tab, the tab would show '2 items selected', but when you click that you don't see anything selected.

To me the important information is: "Which media types do I have selections from?" So that if I need to unselect some, because I've reached the limit, then at least I have some idea which tabs to look in. I don't think the pagination matters, or even the exact counts for each type. It's more a case of "I have 5 selections, comprising some images and remote videos. So I don't need to look inside the audio tab". That's what I meant in #18.4 in #3020716-18: Add vertical tabs style menu to media library.

Something that's missing so far is: what information do you want to show to the user?
So far "shows an overview of all selected items inside the modal" is a bit vague. Is this mentioned in a comnent in the previous issue?

@prerna_01 - do you have a screenshot of what you mean in #2?

This is also relevant to #2801307: [META] Support WYSIWYG embedding of media entities and hence to Entity Embed — see #2998005-43: [PP-1] Support Drupal core's Media Library.

I might not have enough history on this particular topic and may be repeating something already considered... but looking over the conversation between @andrewmacpherson and @seanB and thinking about the UI that is currently set up, I'm curious if the idea of adding an additional tab for this has been explored?

I'm thinking of something similar to the #3023806: Add "All" tab with all media items to the media library widget concept. In this case, it would be "Currently selected" as the last tab.

Bumping to major task as this was listed as a should-have on #2834729: [META] Roadmap to stabilize Media Library. Thanks!

I've worked on this issue today during the code sprint at Drupalcon Amsterdam. After some introduction from @seanB on this issue I've created a initial poc.

Like @rainbreaw suggested the patch adds a "Selection" tab which displays a view display containing all selected items.

Fixed test failures

I'm not quite understanding #17.

So, when does this happen? Going in a workflow way should be something like:

1 - Open media library
2 - Select the Items
3 - Click on `Insert Selected` button

In between of this 3 steps would come that screen proposed on #17? is it on:

1 - Open media library
2 - Select the items
3 - Click on `Selected 3 of n` link/button (so there we switch the content of the modal from all media items to only selected items)
4 - Click on `Insert Selected` button?

Ok I get it now, I personally might like better the approach of #17. Might be good (just a thought) adding to the side of the `Selection` String on the tab, the number of items selected, for example: `Selection (3)`. Just an idea, to keep brainstorming.

I think there are 2 things to discuss:

• The option to have always visible the rest of the navigation inside the modal.
• The design solution of using another tab in the same level to fit the current selection.

I don't think adding the current selection at the same level as the rest of the "types of media" navigation is a good solution. They have separate purpose and grouping them together with the exact look&feel is confusing as @seanB says.

I'd compare this workflow with an commerce&cart journey: I totally see the value on reviewing what has been selected but we should visually communicate it's a different path and the user should be able to skip it.

So I really like @seanB's proposal about using the "summary" of what you're doing as a link to the "cart". But I miss the "active state" or a visual clue to know that "I'm reviewing what I've selected". Maybe a title and that it's not a link anymore is a first step, but I'd say it needs more clues.

About removing the tabs on this screen, it removes visual noise&confusion so I'd +1 to that as long as the "Return to the Media library" or "Select more" or something similar says clearly tat you can go back.

Reroll patch created for 9.1.x.