feat: add aria attributes to loaders #1449

d-rita · 2024-02-09T19:51:36Z

Implements 560

Description

This feature improves the accessibility of the loaders by adding aria attributes to them, i.e.

the aria-valuenow and aria-label attributes to the linear loader
the aria-label attribute to the circular loader

Checklist

Tests were added

All points above should be relevant for feature PRs. For bugfixes, some points might not be relevant. In that case, just check them anyway to signal the work is done.

dhis2-bot · 2024-02-09T19:56:01Z

🚀 Deployed on https://pr-1449--dhis2-ui.netlify.app

cypress · 2024-02-14T00:13:14Z

Passing run #3230 ↗︎

0	584	0	0	0

Details:

feat: add aria attributes to loaders
Project: ui	Commit: `ac2b17b5cd`
Status: Passed	Duration: 06:43 💡
Started: Feb 15, 2024 12:13 PM	Ended: Feb 15, 2024 12:20 PM

Review all test suite changes for PR #1449 ↗︎

kabaros

LGTM - just the one question for Joe to answer

kabaros · 2024-02-15T14:02:07Z

components/loader/src/circular-loader/circular-loader.js

@@ -67,6 +69,7 @@ CircularLoader.defaultProps = {
 }

 CircularLoader.propTypes = {
+    ariaLabel: PropTypes.string,


@cooper-joe should the ariaLabel be required here?

No, I don't think so. As I understood the requirements, an accessible label can be provided alongside the loader in a container. So in that case, ariaLabel isn't technically required. And for the purposes of adoption, I'd prefer to throw lint or console warnings for these violations rather than prop errors.

components/loader/src/circular-loader/__tests__/circular-loader.test.js

- Add aria-valuenow attribute to linear loader - Add aria-label attribute to both linear and circular loaders - Add unit tests for loaders

Co-authored-by: Diana Nanyanzi <[email protected]>

# [9.5.0-alpha.1](v9.4.2...v9.5.0-alpha.1) (2024-03-19) ### Features * splitButton accessibility improvements ([#1458](#1458)) ([51a1b14](51a1b14)) * **tooltip:** accessibility improvements for tooltip ([#1463](#1463)) ([f11eabb](f11eabb)) * add aria attributes to loaders ([#1449](#1449)) ([2832584](2832584))

dhis2-bot · 2024-03-19T15:14:40Z

🎉 This PR is included in version 9.5.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

* feat: add aria attributes to loaders - Add aria-valuenow attribute to linear loader - Add aria-label attribute to both linear and circular loaders - Add unit tests for loaders * refactor: change aria-label to use hyphen after code review Co-authored-by: Diana Nanyanzi <[email protected]> --------- Co-authored-by: Mozafar Haider <[email protected]> Co-authored-by: Diana Nanyanzi <[email protected]>

# [9.7.0](v9.6.0...v9.7.0) (2024-06-03) ### Bug Fixes * **Tooltip:** add missing tabIndex ([389e61a](389e61a)) ### Features * splitButton accessibility improvements ([#1458](#1458)) ([8370915](8370915)) * **tooltip:** accessibility improvements for tooltip ([#1463](#1463)) ([9afcfdf](9afcfdf)) * add aria attributes to loaders ([#1449](#1449)) ([aaa60fb](aaa60fb)) * add optional aria-label prop to switch component ([bf9927a](bf9927a))

* feat: add aria attributes to loaders - Add aria-valuenow attribute to linear loader - Add aria-label attribute to both linear and circular loaders - Add unit tests for loaders * refactor: change aria-label to use hyphen after code review Co-authored-by: Diana Nanyanzi <[email protected]> --------- Co-authored-by: Mozafar Haider <[email protected]> Co-authored-by: Diana Nanyanzi <[email protected]>

* **Tooltip:** add missing tabIndex ([389e61a](389e61a)) * splitButton accessibility improvements ([#1458](#1458)) ([8370915](8370915)) * **tooltip:** accessibility improvements for tooltip ([#1463](#1463)) ([9afcfdf](9afcfdf)) * add aria attributes to loaders ([#1449](#1449)) ([aaa60fb](aaa60fb)) * add optional aria-label prop to switch component ([bf9927a](bf9927a))

# [9.9.0-alpha.1](v9.8.1...v9.9.0-alpha.1) (2024-06-17) ### Features * splitButton accessibility improvements ([#1458](#1458)) ([51a1b14](51a1b14)) * **tooltip:** accessibility improvements for tooltip ([#1463](#1463)) ([f11eabb](f11eabb)) * add aria attributes to loaders ([#1449](#1449)) ([2832584](2832584)) ### Reverts * Revert "feat(selectionBar): accessibility improvements for SelectionBar (#1475)" ([54498fb](54498fb)), closes [#1475](#1475)

dhis2-bot · 2024-06-17T20:54:21Z

🎉 This PR is included in version 9.9.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [9.12.0-alpha.1](v9.11.4...v9.12.0-alpha.1) (2024-09-23) ### Bug Fixes * bump multi calendar library version in calendar ([#1566](#1566)) ([d205016](d205016)) * bump multi calendar library version in calendar component ([#1576](#1576)) ([5f2b13d](5f2b13d)) * update yarn.lock after deduping ([5c24b02](5c24b02)) ### Features * add aria attributes to loaders ([#1449](#1449)) ([2832584](2832584)) * memorize calendar container component to improve perfromance ([#1575](#1575)) ([0d00a19](0d00a19)) * merge master into alpha ([7afecf9](7afecf9)) * splitButton accessibility improvements ([#1458](#1458)) ([51a1b14](51a1b14)) * support editable input | min & max dates | dd-mm-yyyy format in CalendarInput ([#1504](#1504)) ([99a78f5](99a78f5)) * use alpha of multi calendar library ([0c6b966](0c6b966)) * verify date input only on blur on calendar input, close calendar popup on blur as well ([d8b0d1c](d8b0d1c)) * **tooltip:** accessibility improvements for tooltip ([#1463](#1463)) ([f11eabb](f11eabb)) ### Reverts * Revert "feat(selectionBar): accessibility improvements for SelectionBar (#1475)" ([54498fb](54498fb)), closes [#1475](#1475)

dhis2-bot · 2024-09-23T19:21:11Z

🎉 This PR is included in version 9.12.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [10.0.0](v9.15.0...v10.0.0) (2024-11-21) ### Bug Fixes * update calendar tests for react 18 ([98831a7](98831a7)) * update testing-library for selector-bar ([893024d](893024d)) * **calendar:** fix minor type issues ([#1588](#1588)) ([21e60a6](21e60a6)) * **calendar:** stop extra call to validation when choosing from picker ([#1623](#1623)) ([a1786d5](a1786d5)) * **calendar-input:** trigger onFocus if passed ([#1622](#1622)) ([293505d](293505d)) * bump multi calendar library version in calendar ([#1566](#1566)) ([d205016](d205016)) * bump multi calendar library version in calendar component ([#1576](#1576)) ([5f2b13d](5f2b13d)) * bump multi-calendar library ([#1615](#1615)) ([238de1f](238de1f)) * bump multi-calendar library ([#1618](#1618)) ([769c7ae](769c7ae)) * clear button and arrow alignment issues ([#1609](#1609)) ([ba0b657](ba0b657)) * stories for calendar validation ([#1616](#1616)) ([c00a2d6](c00a2d6)) * update multi-calendar library ([6aa01cc](6aa01cc)) * update yarn.lock after deduping ([5c24b02](5c24b02)) ### Features * add aria attributes to loaders ([#1449](#1449)) ([2832584](2832584)) * calendar input to work with react final form ([827c3f8](827c3f8)) * memorize calendar container component to improve perfromance ([#1575](#1575)) ([0d00a19](0d00a19)) * merge branch master into branch ([0577074](0577074)) * merge master into alpha ([7afecf9](7afecf9)) * splitButton accessibility improvements ([#1458](#1458)) ([51a1b14](51a1b14)) * support editable input | min & max dates | dd-mm-yyyy format in CalendarInput ([#1504](#1504)) ([99a78f5](99a78f5)) * use alpha of multi calendar library ([0c6b966](0c6b966)) * verify date input only on blur on calendar input, close calendar popup on blur as well ([d8b0d1c](d8b0d1c)) * **tooltip:** accessibility improvements for tooltip ([#1463](#1463)) ([f11eabb](f11eabb)) ### Reverts * Revert "feat(selectionBar): accessibility improvements for SelectionBar (#1475)" ([54498fb](54498fb)), closes [#1475](#1475) ### BREAKING CHANGES * multi-calendar hook no longer returns Temporal date * fix: failing test

dhis2-bot · 2024-11-21T14:45:28Z

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

dhis2-bot temporarily deployed to netlify February 9, 2024 19:56 Inactive

d-rita force-pushed the LIBS-560/loader-accessibility branch from 871840d to 5b3b10f Compare February 13, 2024 23:59

dhis2-bot temporarily deployed to netlify February 14, 2024 00:03 Inactive

d-rita marked this pull request as ready for review February 14, 2024 00:06

d-rita requested a review from a team as a code owner February 14, 2024 00:06

d-rita requested a review from kabaros February 14, 2024 00:06

d-rita force-pushed the LIBS-560/loader-accessibility branch from 5b3b10f to ac2b17b Compare February 15, 2024 12:06

dhis2-bot temporarily deployed to netlify February 15, 2024 12:10 Inactive

kabaros approved these changes Feb 15, 2024

View reviewed changes

kabaros requested a review from cooper-joe February 15, 2024 14:03

cooper-joe approved these changes Feb 16, 2024

View reviewed changes

kabaros requested changes Feb 20, 2024

View reviewed changes

components/loader/src/circular-loader/__tests__/circular-loader.test.js Outdated Show resolved Hide resolved

kabaros changed the base branch from master to alpha March 18, 2024 15:38

kabaros approved these changes Mar 18, 2024

View reviewed changes

d-rita and others added 2 commits March 18, 2024 15:40

feat: add aria attributes to loaders

a127b43

- Add aria-valuenow attribute to linear loader - Add aria-label attribute to both linear and circular loaders - Add unit tests for loaders

refactor: change aria-label to use hyphen after code review

d523821

Co-authored-by: Diana Nanyanzi <[email protected]>

kabaros force-pushed the LIBS-560/loader-accessibility branch from d3f5809 to d523821 Compare March 18, 2024 15:41

kabaros approved these changes Mar 18, 2024

View reviewed changes

kabaros merged commit 2832584 into alpha Mar 18, 2024
3 checks passed

kabaros deleted the LIBS-560/loader-accessibility branch March 18, 2024 15:52

dhis2-bot temporarily deployed to netlify March 18, 2024 15:58 Inactive

dhis2-bot added the released on @alpha label Mar 19, 2024

kabaros added the accessibility label Apr 25, 2024

dhis2-bot added the released label Nov 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add aria attributes to loaders #1449

feat: add aria attributes to loaders #1449

d-rita commented Feb 9, 2024 •

edited

Loading

dhis2-bot commented Feb 9, 2024 •

edited

Loading

cypress bot commented Feb 14, 2024 •

edited

Loading

kabaros left a comment

kabaros Feb 15, 2024

cooper-joe Feb 16, 2024

dhis2-bot commented Mar 19, 2024

dhis2-bot commented Jun 17, 2024

dhis2-bot commented Sep 23, 2024

dhis2-bot commented Nov 21, 2024

feat: add aria attributes to loaders #1449

feat: add aria attributes to loaders #1449

Conversation

d-rita commented Feb 9, 2024 • edited Loading

Description

Checklist

dhis2-bot commented Feb 9, 2024 • edited Loading

cypress bot commented Feb 14, 2024 • edited Loading

Passing run #3230 ↗︎

Review all test suite changes for PR #1449 ↗︎

kabaros left a comment

Choose a reason for hiding this comment

kabaros Feb 15, 2024

Choose a reason for hiding this comment

cooper-joe Feb 16, 2024

Choose a reason for hiding this comment

dhis2-bot commented Mar 19, 2024

dhis2-bot commented Jun 17, 2024

dhis2-bot commented Sep 23, 2024

dhis2-bot commented Nov 21, 2024

d-rita commented Feb 9, 2024 •

edited

Loading

dhis2-bot commented Feb 9, 2024 •

edited

Loading

cypress bot commented Feb 14, 2024 •

edited

Loading