People: Update pattern for success message

[sixhours]

Steps to reproduce:
Update information for a user.

What we see:

The success message appears in a banner message that is relative to the card you're editing.

• Should this banner be full screen?
• Does it make sense for this message to be a banner or should it appear in a snackbar?
• Would using a snackbar be accessible?

[alaczek]

Could you clarify what action did you perform to get this banner? Did you remove a follower?

[sixhours]

It looks like this message appears after you edit a teammate:

And it doesn't disappear when you switch to another view (like Followers). I think that's the confusion.

[alaczek]

I tried different actions within People section:

• sending an invitation,
• accepting invitation as a user
• accepting invitation to follow
• deleting an invitation
  In all those cases the success message appears in the snackbar. Removing the user seems to be the only exception, where the success notification is displayed in full width above the card. If we want to make things consistent we'd have to move this message to snackbar.

Would using a snackbar be accessible?

I didn't dive into this one, but do you have any specific accessibility concerns here? If so, I'm assuming it would be a larger issue to address outside of this ticket, since snackbar messages are used all over Calypso.

One last related thing I noticed while testing - when removing a follower there's no success message. Do you think it warrants a separate issue?

[sixhours]

I flagged this for the Muriel team (added label Muriel) since I think it was originally raised by Courtney, and because they are the snack bar people. :D

[scalarbane2]

@cburton4 @drw158

I tried using Snackbars to represent the message and this is what it looks like.

[cburton4]

Hey y'all,

This is a good first pass 👍A few things I see:

The green used doesn't look consistent with our color palette. I can't be 100% sure but it looks like the color used in the screenshot of the live UI is Green 600.

The pattern for the snackbar would be the correct pattern to use in this instance as the information is optional (although very useful) and would disappear automatically without the user taking an action.

The guidance for snackbars says they should be placed consistently in the bottom left hand corner of the screen for wide screen layouts. That said though we have had several accessibility conversations around why this might not be the best pattern for everyone. @enriquesanchez would love to hear your thoughts and guidance here.

[scalarbane2]

Hello!
I updated the color with exactly the one in the UI components in calypso.

I also tried fixing the snackbar on the bottom left of the screen. In my opinion, it might not be visible to all the users. Meanwhile, I was thinking if it's possible for the snackbar to display relative to where the changes were made. For example, if the user makes a change towards the bottom of the screen, the snackbar should appear at the bottom left and vice-versa. What do you think @cburton4?

[enriquesanchez]

would love to hear your thoughts and guidance here.

Thanks @cburton4 for bringing this to my attention.

The pattern for the snackbar would be the correct pattern to use in this instance as the information is optional (although very useful) and would disappear automatically

Agreed, because of how they are displayed and announced to assistive technology, snackbars should be used only for optional or "nice to know" information.

It is also recommended to leave enough time for automatically disappearing snackbars so users who need more time to process things on the screen can actually see them. One time limit I've seen recommended in other places is around 10s and it' also important to note that messages should be short and clear.

It's important that the snackbar is properly announced to assistive technology, so use of role: status and aria-live: polite is required.

As for positioning, have we tried having it displayed centered? While snackbars are not ideal for users with low vision (particularly those with low peripheral vision), I think having appear in the bottom-center of the screen might help with that.

[scalarbane2]

@cburton4 and @sixhours Let me know what you think.

[davewhitley]

I prefer the snackbar to be located bottom center as well, although this preference is not based on a11y or testing. Because we have many competing elements on the edges of screens (nav drawer, top app bar, etc.) bottom center makes the most sense to me.

Note this would be a component change and would impact all of Calypso. It'd be a pretty big change that would need to be tested.

[alaczek]

Note this would be a component change and would impact all of Calypso. It'd be a pretty big change that would need to be tested.

Yes! I agree this goes beyond this ticket and requires more thorough review as to the impact throughout Calypso. So maybe to bring this particular notification in line with others, we move it to top right, and address the component change in separate issue?

[scalarbane2]

I commented on the wrong post by mistake.

[sixhours]

@scalarbane2 Looks like that update is for a different ticket, #32397 -- they're similar so it's an easy mistake to make. :D

[sixhours]

So it sounds like, going forward, we'll want to open a PR to move the success message into a traditional snackbar for the People section, and moving the snackbar position itself will be addressed in #33441.

I'm moving this back to To Do now that we have mock-ups for this issue, so someone from dev can take a look!

[github-actions]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[github-actions]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.