Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhance: Improve the a11y of the upload progress bar #42704

Merged
merged 8 commits into from
May 31, 2023
Merged

enhance: Improve the a11y of the upload progress bar #42704

merged 8 commits into from
May 31, 2023

Conversation

MehmetYararVX
Copy link
Contributor

@MehmetYararVX MehmetYararVX commented May 29, 2023

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?): Accessibility

🔗 Related issue link

fix #42703

💡 Background and solution

The following accessibility features are added to the upload progress:

  • aria-valuenow which announces the current progress percent
  • aria-label which announced the name of the progress
  • aria-labelledby which announces the associated label of the progress

📝 Changelog

Language Changelog
🇺🇸 English Improve Progress accessibility by adding more aria props.
🇨🇳 Chinese 增强 Progress 可访问性表现。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

🚀 Summary

🤖 Generated by Copilot at 2d941d9

Improved the accessibility of the Progress and Upload components by adding new props for custom labels. Refactored some types and imports for clarity and consistency.

🔍 Walkthrough

🤖 Generated by Copilot at 2d941d9

  • Add ariaLabel and ariaLabelledBy props to Progress and UploadFile interfaces to allow accessible labels for progress and upload components (link, link)
  • Pass the new props from props and file to the div and Progress elements in Progress and ListItem functions respectively (link, link, link)
  • Change the type annotation for ProgressType and ProgressStatuses to use brackets instead of typeof directly, to avoid confusion with the TypeScript operator (link, link, link)
  • Reorder the import of RcUploadProps in interface.ts to match the alphabetical order of the other imported types (link)

@github-actions
Copy link
Contributor

github-actions bot commented May 29, 2023

@afc163 afc163 changed the title Improve the a11y of the upload progress bar feat: Improve the a11y of the upload progress bar May 29, 2023
@zombieJ
Copy link
Member

zombieJ commented May 30, 2023

CI failed. Use npm test -- -u to fix the snapshot.

@afc163
Copy link
Member

afc163 commented May 30, 2023

Is it better to use https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress instead of div.

@MehmetYararVX
Copy link
Contributor Author

@zombieJ. added a test and updated snapshots.

@afc163, as far as I know, the progress element doesn't support nested elements or complex content inside it. not sure how it'd work with the SVG progress atm. I'd suggest tackling it as a feature rather than a bugfix in another pr.

@codecov
Copy link

codecov bot commented May 30, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (bbf71f0) 100.00% compared to head (c9c5559) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #42704   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          641       641           
  Lines        10869     10869           
  Branches      2944      2944           
=========================================
  Hits         10869     10869           
Impacted Files Coverage Δ
components/progress/progress.tsx 100.00% <100.00%> (ø)
components/upload/UploadList/ListItem.tsx 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

@afc163 afc163 changed the title feat: Improve the a11y of the upload progress bar enhance: Improve the a11y of the upload progress bar May 31, 2023
@afc163 afc163 merged commit f6dc5f3 into ant-design:master May 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Progress is not announced correctly in Upload progress bar
3 participants