From 88088ce8299325d82d72ff43ed431e63256b90bd Mon Sep 17 00:00:00 2001
From: Martin Musale <martinmusale@microsoft.com>
Date: Mon, 24 Jul 2023 11:59:22 +0300
Subject: [PATCH 1/3] fix: add a title text if displaying images only

Signed-off-by: Martin Musale <martinmusale@microsoft.com>
---
 .../src/components/mgt-person/mgt-person.ts           | 11 +++++++++--
 packages/mgt-components/src/graph/graph.people.ts     |  4 ++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index 2f294379a2..af1796bff9 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -705,8 +705,15 @@ export class MgtPerson extends MgtTemplatedComponent {
    */
   protected renderImage(personDetailsInternal: IDynamicPerson, imageSrc: string) {
     const altText = `${this.strings.photoFor} ${personDetailsInternal.displayName}`;
-    const hasImage = imageSrc && !this._isInvalidImageSrc && this._avatarType === 'photo';
-    const imageTemplate = html`<img alt=${altText} src=${imageSrc} @error=${() => (this._isInvalidImageSrc = true)} />`;
+    const hasImage = imageSrc && !this._isInvalidImageSrc && this._avatarType === avatarType.photo;
+    const imageOnly = this.avatarType === avatarType.photo && this.view === ViewType.image;
+    const titleText =
+      (personDetailsInternal?.displayName || getEmailFromGraphEntity(personDetailsInternal)) ?? undefined;
+    const imageTemplate = html`<img
+      title="${ifDefined(imageOnly ? titleText : undefined)}"
+      alt=${altText}
+      src=${imageSrc}
+      @error=${() => (this._isInvalidImageSrc = true)} />`;
 
     const initials = personDetailsInternal ? this.getInitials(personDetailsInternal) : '';
     const hasInitials = initials?.length;
diff --git a/packages/mgt-components/src/graph/graph.people.ts b/packages/mgt-components/src/graph/graph.people.ts
index 5fa9844460..cf0041d78b 100644
--- a/packages/mgt-components/src/graph/graph.people.ts
+++ b/packages/mgt-components/src/graph/graph.people.ts
@@ -224,9 +224,9 @@ export const getPeople = async (
 };
 
 /**
- * returns a promise that resolves after specified time
+ * Attempts to extract the email from the IDynamicPerson properties.
  *
- * @param time in milliseconds
+ * @param {IDynamicperson} entity
  */
 export const getEmailFromGraphEntity = (entity: IDynamicPerson): string => {
   const person = entity as Person;

From 1838eef12dded95e6e5eb5591fe42a85917f1116 Mon Sep 17 00:00:00 2001
From: Martin Musale <martinmusale@microsoft.com>
Date: Tue, 25 Jul 2023 11:46:35 +0300
Subject: [PATCH 2/3] Add the optional title to text template with no image

Signed-off-by: Martin Musale <martinmusale@microsoft.com>
---
 packages/mgt-components/src/components/mgt-person/mgt-person.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index af1796bff9..90a81d3329 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -726,6 +726,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     // this reduces the redundant announcement of the user's name.
     const textTemplate = html`
       <span 
+        title="${ifDefined(imageOnly ? titleText : undefined)}"
         role="${ifDefined(this.view === ViewType.image ? undefined : 'presentation')}"
         class="${textClasses}"
       >

From 6fcc2fcda4a1cb945c14f667a100837b8960300a Mon Sep 17 00:00:00 2001
From: Martin Musale <martinmusale@microsoft.com>
Date: Wed, 26 Jul 2023 14:16:23 +0300
Subject: [PATCH 3/3] Set title for icons only if the icon is an image rep

Signed-off-by: Martin Musale <martinmusale@microsoft.com>
---
 packages/mgt-components/src/components/mgt-person/mgt-person.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index 90a81d3329..d149ce5a47 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -726,7 +726,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     // this reduces the redundant announcement of the user's name.
     const textTemplate = html`
       <span 
-        title="${ifDefined(imageOnly ? titleText : undefined)}"
+        title="${ifDefined(this.view === ViewType.image ? titleText : undefined)}"
         role="${ifDefined(this.view === ViewType.image ? undefined : 'presentation')}"
         class="${textClasses}"
       >