fix(a11y): focus on uploaded file and narrate status (#3189)

* Focus on uploaded file and narrate status

* Use uploadDom as HTMLElement

Co-authored-by: Nickii Miaro <[email protected]>

* Make uploadDom an HTMLElement

* fix prettier issues

* Ignore unbound method rule in constructor

---------

Co-authored-by: Nickii Miaro <[email protected]>

Author: musale

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.scss

@@ -31,6 +31,10 @@ $file-upload-border-drag: var(--file-upload-border-drag, 1px dashed #0078d4);
     margin-top: 30px;
   }
 
+  .focus,:focus {
+    outline: none;
+  }
+
   fluent-button {
     .upload-icon {
       path {

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts

@@ -337,8 +337,20 @@ export class MgtFileUpload extends MgtBaseComponent {
   private _excludedFileType = false;
 
   constructor() {
+    /* eslint-disable @typescript-eslint/unbound-method */
     super();
     this.filesToUpload = [];
+    this.addEventListener('__uploadfailed', this.focusOnUpload);
+    this.addEventListener('__uploadsuccess', this.focusOnUpload);
+  }
+
+  focusOnUpload() {
+    const uploadDom = this.renderRoot.querySelector<HTMLElement>('mgt-file[part="upload"]');
+    if (uploadDom) {
+      uploadDom.setAttribute('tabindex', '0');
+      uploadDom.classList.add('upload');
+      uploadDom.focus();
+    }
   }
 
   /**
@@ -466,12 +478,13 @@ export class MgtFileUpload extends MgtBaseComponent {
     const folder =
       folderTabStyle + (fileItem.fieldUploadResponse === 'lastModifiedDateTime' ? ' file-upload-dialog-success' : '');
 
+    const isDescription = fileItem.fieldUploadResponse === 'description';
     const description = classMap({
-      description: fileItem.fieldUploadResponse === 'description'
+      description: isDescription
     });
 
     const completedTemplate = !fileItem.completed ? this.renderFileUploadTemplate(fileItem) : html``;
-
+    const failOrSuccess = isDescription ? strings.failUploadFile : strings.successUploadFile;
     return mgtHtml`
         <div class="${completed}">
           <div class="${folder}">
@@ -484,6 +497,7 @@ export class MgtFileUpload extends MgtBaseComponent {
                   .fileDetails=${fileItem.driveItem}
                   .view=${fileItem.view}
                   .line2Property=${fileItem.fieldUploadResponse}
+                  aria-label="${fileItem.driveItem.name} ${failOrSuccess}"
                   part="upload"
                   class="mgt-file-item">
                 </mgt-file>
@@ -1121,6 +1135,7 @@ export class MgtFileUpload extends MgtBaseComponent {
       fileUpload.completed = true;
       void super.requestStateUpdate(true);
       void clearFilesCache();
+      this.fireCustomEvent('__uploadsuccess');
     }, 500);
   }
 
@@ -1137,6 +1152,7 @@ export class MgtFileUpload extends MgtBaseComponent {
       fileUpload.fieldUploadResponse = 'description';
       fileUpload.completed = true;
       void super.requestStateUpdate(true);
+      this.fireCustomEvent('__uploadfailed');
     }, 500);
   }
 

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/strings.ts

@@ -6,7 +6,8 @@
  */
 
 export const strings = {
-  failUploadFile: 'File upload fail.',
+  failUploadFile: 'File upload failed',
+  successUploadFile: 'File upload succeeded',
   cancelUploadFile: 'File cancel.',
   buttonUploadFile: 'Upload Files',
   maximumFilesTitle: 'Maximum files',