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

[musale]

Closes #3110

PR Type

• Bugfix

Description of the changes

Created custom events to be fired on successful or failed file upload attempts Focus on the uploaded file Set aria-label text to narrate the file name and status of upload

PR checklist

• [x] Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• [x] All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• [x] Stories have been added and existing stories have been tested
• [x] Added appropriate documentation. Docs PR:
• [ ] License header has been added to all new source files (yarn setLicense)
• [ ] Contains NO breaking changes

Other information

[microsoft-github-policy-service[bot]]

Thank you for creating a Pull Request @musale.

This is a checklist for the PR reviewer(s) to complete before approving and merging this PR:

• [ ] I have verified a documentation PR has been linked and is approved (or not applicable)
• [ ] I have ran this PR locally and have tested the fix/feature
• [ ] I have verified that stories have been added to storybook (or not applicable)
• [ ] I have tested existing stories in storybook to verify no regression has occured
• [ ] I have tested the solution in at least two browsers (Edge + 1 non-Chromium based browser)

[musale]

@vagpt review this for a11y

[github-actions[bot]]

📖 The updated storybook is available here

[github-actions[bot]]

📖 The updated storybook is available here

[github-actions[bot]]

📖 The updated storybook is available here

[vagpt]

This issue is still repro on the URL below. Attachment is added for the reference.

URL: https://mgt.dev/next/pr/3189/?path=/story/components-mgt-file-list-properties--file-list-upload

Attachment:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/fdb723ee-e996-4a7a-8bda-3a9dc574f812

[github-actions[bot]]

📖 The updated storybook is available here

[musale]

@vagpt please hard reload and test again, re-tested locally and on the link, it does focus on the uploaded file.

[github-actions[bot]]

📖 The updated storybook is available here

[github-actions[bot]]

Package	Line Rate	Branch Rate	Complexity	Health
mgt-components.src.components	86%	75%	0	✔
mgt-components.src.components.mgt-contact	68%	83%	0	➖
mgt-components.src.components.mgt-file	62%	100%	0	➖
mgt-components.src.components.mgt-file-list	46%	100%	0	❌
mgt-components.src.components.mgt-file-list.mgt-file-upload	49%	86%	0	❌
mgt-components.src.components.mgt-get	22%	100%	0	❌
mgt-components.src.components.mgt-messages	68%	100%	0	➖
mgt-components.src.components.mgt-organization	47%	100%	0	❌
mgt-components.src.components.mgt-person	82%	100%	0	✔
mgt-components.src.components.mgt-person-card	77%	49%	0	✔
mgt-components.src.components.mgt-picker	80%	100%	0	✔
mgt-components.src.components.mgt-profile	40%	100%	0	❌
mgt-components.src.components.mgt-tasks-base	87%	100%	0	✔
mgt-components.src.components.mgt-theme-toggle	100%	100%	0	✔
mgt-components.src.components.mgt-todo	79%	100%	0	✔
mgt-components.src.components.sub-components.mgt-flyout	78%	53%	0	✔
mgt-components.src.components.sub-components.mgt-spinner	100%	100%	0	✔
mgt-components.src.graph	38%	78%	0	❌
mgt-components.src.styles	92%	80%	0	✔
mgt-components.src.utils	79%	27%	0	✔
mgt-element.dist.es6.components.src.components	72%	73%	0	➖
mgt-element.dist.es6.mock.src.mock	91%	73%	0	✔
mgt-element.dist.es6.providers.src.providers	85%	76%	0	✔
mgt-element.dist.es6.src	91%	80%	0	✔
mgt-element.dist.es6.utils.src.utils	68%	71%	0	➖
mgt-element.src	93%	40%	0	✔
mgt-element.src.components	78%	100%	0	✔
mgt-element.src.mock	81%	56%	0	✔
mgt-element.src.providers	84%	100%	0	✔
mgt-element.src.utils	72%	91%	0	➖
Summary	67% (14557 / 21576)	74% (519 / 699)	0	➖

[vagpt]

This issue is now working as expected hence we are good to close it related bug.

Attachment -

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/e21b1b6a-a5d6-415a-9d9c-e0edb1942d4f