Skip to content

Commit 7f9eac3

Browse files
musaleMnickii
andauthored
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]>
1 parent 6395096 commit 7f9eac3

File tree

3 files changed

+24
-3
lines changed

3 files changed

+24
-3
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ $file-upload-border-drag: var(--file-upload-border-drag, 1px dashed #0078d4);
3131
margin-top: 30px;
3232
}
3333

34+
.focus,:focus {
35+
outline: none;
36+
}
37+
3438
fluent-button {
3539
.upload-icon {
3640
path {

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -337,8 +337,20 @@ export class MgtFileUpload extends MgtBaseComponent {
337337
private _excludedFileType = false;
338338

339339
constructor() {
340+
/* eslint-disable @typescript-eslint/unbound-method */
340341
super();
341342
this.filesToUpload = [];
343+
this.addEventListener('__uploadfailed', this.focusOnUpload);
344+
this.addEventListener('__uploadsuccess', this.focusOnUpload);
345+
}
346+
347+
focusOnUpload() {
348+
const uploadDom = this.renderRoot.querySelector<HTMLElement>('mgt-file[part="upload"]');
349+
if (uploadDom) {
350+
uploadDom.setAttribute('tabindex', '0');
351+
uploadDom.classList.add('upload');
352+
uploadDom.focus();
353+
}
342354
}
343355

344356
/**
@@ -466,12 +478,13 @@ export class MgtFileUpload extends MgtBaseComponent {
466478
const folder =
467479
folderTabStyle + (fileItem.fieldUploadResponse === 'lastModifiedDateTime' ? ' file-upload-dialog-success' : '');
468480

481+
const isDescription = fileItem.fieldUploadResponse === 'description';
469482
const description = classMap({
470-
description: fileItem.fieldUploadResponse === 'description'
483+
description: isDescription
471484
});
472485

473486
const completedTemplate = !fileItem.completed ? this.renderFileUploadTemplate(fileItem) : html``;
474-
487+
const failOrSuccess = isDescription ? strings.failUploadFile : strings.successUploadFile;
475488
return mgtHtml`
476489
<div class="${completed}">
477490
<div class="${folder}">
@@ -484,6 +497,7 @@ export class MgtFileUpload extends MgtBaseComponent {
484497
.fileDetails=${fileItem.driveItem}
485498
.view=${fileItem.view}
486499
.line2Property=${fileItem.fieldUploadResponse}
500+
aria-label="${fileItem.driveItem.name} ${failOrSuccess}"
487501
part="upload"
488502
class="mgt-file-item">
489503
</mgt-file>
@@ -1121,6 +1135,7 @@ export class MgtFileUpload extends MgtBaseComponent {
11211135
fileUpload.completed = true;
11221136
void super.requestStateUpdate(true);
11231137
void clearFilesCache();
1138+
this.fireCustomEvent('__uploadsuccess');
11241139
}, 500);
11251140
}
11261141

@@ -1137,6 +1152,7 @@ export class MgtFileUpload extends MgtBaseComponent {
11371152
fileUpload.fieldUploadResponse = 'description';
11381153
fileUpload.completed = true;
11391154
void super.requestStateUpdate(true);
1155+
this.fireCustomEvent('__uploadfailed');
11401156
}, 500);
11411157
}
11421158

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
*/
77

88
export const strings = {
9-
failUploadFile: 'File upload fail.',
9+
failUploadFile: 'File upload failed',
10+
successUploadFile: 'File upload succeeded',
1011
cancelUploadFile: 'File cancel.',
1112
buttonUploadFile: 'Upload Files',
1213
maximumFilesTitle: 'Maximum files',

0 commit comments

Comments
 (0)