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

feat(Spinner): improve a11y #1274

Merged
merged 2 commits into from
Oct 21, 2024
Merged

feat(Spinner): improve a11y #1274

merged 2 commits into from
Oct 21, 2024

Conversation

marcoskolodny
Copy link
Contributor

  • role = "progressbar": I've found some examples online where spinner is represented as a indeterminate progress bar. For example, Material does this:

image

image

  • aria-polite: we don't need changes announcements to be assertive.

  • aria-busy: to express that content is being loaded:
    image

Copy link

github-actions bot commented Oct 21, 2024

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

Copy link

github-actions bot commented Oct 21, 2024

Size stats

master this branch diff
Total JS 12.1 MB 12.1 MB +174 B
JS without icons 1.94 MB 1.94 MB +174 B
Lib overhead 68.3 kB 68.3 kB 0 B
Lib overhead (gzip) 16.6 kB 16.6 kB 0 B

Copy link

github-actions bot commented Oct 21, 2024

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-o1b98hnqk-flows-projects-65bb050e.vercel.app

Built with commit 327311b.
This pull request is being automatically deployed with vercel-action

Copy link
Contributor

@atabel atabel left a comment

Choose a reason for hiding this comment

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

have you tried this in a page with multiple spinners?

@marcoskolodny
Copy link
Contributor Author

have you tried this in a page with multiple spinners?

@atabel yes, it seems fine :)

@marcoskolodny marcoskolodny added this pull request to the merge queue Oct 21, 2024
Merged via the queue into master with commit 5267ad5 Oct 21, 2024
11 checks passed
@marcoskolodny marcoskolodny deleted the WEB-1716-spinner-a11y branch October 21, 2024 15:51
tuentisre pushed a commit that referenced this pull request Nov 4, 2024
# [16.4.0](v16.3.1...v16.4.0) (2024-11-04)

### Bug Fixes

* **TextField:** adjust position of maxLength's screen reader label ([#1283](#1283)) ([fda424e](fda424e))
* **TextField:** avoid right helper text from wrapping, fix spacing and aria label for maxCount text when multiline is true ([#1272](#1272)) ([85fcb31](85fcb31))
* **useDisableBodyScroll:** avoid affecting body's height ([#1279](#1279)) ([b68f317](b68f317))

### Features

* **PhoneNumberFieldLite:** Phone number field with simple formatting to reduce bundle size ([#1276](#1276)) ([a141b97](a141b97))
* **Row:** allow aria-label in informative rows ([#1269](#1269)) ([65b5d42](65b5d42))
* **Rows, Cards, FeedbackScreen, FormFields, Buttons:** add test ids for components and their internal elements ([#1270](#1270)) ([fc63201](fc63201))
* **Spinner:** improve a11y ([#1274](#1274)) ([5267ad5](5267ad5))
* **Switch, RadioButton, Checkbox, ProgressBar, ProgressBarStepped, Slider:** create inverse variant ([#1277](#1277)) ([3129fb9](3129fb9))
@tuentisre
Copy link
Collaborator

🎉 This PR is included in version 16.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants