mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-61598]: Fix ARIA roles, states, and properties are valid in user profile image and @user buttons (#29692)

Просмотр исходного кода 
* [MA-26]: Fix ARIA roles, states, and properties are valid in user profile image and @user buttons

* [MA-26]: Remove irrelevant e2e tests

* [MA-26]: Remove nested interactive elements

* [MA-26]: Updated mention-link styles

* Minor change

---------

Co-authored-by: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Этот коммит содержится в:
Saurabh Sharma
2025-02-03 00:20:01 +05:30
коммит произвёл GitHub
родитель 8fdb9ad358
Коммит 28dbc3cabb
11 изменённых файлов: 333 добавлений и 348 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_keyboard_usability_spec.js
Просмотреть файл

@@ -156,8 +156,6 @@ describe('Verify Accessibility keyboard usability across different regions in th
cy.get(region).should('have.attr', 'role', 'application'); cy.get(region).should('have.attr', 'role', 'application');
}); });
cy.get('.search__form').should('have.attr', 'role', 'search'); cy.get('.search__form').should('have.attr', 'role', 'search');
cy.get(`#post_${postId}`).children('.post__content').eq(0).should('have.attr', 'role', 'application');
cy.get(`#rhsPost_${postId}`).children('.post__content').eq(0).should('have.attr', 'role', 'application');
}); });
}); });
}); });

2
e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js
Просмотреть файл

@@ -162,7 +162,7 @@ describe('Verify Accessibility Support in Post', () => {
cy.getLastPostId().then((postId) => { cy.getLastPostId().then((postId) => {
cy.get(`#post_${postId}`).within(() => { cy.get(`#post_${postId}`).within(() => {
// * Verify focus is on profile image // * Verify focus is on profile image
cy.get('.status-wrapper button').first().should('be.focused'); cy.get('button.status-wrapper').first().should('be.focused');
cy.focused().tab(); cy.focused().tab();
// * Verify focus is on the username // * Verify focus is on the username

116
webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap
Просмотреть файл

@@ -8,26 +8,23 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match d
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/1234/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/1234/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >
@@ -69,26 +66,23 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/1234/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/1234/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >
@@ -125,26 +119,23 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/1234/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/1234/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >
@@ -179,26 +170,23 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/1234/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/1234/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >

174
webapp/channels/src/components/admin_console/system_user_detail/__snapshots__/system_user_detail.test.tsx.snap
Просмотреть файл

@@ -28,26 +28,23 @@ exports[`SystemUserDetail should match default snapshot 1`] = `
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/user_id/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/user_id/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >
@@ -240,26 +237,23 @@ exports[`SystemUserDetail should match snapshot if MFA is enabled 1`] = `
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/user_id/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/user_id/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >
@@ -452,26 +446,23 @@ exports[`SystemUserDetail should not show manage user settings button when user
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/user_id/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/user_id/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >
@@ -664,26 +655,23 @@ exports[`SystemUserDetail should show manage user settings button as activated 1
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/user_id/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/user_id/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >
@@ -881,26 +869,23 @@ exports[`SystemUserDetail should show manage user settings button as disabled wh
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/user_id/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/user_id/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >
@@ -1093,26 +1078,23 @@ exports[`SystemUserDetail should show the activate user button as disabled when
<div <div
class="AdminUserCard__header" class="AdminUserCard__header"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
class="status-wrapper admin-user-card" class="status-wrapper style--none admin-user-card"
style="border-radius: 50%; width: 128px; height: 128px;"
> >
<button <span
class="RoundButton-dvlhqG gnYSKj style--none" class="profile-icon "
> >
<span <img
class="profile-icon " alt="user profile image"
> class="Avatar Avatar-xxl"
<img loading="lazy"
alt="user profile image" src="/api/v4/users/user_id/image"
class="Avatar Avatar-xxl" />
loading="lazy" </span>
src="/api/v4/users/user_id/image" </button>
/>
</span>
</button>
</span>
<div <div
class="AdminUserCard__user-info" class="AdminUserCard__user-info"
> >

63
webapp/channels/src/components/at_mention/__snapshots__/at_mention.test.tsx.snap
Просмотреть файл

@@ -96,16 +96,15 @@ exports[`components/AtMention should match snapshot when mentioning current user
<ProfilePopoverController <ProfilePopoverController
returnFocus={[Function]} returnFocus={[Function]}
src="/api/v4/users/abc1/image" src="/api/v4/users/abc1/image"
triggerComponentClass="mention--highlight" triggerComponentAs="button"
triggerComponentClass="style--none mention--highlight"
userId="abc1" userId="abc1"
> >
<a <span
className="mention-link" className="mention-link"
role="button"
tabIndex={0}
> >
@First Last @First Last
</a> </span>
</ProfilePopoverController> </ProfilePopoverController>
</Fragment> </Fragment>
`; `;
@@ -115,16 +114,15 @@ exports[`components/AtMention should match snapshot when mentioning user 1`] = `
<ProfilePopoverController <ProfilePopoverController
returnFocus={[Function]} returnFocus={[Function]}
src="/api/v4/users/abc2/image" src="/api/v4/users/abc2/image"
triggerComponentClass="" triggerComponentAs="button"
triggerComponentClass="style--none"
userId="abc2" userId="abc2"
> >
<a <span
className="mention-link" className="mention-link"
role="button"
tabIndex={0}
> >
@Nick @Nick
</a> </span>
</ProfilePopoverController> </ProfilePopoverController>
</Fragment> </Fragment>
`; `;
@@ -134,16 +132,15 @@ exports[`components/AtMention should match snapshot when mentioning user contain
<ProfilePopoverController <ProfilePopoverController
returnFocus={[Function]} returnFocus={[Function]}
src="/api/v4/users/abc3/image" src="/api/v4/users/abc3/image"
triggerComponentClass="" triggerComponentAs="button"
triggerComponentClass="style--none"
userId="abc3" userId="abc3"
> >
<a <span
className="mention-link" className="mention-link"
role="button"
tabIndex={0}
> >
@Dot Matrix @Dot Matrix
</a> </span>
</ProfilePopoverController> </ProfilePopoverController>
. .
</Fragment> </Fragment>
@@ -154,16 +151,15 @@ exports[`components/AtMention should match snapshot when mentioning user contain
<ProfilePopoverController <ProfilePopoverController
returnFocus={[Function]} returnFocus={[Function]}
src="/api/v4/users/abc3/image" src="/api/v4/users/abc3/image"
triggerComponentClass="" triggerComponentAs="button"
triggerComponentClass="style--none"
userId="abc3" userId="abc3"
> >
<a <span
className="mention-link" className="mention-link"
role="button"
tabIndex={0}
> >
@Dot Matrix @Dot Matrix
</a> </span>
</ProfilePopoverController> </ProfilePopoverController>
</Fragment> </Fragment>
`; `;
@@ -173,16 +169,15 @@ exports[`components/AtMention should match snapshot when mentioning user followe
<ProfilePopoverController <ProfilePopoverController
returnFocus={[Function]} returnFocus={[Function]}
src="/api/v4/users/abc2/image" src="/api/v4/users/abc2/image"
triggerComponentClass="" triggerComponentAs="button"
triggerComponentClass="style--none"
userId="abc2" userId="abc2"
> >
<a <span
className="mention-link" className="mention-link"
role="button"
tabIndex={0}
> >
@Nick @Nick
</a> </span>
</ProfilePopoverController> </ProfilePopoverController>
... ...
</Fragment> </Fragment>
@@ -193,16 +188,15 @@ exports[`components/AtMention should match snapshot when mentioning user with di
<ProfilePopoverController <ProfilePopoverController
returnFocus={[Function]} returnFocus={[Function]}
src="/api/v4/users/abc2/image" src="/api/v4/users/abc2/image"
triggerComponentClass="" triggerComponentAs="button"
triggerComponentClass="style--none"
userId="abc2" userId="abc2"
> >
<a <span
className="mention-link" className="mention-link"
role="button"
tabIndex={0}
> >
@user1 @user1
</a> </span>
</ProfilePopoverController> </ProfilePopoverController>
</Fragment> </Fragment>
`; `;
@@ -212,16 +206,15 @@ exports[`components/AtMention should match snapshot when mentioning user with mi
<ProfilePopoverController <ProfilePopoverController
returnFocus={[Function]} returnFocus={[Function]}
src="/api/v4/users/abc2/image" src="/api/v4/users/abc2/image"
triggerComponentClass="" triggerComponentAs="button"
triggerComponentClass="style--none"
userId="abc2" userId="abc2"
> >
<a <span
className="mention-link" className="mention-link"
role="button"
tabIndex={0}
> >
@Nick @Nick
</a> </span>
</ProfilePopoverController> </ProfilePopoverController>
</Fragment> </Fragment>
`; `;

9
webapp/channels/src/components/at_mention/at_mention.tsx
Просмотреть файл

@@ -60,20 +60,19 @@ const AtMention = (props: Props) => {
return ( return (
<> <>
<ProfilePopover <ProfilePopover
triggerComponentClass={classNames({'mention--highlight': highlightMention})} triggerComponentClass={classNames('style--none', {'mention--highlight': highlightMention})}
userId={user.id} userId={user.id}
src={Client4.getProfilePictureUrl(user.id, user.last_picture_update)} src={Client4.getProfilePictureUrl(user.id, user.last_picture_update)}
channelId={props.channelId} channelId={props.channelId}
returnFocus={returnFocus} returnFocus={returnFocus}
triggerComponentAs='button'
> >
<a <span
ref={ref} ref={ref}
className='mention-link' className='mention-link'
role='button'
tabIndex={0}
> >
{'@' + userDisplayName} {'@' + userDisplayName}
</a> </span>
</ProfilePopover> </ProfilePopover>
{userMentionNameSuffix} {userMentionNameSuffix}
</> </>

244
webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
Просмотреть файл

@@ -40,47 +40,52 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
<ProfilePopoverController <ProfilePopoverController
channelId="channel_id" channelId="channel_id"
src="/api/v4/users/user_id/image?_=0" src="/api/v4/users/user_id/image?_=0"
triggerComponentClass="status-wrapper" triggerComponentAs="button"
triggerComponentClass="status-wrapper style--none"
triggerComponentStyle={
Object {
"borderRadius": "50%",
"height": "32px",
"width": "32px",
}
}
userId="user_id" userId="user_id"
username="username" username="username"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
className="status-wrapper" className="status-wrapper style--none"
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
onKeyUp={[Function]} onKeyUp={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onPointerDown={[Function]} onPointerDown={[Function]}
style={
Object {
"borderRadius": "50%",
"height": "32px",
"width": "32px",
}
}
> >
<RoundButton <span
className="style--none" className="profile-icon "
size="md"
> >
<button <Avatar
className="RoundButton-dvlhqG gfRzmz style--none"
size="md" size="md"
url="/api/v4/users/user_id/image?_=0"
username="username"
> >
<span <img
className="profile-icon " alt="username profile image"
> className="Avatar Avatar-md"
<Avatar loading="lazy"
size="md" onError={[Function]}
url="/api/v4/users/user_id/image?_=0" src="/api/v4/users/user_id/image?_=0"
username="username" />
> </Avatar>
<img </span>
alt="username profile image"
className="Avatar Avatar-md"
loading="lazy"
onError={[Function]}
src="/api/v4/users/user_id/image?_=0"
/>
</Avatar>
</span>
</button>
</RoundButton>
<Memo(StatusIcon) <Memo(StatusIcon)
status="status" status="status"
> >
@@ -113,7 +118,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
</span> </span>
</StatusOfflineIcon> </StatusOfflineIcon>
</Memo(StatusIcon)> </Memo(StatusIcon)>
</span> </button>
</ProfilePopoverController> </ProfilePopoverController>
</ProfilePicture> </ProfilePicture>
</div> </div>
@@ -267,47 +272,52 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
<ProfilePopoverController <ProfilePopoverController
channelId="channel_id" channelId="channel_id"
src="/api/v4/users/user_id/image?_=0" src="/api/v4/users/user_id/image?_=0"
triggerComponentClass="status-wrapper" triggerComponentAs="button"
triggerComponentClass="status-wrapper style--none"
triggerComponentStyle={
Object {
"borderRadius": "50%",
"height": "32px",
"width": "32px",
}
}
userId="user_id" userId="user_id"
username="username" username="username"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
className="status-wrapper" className="status-wrapper style--none"
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
onKeyUp={[Function]} onKeyUp={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onPointerDown={[Function]} onPointerDown={[Function]}
style={
Object {
"borderRadius": "50%",
"height": "32px",
"width": "32px",
}
}
> >
<RoundButton <span
className="style--none" className="profile-icon "
size="md"
> >
<button <Avatar
className="RoundButton-dvlhqG gfRzmz style--none"
size="md" size="md"
url="/api/v4/users/user_id/image?_=0"
username="username"
> >
<span <img
className="profile-icon " alt="username profile image"
> className="Avatar Avatar-md"
<Avatar loading="lazy"
size="md" onError={[Function]}
url="/api/v4/users/user_id/image?_=0" src="/api/v4/users/user_id/image?_=0"
username="username" />
> </Avatar>
<img </span>
alt="username profile image"
className="Avatar Avatar-md"
loading="lazy"
onError={[Function]}
src="/api/v4/users/user_id/image?_=0"
/>
</Avatar>
</span>
</button>
</RoundButton>
<Memo(StatusIcon) <Memo(StatusIcon)
status="status" status="status"
> >
@@ -340,7 +350,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
</span> </span>
</StatusOfflineIcon> </StatusOfflineIcon>
</Memo(StatusIcon)> </Memo(StatusIcon)>
</span> </button>
</ProfilePopoverController> </ProfilePopoverController>
</ProfilePicture> </ProfilePicture>
</div> </div>
@@ -500,47 +510,52 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
<ProfilePopoverController <ProfilePopoverController
channelId="channel_id" channelId="channel_id"
src="/api/v4/users/user_id/image?_=0" src="/api/v4/users/user_id/image?_=0"
triggerComponentClass="status-wrapper" triggerComponentAs="button"
triggerComponentClass="status-wrapper style--none"
triggerComponentStyle={
Object {
"borderRadius": "50%",
"height": "32px",
"width": "32px",
}
}
userId="user_id" userId="user_id"
username="username" username="username"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
className="status-wrapper" className="status-wrapper style--none"
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
onKeyUp={[Function]} onKeyUp={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onPointerDown={[Function]} onPointerDown={[Function]}
style={
Object {
"borderRadius": "50%",
"height": "32px",
"width": "32px",
}
}
> >
<RoundButton <span
className="style--none" className="profile-icon "
size="md"
> >
<button <Avatar
className="RoundButton-dvlhqG gfRzmz style--none"
size="md" size="md"
url="/api/v4/users/user_id/image?_=0"
username="username"
> >
<span <img
className="profile-icon " alt="username profile image"
> className="Avatar Avatar-md"
<Avatar loading="lazy"
size="md" onError={[Function]}
url="/api/v4/users/user_id/image?_=0" src="/api/v4/users/user_id/image?_=0"
username="username" />
> </Avatar>
<img </span>
alt="username profile image"
className="Avatar Avatar-md"
loading="lazy"
onError={[Function]}
src="/api/v4/users/user_id/image?_=0"
/>
</Avatar>
</span>
</button>
</RoundButton>
<Memo(StatusIcon) <Memo(StatusIcon)
status="status" status="status"
> >
@@ -573,7 +588,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
</span> </span>
</StatusOfflineIcon> </StatusOfflineIcon>
</Memo(StatusIcon)> </Memo(StatusIcon)>
</span> </button>
</ProfilePopoverController> </ProfilePopoverController>
</ProfilePicture> </ProfilePicture>
</div> </div>
@@ -790,47 +805,52 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
<ProfilePopoverController <ProfilePopoverController
channelId="channel_id" channelId="channel_id"
src="/api/v4/users/user_id/image?_=0" src="/api/v4/users/user_id/image?_=0"
triggerComponentClass="status-wrapper" triggerComponentAs="button"
triggerComponentClass="status-wrapper style--none"
triggerComponentStyle={
Object {
"borderRadius": "50%",
"height": "32px",
"width": "32px",
}
}
userId="user_id" userId="user_id"
username="username" username="username"
> >
<span <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="dialog" aria-haspopup="dialog"
className="status-wrapper" className="status-wrapper style--none"
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
onKeyUp={[Function]} onKeyUp={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onPointerDown={[Function]} onPointerDown={[Function]}
style={
Object {
"borderRadius": "50%",
"height": "32px",
"width": "32px",
}
}
> >
<RoundButton <span
className="style--none" className="profile-icon "
size="md"
> >
<button <Avatar
className="RoundButton-dvlhqG gfRzmz style--none"
size="md" size="md"
url="/api/v4/users/user_id/image?_=0"
username="username"
> >
<span <img
className="profile-icon " alt="username profile image"
> className="Avatar Avatar-md"
<Avatar loading="lazy"
size="md" onError={[Function]}
url="/api/v4/users/user_id/image?_=0" src="/api/v4/users/user_id/image?_=0"
username="username" />
> </Avatar>
<img </span>
alt="username profile image"
className="Avatar Avatar-md"
loading="lazy"
onError={[Function]}
src="/api/v4/users/user_id/image?_=0"
/>
</Avatar>
</span>
</button>
</RoundButton>
<Memo(StatusIcon) <Memo(StatusIcon)
status="status" status="status"
> >
@@ -863,7 +883,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
</span> </span>
</StatusOfflineIcon> </StatusOfflineIcon>
</Memo(StatusIcon)> </Memo(StatusIcon)>
</span> </button>
</ProfilePopoverController> </ProfilePopoverController>
</ProfilePicture> </ProfilePicture>
</div> </div>

1
webapp/channels/src/components/post/post_component.tsx
Просмотреть файл

@@ -566,7 +566,6 @@ function PostComponent(props: Props) {
channelId={post.channel_id} channelId={post.channel_id}
/> />
<div <div
role='application'
className={`post__content ${props.center ? 'center' : ''}`} className={`post__content ${props.center ? 'center' : ''}`}
data-testid='postContent' data-testid='postContent'
> >

27
webapp/channels/src/components/profile_picture/__snapshots__/profile_picture.test.tsx.snap
Просмотреть файл

@@ -39,21 +39,24 @@ exports[`components/ProfilePicture should match snapshot, no user specified, ove
exports[`components/ProfilePicture should match snapshot, profile and src, default props 1`] = ` exports[`components/ProfilePicture should match snapshot, profile and src, default props 1`] = `
<ProfilePopoverController <ProfilePopoverController
src="http://example.com/image.png" src="http://example.com/image.png"
triggerComponentClass="status-wrapper" triggerComponentAs="button"
triggerComponentClass="status-wrapper style--none"
triggerComponentStyle={
Object {
"borderRadius": "50%",
"height": "32px",
"width": "32px",
}
}
userId="uid" userId="uid"
> >
<RoundButton <span
className="style--none" className="profile-icon "
size="md"
> >
<span <Memo(Avatar)
className="profile-icon " url="http://example.com/emoji.png"
> />
<Memo(Avatar) </span>
url="http://example.com/emoji.png"
/>
</span>
</RoundButton>
<Memo(StatusIcon) <Memo(StatusIcon)
status="away" status="away"
/> />

34
webapp/channels/src/components/profile_picture/index.tsx
Просмотреть файл

@@ -3,7 +3,6 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React from 'react'; import React from 'react';
import styled from 'styled-components';
import ProfilePopover from 'components/profile_popover'; import ProfilePopover from 'components/profile_popover';
import StatusIcon from 'components/status_icon'; import StatusIcon from 'components/status_icon';
@@ -42,7 +41,7 @@ function ProfilePicture(props: Props) {
if (props.userId) { if (props.userId) {
return ( return (
<ProfilePopover <ProfilePopover
triggerComponentClass={classNames('status-wrapper', props.wrapperClass)} triggerComponentClass={classNames('status-wrapper style--none', props.wrapperClass)}
userId={props.userId} userId={props.userId}
src={profileSrc} src={profileSrc}
username={props.username} username={props.username}
@@ -51,20 +50,21 @@ function ProfilePicture(props: Props) {
overwriteIcon={props.overwriteIcon} overwriteIcon={props.overwriteIcon}
overwriteName={props.overwriteName} overwriteName={props.overwriteName}
fromWebhook={props.fromWebhook} fromWebhook={props.fromWebhook}
triggerComponentAs='button'
triggerComponentStyle={{
borderRadius: '50%',
width: `${getAvatarWidth(props?.size ?? 'md')}px`,
height: `${getAvatarWidth(props?.size ?? 'md')}px`,
}}
> >
<> <>
<RoundButton <span className={profileIconClass}>
className='style--none' <Avatar
size={props?.size ?? 'md'} username={props.username}
> size={props.size}
<span className={profileIconClass}> url={props.src}
<Avatar />
username={props.username} </span>
size={props.size}
url={props.src}
/>
</span>
</RoundButton>
<StatusIcon status={props.status}/> <StatusIcon status={props.status}/>
</> </>
</ProfilePopover> </ProfilePopover>
@@ -93,10 +93,4 @@ function ProfilePicture(props: Props) {
); );
} }
const RoundButton = styled.button<{size: TAvatarSizeToken}>`
border-radius: 50%;
width: ${(p) => getAvatarWidth(p.size)}px;
height: ${(p) => getAvatarWidth(p.size)}px;
`;
export default ProfilePicture; export default ProfilePicture;

9
webapp/channels/src/sass/components/_mentions.scss
Просмотреть файл

@@ -21,6 +21,15 @@ del .group-mention-link:focus {
color: variables.$white; color: variables.$white;
} }
.mention-link {
color: var(--link-color);
&:hover,
&:focus {
text-decoration: underline;
}
}
.badge { .badge {
display: inline-block; display: inline-block;
min-width: 10px; min-width: 10px;