From 0cca57b6df63a19ce0cb5faee2a41b443c0164a4 Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Fri, 24 Jan 2025 22:51:20 +0530
Subject: [PATCH] [MM-61591]: Fixed the dialog aria-properties in profile
 popover (#29593)

* [MA-10]: Fixed the dialog aria-properties in profile popover

* [MA-10]: Updated the logic to add aria-label to profile popover

* [MA-10]: Updated the aria-label to be translatable

* [MA-10]:Updated the dialog aria-properties in profile popover

* [MA-10]: Fixed the dialog aria-properties in profile popover

* [MA-10]: Updated the translation string
---
 .../__snapshots__/panel_body.test.tsx.snap     |  4 ++++
 .../src/components/profile_picture/index.tsx   |  1 +
 .../profile_popover_controller.tsx             | 18 ++++++++++++++++++
 webapp/channels/src/i18n/en.json               |  2 ++
 4 files changed, 25 insertions(+)

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 1eaaa3d21d..e701adff24 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
@@ -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"
@@ -789,6 +792,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
index ec676786e7..a423ba74f0 100644
--- 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
index 41c5a47fb8..76b5008617 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
@@ -18,6 +18,7 @@ import {
 import classNames from 'classnames';
 import type {HtmlHTMLAttributes, ReactNode} from 'react';
 import React, {useCallback, useState} from 'react';
+import {useIntl} from 'react-intl';
 
 import type {Channel} from '@mattermost/types/channels';
 import type {UserProfile} from '@mattermost/types/users';
@@ -41,6 +42,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
      */
@@ -77,6 +83,17 @@ interface Props<TriggerComponentType> {
 }
 
 export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>(props: Props<TriggerComponentType>) {
+    const intl = useIntl();
+
+    const profileAriaLabel = intl.formatMessage({id: 'profile_popover.aria_label.without_username', defaultMessage: 'profile popover'});
+    const userProfileAriaLabel = intl.formatMessage({
+        id: 'profile_popover.aria_label.with_username',
+        defaultMessage: '{userName}\'s profile popover',
+    },
+    {
+        userName: props.username,
+    });
+
     const [isOpen, setOpen] = useState(false);
 
     const {refs, floatingStyles, context: floatingContext} = useFloating({
@@ -127,6 +144,7 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
                                 ref={refs.setFloating}
                                 style={{...floatingStyles, ...transitionStyles}}
                                 className={classNames('user-profile-popover', A11yClassNames.POPUP)}
+                                aria-label={props.username ? userProfileAriaLabel : profileAriaLabel}
                                 {...getFloatingProps()}
                             >
                                 <ProfilePopover
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 49d9588ca6..da5d5c3bab 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4809,6 +4809,8 @@
   "pricing_modal.title": "Select a plan",
   "pricing_modal.wantToTry": "Want to try? ",
   "pricing_modal.wantToUpgrade": "Want to upgrade? ",
+  "profile_popover.aria_label.with_username": "{userName}'s profile popover",
+  "profile_popover.aria_label.without_username": "profile popover",
   "promote_to_user_modal.desc": "This action promotes the guest {username} to a member. It will allow the user to join public channels and interact with users outside of the channels they are currently members of. Are you sure you want to promote guest {username} to member?",
   "promote_to_user_modal.promote": "Promote",
   "promote_to_user_modal.title": "Promote guest {username} to member",