Skip to content

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

Merged
Mnickii merged 8 commits intomainfrom
fix/upload-file-status-a11y
May 29, 2024
Merged

fix(a11y): focus on uploaded file and narrate status#3189
Mnickii merged 8 commits intomainfrom
fix/upload-file-status-a11y

Conversation

@musale
Copy link
Copy Markdown
Contributor

@musale musale commented May 24, 2024

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

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

Other information

@musale musale requested a review from a team as a code owner May 24, 2024 10:56
@microsoft-github-policy-service
Copy link
Copy Markdown
Contributor

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
Copy link
Copy Markdown
Contributor Author

musale commented May 27, 2024

@vagpt review this for a11y

Copy link
Copy Markdown
Collaborator

@Mnickii Mnickii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's use uploadDom as a HTMLElement to be able to call focus() on it.

@microsoft-github-policy-service microsoft-github-policy-service Bot added Needs: Author Feedback Issue needs response from issue author and removed Needs: Author Feedback Issue needs response from issue author labels May 27, 2024
musale and others added 2 commits May 28, 2024 19:16
@musale musale changed the title fix: focus on uploaded file and narrate status fix(a11y): focus on uploaded file and narrate status May 28, 2024
@github-actions
Copy link
Copy Markdown

📖 The updated storybook is available here

@github-actions
Copy link
Copy Markdown

📖 The updated storybook is available here

@github-actions
Copy link
Copy Markdown

📖 The updated storybook is available here

@vagpt
Copy link
Copy Markdown
Collaborator

vagpt commented May 29, 2024

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:

Issue.is.still.repro.at.SR.is.still.not.announicng.any.infomration.mp4

@Mnickii Mnickii self-requested a review May 29, 2024 10:03
@github-actions
Copy link
Copy Markdown

📖 The updated storybook is available here

@musale
Copy link
Copy Markdown
Contributor Author

musale commented May 29, 2024

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

@github-actions
Copy link
Copy Markdown

📖 The updated storybook is available here

@github-actions
Copy link
Copy Markdown

Code Coverage

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
Copy link
Copy Markdown
Collaborator

vagpt commented May 29, 2024

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

Attachment -

Untitled.video.-.Made.with.Clipchamp.22.mp4

@Mnickii Mnickii merged commit 7f9eac3 into main May 29, 2024
@Mnickii Mnickii deleted the fix/upload-file-status-a11y branch May 29, 2024 13:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Archived in project

3 participants