feat: splitButton accessibility improvements #1458

Chisomchima · 2024-02-22T14:02:36Z

update accessibility in SplitButton component

Description

Implemented LIBS-566 by updating the SplitButton component to improve accessibility. This includes adding title and aria-label attributes to the toggle button to provide better context for screen readers. Additionally, made the splitButton close when the escape button is closed.

Known issues

None

Checklist

API docs are generated
Tests were added
Storybook demos were added

Screenshots

None

Additional Notes

Updated the SplitButton component to include title and aria-label attributes for improved accessibility.
Allowed use of "escape" button on the keyboard to close the split button.
Tests were added to ensure proper functionality and accessibility.
Reviewed and updated relevant documentation.

supporting text

dhis2-bot · 2024-02-22T14:06:36Z

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

cypress · 2024-02-22T14:09:52Z

Passing run #3280 ↗︎

0	584	0	0	0

Details:

refactor: apply code review comments (pairing session)
Project: ui	Commit: `e1400a37ca`
Status: Passed	Duration: 07:32 💡
Started: Mar 18, 2024 4:58 PM	Ended: Mar 18, 2024 5:06 PM

Review all test suite changes for PR #1458 ↗︎

components/button/src/split-button/split-button.js

…n-accessibility

kabaros · 2024-03-18T15:57:50Z

components/button/src/split-button/split-button.js

@@ -94,6 +113,8 @@ class SplitButton extends Component {
                    tabIndex={tabIndex}
                    className={cx(className, rightButton.className)}
                    dataTest={`${dataTest}-toggle`}
+                    title="Toggle dropdown"


use i18n for the labels

kabaros · 2024-03-18T15:58:36Z

components/button/src/split-button/split-button.test.js

+        expect(getByText('Click me')).toBeInTheDocument()
+    })
+
+    it('toggles dropdown when right button is clicked', () => {


it's left button, not right?

kabaros · 2024-03-18T16:01:19Z

components/button/src/split-button/split-button.test.js

+    it("does not close dropdown 'SpaceBar' key is pressed", async () => {
+        const { getByTestId } = render(
+            <SplitButton component={<div>Dropdown Content</div>} />
+        )
+
+        const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle')
+        fireEvent.click(toggleButton)
+        expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument()
+
+        fireEvent.keyDown(document, { key: ' ' })
+
+        // Use waitFor to wait for the DOM to update
+        await waitFor(() => {
+            expect(
+                getByTestId('dhis2-uicore-splitbutton-menu')
+            ).toBeInTheDocument()
+        })
+    })


one of these tests is enough (maybe remvoe the space bar one)

# [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:43Z

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

The release is available on:

Your semantic-release bot 📦🚀

* feat: splitButton accessibility improvements * feat: splitButton accessibility improvements * feat: splitButton accessibility improvements * refactor: apply code review comments (pairing session) --------- Co-authored-by: Mozafar Haider <[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: splitButton accessibility improvements * feat: splitButton accessibility improvements * feat: splitButton accessibility improvements * refactor: apply code review comments (pairing session) --------- Co-authored-by: Mozafar Haider <[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:12Z

🎉 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:05Z

🎉 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:34Z

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat: splitButton accessibility improvements

40b07d8

Chisomchima requested a review from a team as a code owner February 22, 2024 14:02

Chisomchima marked this pull request as draft February 22, 2024 14:02

dhis2-bot temporarily deployed to netlify February 22, 2024 14:06 Inactive

Birkbjo reviewed Feb 26, 2024

View reviewed changes

components/button/src/split-button/split-button.js Show resolved Hide resolved

Chisomchima added 2 commits February 27, 2024 08:36

feat: splitButton accessibility improvements

5754e19

feat: splitButton accessibility improvements

2074eb7

dhis2-bot temporarily deployed to netlify February 27, 2024 07:41 Inactive

Chisomchima marked this pull request as ready for review February 27, 2024 07:56

Merge branch 'master' of github.com:dhis2/ui into LIBS-566/splitButto…

8a64d2c

…n-accessibility

Chisomchima requested a review from kabaros March 7, 2024 10:17

dhis2-bot temporarily deployed to netlify March 7, 2024 10:22 Inactive

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

kabaros requested changes Mar 18, 2024

View reviewed changes

kabaros approved these changes Mar 18, 2024

View reviewed changes

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

refactor: apply code review comments (pairing session)

e1400a3

kabaros force-pushed the LIBS-566/splitButton-accessibility branch from f4c9bb9 to e1400a3 Compare March 18, 2024 16:29

dhis2-bot temporarily deployed to netlify March 19, 2024 13:56 Inactive

kabaros merged commit 51a1b14 into alpha Mar 19, 2024
13 checks passed

kabaros deleted the LIBS-566/splitButton-accessibility branch March 19, 2024 14:21

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

kabaros added the accessibility label Apr 25, 2024

kabaros mentioned this pull request Jul 3, 2024

feat: implement split-button accessibility #1512

Closed

dhis2-bot added the released label Nov 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: splitButton accessibility improvements #1458

feat: splitButton accessibility improvements #1458

Chisomchima commented Feb 22, 2024 •

edited by jira bot

Loading

dhis2-bot commented Feb 22, 2024 •

edited

Loading

cypress bot commented Feb 22, 2024 •

edited

Loading

kabaros Mar 18, 2024

kabaros Mar 18, 2024

kabaros Mar 18, 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: splitButton accessibility improvements #1458

feat: splitButton accessibility improvements #1458

Conversation

Chisomchima commented Feb 22, 2024 • edited by jira bot Loading

Description

Known issues

Checklist

Screenshots

Additional Notes

dhis2-bot commented Feb 22, 2024 • edited Loading

cypress bot commented Feb 22, 2024 • edited Loading

Passing run #3280 ↗︎

Review all test suite changes for PR #1458 ↗︎

kabaros Mar 18, 2024

Choose a reason for hiding this comment

kabaros Mar 18, 2024

Choose a reason for hiding this comment

kabaros Mar 18, 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

Chisomchima commented Feb 22, 2024 •

edited by jira bot

Loading

dhis2-bot commented Feb 22, 2024 •

edited

Loading

cypress bot commented Feb 22, 2024 •

edited

Loading