From dbf2899370d6adc64b92c9f57ae06352b6c505e0 Mon Sep 17 00:00:00 2001
From: mattermost-code <matty-code@mattermost.com>
Date: Fri, 28 Aug 2026 22:05:40 -0400
Subject: [PATCH] [MM-67123] Prevent mention clicks in preview from submitting
 the draft (#38114)

* [MM-67123] Prevent mention clicks in preview from submitting the draft

Profile popover triggers rendered as <button> had no type, so they
defaulted to submit and posted the composer form instead of opening
the user profile.

Co-authored-by: maria.nunez <maria.nunez@mattermost.com>

* [MM-67123] Update snapshots for profile popover button type

Popover triggers now set type="button", which updates snapshots
that render avatars, user names, and mention controls.

Co-authored-by: maria.nunez <maria.nunez@mattermost.com>

* [MM-67123] Add Playwright coverage for preview mention clicks

Clicking a resolved at-mention in composer preview should open
the profile popover and leave the draft unsent.

Co-authored-by: maria.nunez <maria.nunez@mattermost.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: maria.nunez <maria.nunez@mattermost.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../src/ui/components/channels/post_create.ts | 14 +++++
 .../mentions/preview_mention_popover.spec.ts  | 60 +++++++++++++++++++
 .../__snapshots__/user_list.test.tsx.snap     |  4 ++
 .../admin_user_card.test.tsx.snap             |  4 ++
 .../system_user_detail.test.tsx.snap          |  7 +++
 .../__snapshots__/at_mention.test.tsx.snap    |  7 +++
 .../components/at_mention/at_mention.test.tsx | 15 ++++-
 .../__snapshots__/panel_body.test.tsx.snap    |  4 ++
 .../profile_picture.test.tsx.snap             |  1 +
 .../profile_popover_controller.test.tsx       | 44 ++++++++++++++
 .../profile_popover_controller.tsx            |  4 ++
 .../__snapshots__/user_profile.test.tsx.snap  |  4 ++
 .../__snapshots__/avatars.test.tsx.snap       |  9 +++
 13 files changed, 176 insertions(+), 1 deletion(-)
 create mode 100644 e2e-tests/playwright/specs/functional/channels/mentions/preview_mention_popover.spec.ts
 create mode 100644 webapp/channels/src/components/profile_popover/profile_popover_controller.test.tsx

diff --git a/e2e-tests/playwright/lib/src/ui/components/channels/post_create.ts b/e2e-tests/playwright/lib/src/ui/components/channels/post_create.ts
index 15af52e7ff23..0ea6c718219d 100644
--- a/e2e-tests/playwright/lib/src/ui/components/channels/post_create.ts
+++ b/e2e-tests/playwright/lib/src/ui/components/channels/post_create.ts
@@ -23,6 +23,8 @@ export default class ChannelsPostCreate {
     readonly suggestionOptions;
     readonly selectedSuggestion;
     readonly filePreview;
+    readonly previewButton;
+    readonly previewArea;
 
     // Burn-on-Read elements
     readonly burnOnReadButton;
@@ -46,6 +48,8 @@ export default class ChannelsPostCreate {
         this.suggestionOptions = this.suggestionList.getByRole('option');
         this.selectedSuggestion = this.suggestionList.getByTestId('suggestion-selected');
         this.filePreview = container.getByTestId('file-preview-container');
+        this.previewButton = container.getByRole('button', {name: 'preview'});
+        this.previewArea = container.locator('.textbox-preview-area');
 
         // Burn-on-Read elements
         // Use a flexible locator that matches the aria-label pattern
@@ -192,6 +196,16 @@ export default class ChannelsPostCreate {
         await this.emojiButton.click();
     }
 
+    async togglePreview() {
+        await expect(this.previewButton).toBeVisible();
+        await this.previewButton.click();
+    }
+
+    async clickMentionInPreview() {
+        await expect(this.previewArea).toBeVisible();
+        await this.previewArea.locator('.mention-link').click();
+    }
+
     async waitUntilFilePreviewContains(files: string[], timeout = duration.ten_sec) {
         await waitUntil(
             async () => {
diff --git a/e2e-tests/playwright/specs/functional/channels/mentions/preview_mention_popover.spec.ts b/e2e-tests/playwright/specs/functional/channels/mentions/preview_mention_popover.spec.ts
new file mode 100644
index 000000000000..ae2f393e9e64
--- /dev/null
+++ b/e2e-tests/playwright/specs/functional/channels/mentions/preview_mention_popover.spec.ts
@@ -0,0 +1,60 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, setWysiwygUserPreference, test} from '@mattermost/playwright-lib';
+
+/**
+ * @objective Clicking a user at-mention in the composer preview opens the profile popover
+ * and does not post the draft.
+ *
+ * @precondition Two users on the same team. The markdown composer preview is available
+ * (WYSIWYG editor preference is off).
+ */
+test(
+    'MM-67123 clicking a user mention in composer preview opens the profile popover',
+    {tag: '@mentions'},
+    async ({pw}) => {
+        // # Create two users on the same team and disable the WYSIWYG editor so preview is available
+        const {adminClient, user, userClient, team} = await pw.initSetup();
+        await setWysiwygUserPreference(userClient, user.id, false);
+
+        const mentionedUser = await adminClient.createUser(await pw.random.user('mentioned'), '', '');
+        await adminClient.addToTeam(team.id, mentionedUser.id);
+        const townSquare = await adminClient.getChannelByName(team.id, 'town-square');
+        await adminClient.addToChannel(mentionedUser.id, townSquare.id);
+
+        const {channelsPage} = await pw.testBrowser.login(user);
+        await channelsPage.goto(team.name, 'town-square');
+        await channelsPage.toBeVisible();
+
+        const unique = `preview-mention-${pw.random.id()}`;
+        const {postCreate} = channelsPage.centerView;
+
+        // # Type a draft that mentions the other user via autocomplete so the mention resolves
+        await postCreate.writeMessage(`@${mentionedUser.username}`);
+        await expect(postCreate.suggestionList).toBeVisible();
+        await postCreate.suggestionOptions.first().click();
+        await postCreate.input.pressSequentially(` ${unique}`);
+        const draft = await postCreate.getInputValue();
+
+        // # Show the composer markdown preview
+        await postCreate.togglePreview();
+        await expect(postCreate.previewArea).toBeVisible();
+        await expect(postCreate.previewArea).toContainText(`@${mentionedUser.username}`);
+        await expect(postCreate.previewArea).toContainText(unique);
+
+        // # Click the rendered mention in the preview
+        await postCreate.clickMentionInPreview();
+
+        // * The mentioned user's profile popover opens
+        await expect(channelsPage.userProfilePopover.container).toBeVisible();
+        await expect(channelsPage.userProfilePopover.container).toContainText(`@${mentionedUser.username}`);
+
+        // * The draft remains in the composer and is not posted
+        await expect(postCreate.input).toHaveValue(draft);
+        await expect(postCreate.previewArea).toContainText(unique);
+
+        const lastPost = await channelsPage.getLastPost();
+        await expect(lastPost.container).not.toContainText(unique);
+    },
+);
diff --git a/webapp/channels/src/components/__snapshots__/user_list.test.tsx.snap b/webapp/channels/src/components/__snapshots__/user_list.test.tsx.snap
index 44d76a957e57..994a717d6296 100644
--- a/webapp/channels/src/components/__snapshots__/user_list.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/user_list.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`components/UserList should match default snapshot when there are users
         aria-haspopup="dialog"
         class="status-wrapper style--none"
         style="border-radius: 50%; width: 32px; height: 32px;"
+        type="button"
       >
         <span
           class="profile-icon "
@@ -53,6 +54,7 @@ exports[`components/UserList should match default snapshot when there are users
               aria-expanded="false"
               aria-haspopup="dialog"
               class="user-popover style--none"
+              type="button"
             >
               Someone
             </button>
@@ -80,6 +82,7 @@ exports[`components/UserList should match default snapshot when there are users
         aria-haspopup="dialog"
         class="status-wrapper style--none"
         style="border-radius: 50%; width: 32px; height: 32px;"
+        type="button"
       >
         <span
           class="profile-icon "
@@ -108,6 +111,7 @@ exports[`components/UserList should match default snapshot when there are users
               aria-expanded="false"
               aria-haspopup="dialog"
               class="user-popover style--none"
+              type="button"
             >
               Someone
             </button>
diff --git a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
index 7b557d4706e5..16ced7759ae1 100644
--- a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match d
         aria-haspopup="dialog"
         class="status-wrapper style--none admin-user-card"
         style="border-radius: 50%; width: 128px; height: 128px;"
+        type="button"
       >
         <span
           class="profile-icon "
@@ -81,6 +82,7 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
         aria-haspopup="dialog"
         class="status-wrapper style--none admin-user-card"
         style="border-radius: 50%; width: 128px; height: 128px;"
+        type="button"
       >
         <span
           class="profile-icon "
@@ -142,6 +144,7 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
         aria-haspopup="dialog"
         class="status-wrapper style--none admin-user-card"
         style="border-radius: 50%; width: 128px; height: 128px;"
+        type="button"
       >
         <span
           class="profile-icon "
@@ -201,6 +204,7 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
         aria-haspopup="dialog"
         class="status-wrapper style--none admin-user-card"
         style="border-radius: 50%; width: 128px; height: 128px;"
+        type="button"
       >
         <span
           class="profile-icon "
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
index 8bbd390b7dcc..f9b296ea3bee 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
@@ -38,6 +38,7 @@ exports[`SystemUserDetail should match default snapshot 1`] = `
               aria-haspopup="dialog"
               class="status-wrapper style--none admin-user-card"
               style="border-radius: 50%; width: 128px; height: 128px;"
+              type="button"
             >
               <span
                 class="profile-icon "
@@ -341,6 +342,7 @@ exports[`SystemUserDetail should match snapshot if MFA is enabled 1`] = `
               aria-haspopup="dialog"
               class="status-wrapper style--none admin-user-card"
               style="border-radius: 50%; width: 128px; height: 128px;"
+              type="button"
             >
               <span
                 class="profile-icon "
@@ -644,6 +646,7 @@ exports[`SystemUserDetail should not fetch CPA data if disabled 1`] = `
               aria-haspopup="dialog"
               class="status-wrapper style--none admin-user-card"
               style="border-radius: 50%; width: 128px; height: 128px;"
+              type="button"
             >
               <span
                 class="profile-icon "
@@ -947,6 +950,7 @@ exports[`SystemUserDetail should not show manage user settings button when user
               aria-haspopup="dialog"
               class="status-wrapper style--none admin-user-card"
               style="border-radius: 50%; width: 128px; height: 128px;"
+              type="button"
             >
               <span
                 class="profile-icon "
@@ -1250,6 +1254,7 @@ exports[`SystemUserDetail should show manage user settings button as activated 1
               aria-haspopup="dialog"
               class="status-wrapper style--none admin-user-card"
               style="border-radius: 50%; width: 128px; height: 128px;"
+              type="button"
             >
               <span
                 class="profile-icon "
@@ -1559,6 +1564,7 @@ exports[`SystemUserDetail should show manage user settings button as disabled wh
               aria-haspopup="dialog"
               class="status-wrapper style--none admin-user-card"
               style="border-radius: 50%; width: 128px; height: 128px;"
+              type="button"
             >
               <span
                 class="profile-icon "
@@ -1862,6 +1868,7 @@ exports[`SystemUserDetail should show the activate user button as disabled when
               aria-haspopup="dialog"
               class="status-wrapper style--none admin-user-card"
               style="border-radius: 50%; width: 128px; height: 128px;"
+              type="button"
             >
               <span
                 class="profile-icon "
diff --git a/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap b/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
index 724484a18eae..36b8acda0b98 100644
--- a/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
+++ b/webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
@@ -65,6 +65,7 @@ exports[`components/AtMention should match snapshot when mentioning current user
     aria-expanded="false"
     aria-haspopup="dialog"
     class="style--none mention--highlight"
+    type="button"
   >
     <span
       class="mention-link"
@@ -81,6 +82,7 @@ exports[`components/AtMention should match snapshot when mentioning user 1`] = `
     aria-expanded="false"
     aria-haspopup="dialog"
     class="style--none"
+    type="button"
   >
     <span
       class="mention-link"
@@ -97,6 +99,7 @@ exports[`components/AtMention should match snapshot when mentioning user contain
     aria-expanded="false"
     aria-haspopup="dialog"
     class="style--none"
+    type="button"
   >
     <span
       class="mention-link"
@@ -114,6 +117,7 @@ exports[`components/AtMention should match snapshot when mentioning user contain
     aria-expanded="false"
     aria-haspopup="dialog"
     class="style--none"
+    type="button"
   >
     <span
       class="mention-link"
@@ -130,6 +134,7 @@ exports[`components/AtMention should match snapshot when mentioning user followe
     aria-expanded="false"
     aria-haspopup="dialog"
     class="style--none"
+    type="button"
   >
     <span
       class="mention-link"
@@ -147,6 +152,7 @@ exports[`components/AtMention should match snapshot when mentioning user with di
     aria-expanded="false"
     aria-haspopup="dialog"
     class="style--none"
+    type="button"
   >
     <span
       class="mention-link"
@@ -163,6 +169,7 @@ exports[`components/AtMention should match snapshot when mentioning user with mi
     aria-expanded="false"
     aria-haspopup="dialog"
     class="style--none"
+    type="button"
   >
     <span
       class="mention-link"
diff --git a/webapp/channels/src/components/at_mention/at_mention.test.tsx b/webapp/channels/src/components/at_mention/at_mention.test.tsx
index c5fc64025ebe..67e22f5c0d41 100644
--- a/webapp/channels/src/components/at_mention/at_mention.test.tsx
+++ b/webapp/channels/src/components/at_mention/at_mention.test.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 
 import {General} from 'mattermost-redux/constants';
 
-import {render, renderWithContext} from 'tests/react_testing_utils';
+import {render, renderWithContext, screen} from 'tests/react_testing_utils';
 import {TestHelper} from 'utils/test_helper';
 
 import AtMention from './at_mention';
@@ -42,6 +42,19 @@ describe('components/AtMention', () => {
         expect(container).toMatchSnapshot();
     });
 
+    test('should render the mention as a non-submit button', () => {
+        render(
+            <AtMention
+                {...baseProps}
+                mentionName='user1'
+            >
+                {'(at)-user1'}
+            </AtMention>,
+        );
+
+        expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
+    });
+
     test('should match snapshot when mentioning user with different teammate name display setting', () => {
         const {container} = render(
             <AtMention
diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
index e77976d2bd0b..8b5b5b6d373d 100644
--- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
         aria-haspopup="dialog"
         class="status-wrapper style--none"
         style="border-radius: 50%; width: 32px; height: 32px;"
+        type="button"
       >
         <span
           class="profile-icon "
@@ -102,6 +103,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
         aria-haspopup="dialog"
         class="status-wrapper style--none"
         style="border-radius: 50%; width: 32px; height: 32px;"
+        type="button"
       >
         <span
           class="profile-icon "
@@ -189,6 +191,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
         aria-haspopup="dialog"
         class="status-wrapper style--none"
         style="border-radius: 50%; width: 32px; height: 32px;"
+        type="button"
       >
         <span
           class="profile-icon "
@@ -302,6 +305,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
         aria-haspopup="dialog"
         class="status-wrapper style--none"
         style="border-radius: 50%; width: 32px; height: 32px;"
+        type="button"
       >
         <span
           class="profile-icon "
diff --git a/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap b/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
index 85b8a0b5f87a..4131e0d56b8e 100644
--- a/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
+++ b/webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
@@ -81,6 +81,7 @@ exports[`components/ProfilePicture should match snapshot, profile and src, defau
     aria-haspopup="dialog"
     class="status-wrapper style--none"
     style="border-radius: 50%; width: 32px; height: 32px;"
+    type="button"
   >
     <span
       class="profile-icon "
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_controller.test.tsx b/webapp/channels/src/components/profile_popover/profile_popover_controller.test.tsx
new file mode 100644
index 000000000000..ed8349a439d4
--- /dev/null
+++ b/webapp/channels/src/components/profile_popover/profile_popover_controller.test.tsx
@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithContext, screen, userEvent} from 'tests/react_testing_utils';
+import {RootHtmlPortalId} from 'utils/constants';
+
+import ProfilePopover from './index';
+
+jest.mock('./profile_popover', () => ({
+    __esModule: true,
+    default: () => <div>{'profile'}</div>,
+}));
+
+describe('ProfilePopoverController', () => {
+    test('button triggers use type=button so they do not submit parent forms', async () => {
+        const handleSubmit = jest.fn((e: React.FormEvent) => {
+            e.preventDefault();
+        });
+
+        renderWithContext(
+            <form onSubmit={handleSubmit}>
+                <div id={RootHtmlPortalId}/>
+                <ProfilePopover
+                    triggerComponentAs='button'
+                    triggerComponentClass='style--none'
+                    userId='user1'
+                    src=''
+                >
+                    {'@user1'}
+                </ProfilePopover>
+            </form>,
+        );
+
+        const trigger = screen.getByRole('button', {name: '@user1'});
+        expect(trigger).toHaveAttribute('type', 'button');
+
+        await userEvent.click(trigger);
+
+        expect(handleSubmit).not.toHaveBeenCalled();
+        expect(screen.getByTestId('user-profile-popover')).toBeInTheDocument();
+    });
+});
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx b/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
index 770e47d89fd9..811208463b73 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
@@ -121,6 +121,9 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
 
     const TriggerComponent = props.triggerComponentAs ?? 'span';
 
+    // Buttons default to type="submit" and would post a draft if rendered in the composer form.
+    const triggerType = props.triggerComponentAs === 'button' ? 'button' : undefined;
+
     return (
         <>
             <TriggerComponent
@@ -129,6 +132,7 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
                 className={props.triggerComponentClass}
                 style={props.triggerComponentStyle}
                 {...getReferenceProps()}
+                type={triggerType}
             >
                 {props.children}
             </TriggerComponent>
diff --git a/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap b/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
index dcbdeb67a11b..966bcdde61e3 100644
--- a/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
+++ b/webapp/channels/src/components/user_profile/__snapshots__/user_profile.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`components/UserProfile should match snapshot 1`] = `
     aria-expanded="false"
     aria-haspopup="dialog"
     class="user-popover style--none"
+    type="button"
   >
     nickname
   </button>
@@ -18,6 +19,7 @@ exports[`components/UserProfile should match snapshot, when displayUsername is e
     aria-expanded="false"
     aria-haspopup="dialog"
     class="user-popover style--none"
+    type="button"
   >
     @username
   </button>
@@ -40,6 +42,7 @@ exports[`components/UserProfile should match snapshot, when user is shared 1`] =
     aria-expanded="false"
     aria-haspopup="dialog"
     class="user-popover style--none"
+    type="button"
   >
     nickname
   </button>
@@ -53,6 +56,7 @@ exports[`components/UserProfile should match snapshot, with colorization 1`] = `
     aria-haspopup="dialog"
     class="user-popover style--none"
     style="color: rgb(187, 210, 121);"
+    type="button"
   >
     nickname
   </button>
diff --git a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
index 28727c297fb0..f1fb387586f9 100644
--- a/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/users/avatars/__snapshots__/avatars.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       class="style--none btn-round"
+      type="button"
     >
       <img
         alt="first.last1 profile image"
@@ -23,6 +24,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       class="style--none btn-round"
+      type="button"
     >
       <img
         alt="user profile image"
@@ -37,6 +39,7 @@ exports[`components/widgets/users/Avatars should fetch missing users 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       class="style--none btn-round"
+      type="button"
     >
       <img
         alt="user profile image"
@@ -66,6 +69,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       class="style--none btn-round"
+      type="button"
     >
       <img
         alt="first.last1 profile image"
@@ -80,6 +84,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       class="style--none btn-round"
+      type="button"
     >
       <img
         alt="first.last2 profile image"
@@ -94,6 +99,7 @@ exports[`components/widgets/users/Avatars should properly count overflow 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       class="style--none btn-round"
+      type="button"
     >
       <img
         alt="first.last3 profile image"
@@ -123,6 +129,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       class="style--none btn-round"
+      type="button"
     >
       <img
         alt="first.last1 profile image"
@@ -137,6 +144,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       class="style--none btn-round"
+      type="button"
     >
       <img
         alt="first.last2 profile image"
@@ -151,6 +159,7 @@ exports[`components/widgets/users/Avatars should support userIds 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       class="style--none btn-round"
+      type="button"
     >
       <img
         alt="first.last3 profile image"