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 <[email protected]>

* fix build

---------

Co-authored-by: Musale Martin <[email protected]>

Author: Mnickii

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)}