[MA_10]: Updated the logic to add aria-label to profile popover

Brightscout · Dec 12, 2024 · bb7a4fd · bb7a4fd
1 parent 2e34423
commit bb7a4fd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
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
@@ -42,6 +42,7 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
             src="/api/v4/users/user_id/image?_=0"
             triggerComponentClass="status-wrapper"
             userId="user_id"
+            username="username"
           >
             <span
               aria-expanded="false"
@@ -268,6 +269,7 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
             src="/api/v4/users/user_id/image?_=0"
             triggerComponentClass="status-wrapper"
             userId="user_id"
+            username="username"
           >
             <span
               aria-expanded="false"
@@ -500,6 +502,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
             src="/api/v4/users/user_id/image?_=0"
             triggerComponentClass="status-wrapper"
             userId="user_id"
+            username="username"
           >
             <span
               aria-expanded="false"
@@ -794,6 +797,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
             src="/api/v4/users/user_id/image?_=0"
             triggerComponentClass="status-wrapper"
             userId="user_id"
+            username="username"
           >
             <span
               aria-expanded="false"

diff --git a/webapp/channels/src/components/profile_picture/index.tsx b/webapp/channels/src/components/profile_picture/index.tsx
@@ -45,6 +45,7 @@ function ProfilePicture(props: Props) {
                 triggerComponentClass={classNames('status-wrapper', props.wrapperClass)}
                 userId={props.userId}
                 src={profileSrc}
+                username={props.username}
                 channelId={props.channelId}
                 hideStatus={hideStatus}
                 overwriteIcon={props.overwriteIcon}

diff --git a/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx b/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
@@ -17,17 +17,12 @@ import {
 import classNames from 'classnames';
 import type {HtmlHTMLAttributes, ReactNode} from 'react';
 import React, {useCallback, useState} from 'react';
-import {useSelector} from 'react-redux';
 
 import type {Channel} from '@mattermost/types/channels';
 import type {UserProfile} from '@mattermost/types/users';
 
-import {getUser} from 'mattermost-redux/selectors/entities/users';
-
 import {A11yClassNames} from 'utils/constants';
 
-import type {GlobalState} from 'types/store';
-
 import ProfilePopover from './profile_popover';
 
 const PROFILE_POPOVER_OPENING_DELAY = 300;
@@ -48,6 +43,11 @@ interface Props<TriggerComponentType> {
      */
     src: string;
 
+    /**
+     * Username of the profile.
+     */
+    username?: string;
+
     /**
      * This should be the trigger button for the popover, Do note that the root element of the trigger component should be passed in triggerComponentRoot
      */
@@ -84,8 +84,6 @@ interface Props<TriggerComponentType> {
 }
 
 export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>(props: Props<TriggerComponentType>) {
-    const user = useSelector((state: GlobalState) => getUser(state, props.userId));
-
     const [isOpen, setOpen] = useState(false);
 
     const {refs, floatingStyles, context: floatingContext} = useFloating({
@@ -146,8 +144,8 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
                                 ref={refs.setFloating}
                                 style={combinedFloatingStyles}
                                 className={classNames('user-profile-popover', A11yClassNames.POPUP)}
+                                aria-label={`${props.username}'s profile popover`}
                                 {...getFloatingProps()}
-                                aria-label={`${user.username}'s profile popover`}
                             >
                                 <ProfilePopover
                                     userId={props.userId}