fix(a11y): use descriptive alt text for file icon in mgt-file (#3195)

* use descriptive alt text for file icon * Update packages/mgt-components/src/components/mgt-file/mgt-file.ts Co-authored-by: Musale Martin <martinmusale@microsoft.com> * fix build --------- Co-authored-by: Musale Martin <martinmusale@microsoft.com>
microsoftgraph · May 30, 2024 · 9f0799e · 9f0799e
1 parent 066e58c
commit 9f0799e
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.ts b/packages/mgt-components/src/components/mgt-file/mgt-file.ts
@@ -342,13 +342,14 @@ export class MgtFile extends MgtTemplatedTaskComponent {
     }
 
     let fileIconSrc;
+    let fileType = '';
 
     if (this.fileIcon) {
       fileIconSrc = this.fileIcon;
     } else {
       // get file type extension from file name
       const re = /(?:\.([^.]+))?$/;
-      const fileType =
+      fileType =
         this.driveItem.package === undefined && this.driveItem.folder === undefined
           ? re.exec(this.driveItem.name)[1]
             ? re.exec(this.driveItem.name)[1].toLowerCase()
@@ -368,7 +369,7 @@ export class MgtFile extends MgtTemplatedTaskComponent {
         ${
           fileIconSrc
             ? html`
-              <img src=${fileIconSrc} alt="File icon" />
+              <img src=${fileIconSrc} alt="${fileType.toUpperCase()} File icon" />
             `
             : html`
               ${getSvg(SvgIcon.File)}