From 9f0799eaaec59adc9a1870a1fa44a5864730c163 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Thu, 30 May 2024 11:32:37 +0300
Subject: [PATCH] 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>
---
 packages/mgt-components/src/components/mgt-file/mgt-file.ts | 5 +++--
 1 file changed, 3 insertions(+), 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
index ff6f886f43..e44a6aaba5 100644
--- 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)}