Changelog: Profile preview cards

I'm pleased to share that we have started rolling out profile preview cards to various parts of Forems 🎉

View user details without visiting their profile page

Hovering over or clicking on an author name will pop up a preview card with key user information, and the option to "Follow"/"Unfollow", without the need to visit that user's profile. The preview card includes a link to the user's full profile if you'd like to view their full profile and posts.

Where to find this feature

Profile preview cards are currently being introduced for users not on small screens (i.e. desktop). This is to minimise friction for mobile users who want to navigate to a user's full profile.

You should already be able to find the profile preview card when reading a post if you hover or click on the author's name:

Very shortly, the feature will also be available on comment author names (already live on DEV):

In the coming weeks, you'll also see this feature appear for author names on the home feed cards.

Interaction patterns and accessibility

This feature should work for all users, including anyone who navigates by keyboard or uses assistive technology.

Mouse users can choose to hover over the author name to view the preview card, or click the author name to have the preview card stay visible regardless of mouse position until the preview is closed by either: clicking the author name, clicking outside of the preview card, or pressing Escape.

Similarly, users who navigate using the keyboard can pop open the preview card by pressing Enter or Spacebar when the author name is focused. When the preview card is opened, focus is sent to the first link inside the preview card so that navigation can continue seamlessly. Similarly, focus is returned to the author name button when the preview is closed.

When using screen-reading software, the author name will communicate whether the preview card pop-up is currently expanded or collapsed.

If you like you can have a look at how we built this feature:

• For the author byline on posts
• For comment authors