fix: add a title text if displaying images only. (#2625)

add a title attribute if displaying profile avatar/initials.

---------

Signed-off-by: Martin Musale <martinmusale@microsoft.com>
Co-authored-by: Nickii Miaro <miaronkirote@gmail.com>
Co-authored-by: Gavin Barron <gavinbarron@microsoft.com>

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;
@@ -719,6 +726,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     // this reduces the redundant announcement of the user's name.
     const textTemplate = html`
       <span 
+        title="${ifDefined(this.view === ViewType.image ? titleText : undefined)}"
         role="${ifDefined(this.view === ViewType.image ? undefined : 'presentation')}"
         class="${textClasses}"
       >

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;