Focus on uploaded file and narrate status

microsoftgraph · May 24, 2024 · 607a500 · 607a500
1 parent b42c743
commit 607a500
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.scss b/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 {

diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
@@ -339,6 +339,17 @@ export class MgtFileUpload extends MgtBaseComponent {
   constructor() {
     super();
     this.filesToUpload = [];
+    this.addEventListener('__uploadfailed', this.focusOnUpload)
+    this.addEventListener('__uploadsuccess', this.focusOnUpload)
+  }
+
+  focusOnUpload() {
+    const uploadDom = this.renderRoot.querySelector('mgt-file[part="upload"]')
+    if(uploadDom) {
+      uploadDom.setAttribute("tabindex", "0")
+      uploadDom.classList.add("upload");
+      uploadDom.focus()
+    }
   }
 
   /**
@@ -466,12 +477,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 +496,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 +1134,7 @@ export class MgtFileUpload extends MgtBaseComponent {
       fileUpload.completed = true;
       void super.requestStateUpdate(true);
       void clearFilesCache();
+      this.fireCustomEvent('__uploadsuccess')
     }, 500);
   }
 
@@ -1137,6 +1151,7 @@ export class MgtFileUpload extends MgtBaseComponent {
       fileUpload.fieldUploadResponse = 'description';
       fileUpload.completed = true;
       void super.requestStateUpdate(true);
+      this.fireCustomEvent('__uploadfailed')
     }, 500);
   }
 

diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/strings.ts b/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',