Show other authors editing the same element

[brandonkelly]

Description

Updates full-page element editors to show other authors who are currently viewing/editing the same element.

The user photos have tooltips that explain what they were doing, e.g. “Crystal is viewing this entry.” or “Travis saved this entry at 10:35 AM.”

Additionally, full-page element editors now track whether the element being edited has been changed externally, either directly or upstream, and will start displaying a “This entry has been updated.” notice when that happens, with a “Reload” button.

Related issues

• Add an alert or warning when multiple authors are editing the same entry #8106

[linear]

DEV-1154 Show other authors editing the same element

When editing an element, other authors’ activity for the element should be reported.

[gcamacho079]

• Keyboard users can’t currently access author information. Instead of a title tooltip, it's recommended a keyboard-accessible toggletip is used instead (such as the one introduced in Use inclusive toggletip guidance for InfoIcon.js #12272 ).
  In this case, a toggle button should be nested inside the list item, and should have an accessible name along the lines of "{{username}}, {{active/inactive}} author. More details."
• All user images (SVG and user-uploaded) in the activity container the image can be considered decorative, since the accessible name should come from the toggletip button. You can hide both from the accessibility tree by setting role=" presentation" on the SVG and img.
• For inactive users with no uploaded image, the color contrast of the user icon over its background (--gray-050) is 1.7:1. This should be modified to be at least 3:1.
• The color contrast between active vs. inactive user icons (for users with no image uploaded to the CP) is 2:1. For users with a user image set, the change from inactive to active is a Use of Color issue, as the change of state is only communicated via a change in color.
  Although users can also get that info by viewing the toggletip, it may make sense to implement another visual cue for the author state. (An example of this is the dot indicator that shows on Spotify when shuffle is active.) This would improve the UX because users who aren't able to differentiate the contrast change between states won't have to open each toggletip to see who's actively editing the element.
• When there are enough authors to overflow the container, the contents cause horizontal viewport scrolling. Instead, authors should wrap onto additional lines to prevent horizontal scrolling or overflowing authors should move into a disclosure menu. (Tested on 320px viewport by duplicating li elements.)
• Part of a general notification issue, but when there's a notice with a focusable element inside, we should keep the notice open until the user dismisses it or focus leaves the container, even if the user has a shorter notice duration set. (After another author edited the element, I received the notification on Safari/VO, but the notification closed before the notification readout finished, so I was unable to hit the reload button.)
• Screen reader users do not get the same information that sighted users do about author activity via visible changes to the author list. Changes to the author activity container (such as toggling the faded class, or another author viewing the entry) should be accompanied by announcements via a live region, such as "Another author is editing this entry" or "Another author is viewing this entry." Because it's a bit noisy with other updates happening on the page, and it's not a true "status" message, I'm removing this from the issue list.

[gcamacho079]

@brandonkelly another issue I missed during the first run-through is that users should have the ability to pause/resume auto-updating regions to meet SC 2.2.2: Pause, Stop, Hide.