Finalize the Workspaces UI

I had a call with @amateescu and @jojototh who is the designer of the Workspaces user interface. Below are the notes and items we want to tackle as part of this issue.

Sorry that I don't have any screenshots or visual indicators for each items below. I'll find some time to add this later. For now, refer to the initial prototype here: https://marvelapp.com/2db8i71/screen/26360612

Separate issues needs to be created for each item below.

Umami profile:

• Add more example workspaces when installed with Umami

Workspaces module:

1. Implement the "margin" or "border" around the entire site to visually show that workspaces manage the whole site. The visual clues for the drawer will also become more apparent then. See this screen: https://marvelapp.com/2db8i71/screen/26360612
2. Fix this: #2983105: Recent Workspaces section should be "per user"
   • Then show the 5 most recent workspaces in the drawer (as opposed to the current alphabetical order)
   • In the interim, add the label "Available workspaces" or "Other available workspaces" above the workspace tabs in the drawer to the left (similar to the above prototype)
3. Always show the "View all # workspaces" label and alight it to the right above the workspace tabs in the drawer (similar to the above prototype)
4. Below the label of each workspace tab, add "# changes" to indicate how many changes were made in the workspace (as per the above prototype)
5. Add a new page for each workspace that lists all revision changes. Similar to this prototype screen: https://marvelapp.com/2db8i71/screen/26996437
   • Change the link "Manage workspaces" (plural) to become "Manage workspace" (singular) and link to this new page
   • Instead of the "moderation" functionality we make the merge/publish button available there
6. On the workspace entity form it should not be possible to edit the parent field once the workspace is created
   • This should also be noted in the help description of the parent field
7. Truncate the workspace label in various places
   • In the drawer to ensure the label never span more than two lines (mobile interface needs to be considered)
   • In the operation button in the workspace list view
8. Implement the hover/highlight effect from this screen: https://marvelapp.com/14027i8/screen/17754081
9. Implement better tab order to support keyboard-based navigation

The workspaces UI hasn't had a detailed accessibility review yet. I'll try to find time to review it soon; with a focus on the current state of things, more than the initial designs.

Some WCAG criteria I'm particularly interested in:

• Info and relationships (level A). Making sure that the visual presentation of information has good machine-readable semantics. There are lots of ways that a mis-match could occur here. Numerous text sizes and weights here, and several groupings.
• Use of color (level A). The workspaces UI makes more use of colour than other parts of Drupal's admin UI. It's important that information does not rely on colour to convey meaning. For example: to distinguish workspaces, or to distinguish workspace status. Another example which was already addressed is #2986193: Workspace toolbar item fails WCAG Use-of-color at narrow breakpoint.
• Colour contrast (level AA). There are several different shades of grey background in use, and it's important that text contrast works for all of them.
• Note that WCAG 2.1 introduced a new success criterion for non-text contrast (level AA). The workspace UI designs pre-date that criterion, so it will be useful to review the designs for any problems related to it.

#4.8:

Implement the hover/highlight effect from this screen: https://marvelapp.com/14027i8/screen/17754081

Which elements does this refer to? What does it convey?

#4.9:

Implement better tab order to support keyboard-based navigation

Do you have more detail on this? Before changing anything, it would be good to know what problems there are. I'll try to find time to take this for a spin soon.

Whatever we do here, we want to achieve harmony between the DOM order, visual reading order, and keyboard tabbing order. Ideally these three orders will be the same. There are multiple groupings in the workspaces UI, which all contain interactive controls. Avoid the use of positive tabindex and CSS order property.

1. Implement the "margin" or "border" around the entire site to visually show that workspaces manage the whole site. The visual clues for the drawer will also become more apparent then. See this screen: https://marvelapp.com/2db8i71/screen/26360612

Created an issue for this with an initial patch: #3112690: UX: Elevate the Workspace UI around the site canvas

5. Add a new page for each workspace that lists all revision changes. Similar to this prototype screen: https://marvelapp.com/2db8i71/screen/26996437
Instead of the "moderation" functionality we make the merge/publish button available there

Created a new issue for this point: #3112783: List and count all changes made in a workspace

It looks like the link to the original designs is locked. Any chance we could take a look to it to inform #3425081: Integrate Navigation with Workspaces ?

Bump on the permissions problem for the prototype.

I've added #3481204: Improve UX of Workspace management UI to help with some improvements downstream from user testing of workspaces.

I've managed to unlock the prototype, you should be able to access it now