feat: splitButton accessibility improvements #1458
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
🚀 Deployed on https://pr-1458--dhis2-ui.netlify.app |
Passing run #3280 ↗︎
Details:
Review all test suite changes for PR #1458 ↗︎ |
|||||||||||||||
Birkbjo
reviewed
Feb 26, 2024
kabaros
requested changes
Mar 18, 2024
| @@ -94,6 +113,8 @@ class SplitButton extends Component { | |||
| tabIndex={tabIndex} | |||
| className={cx(className, rightButton.className)} | |||
| dataTest={`${dataTest}-toggle`} | |||
| title="Toggle dropdown" | |||
| expect(getByText('Click me')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('toggles dropdown when right button is clicked', () => { |
There was a problem hiding this comment.
it's left button, not right?
Comment on lines
59
to
76
| 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() | ||
| }) | ||
| }) |
There was a problem hiding this comment.
one of these tests is enough (maybe remvoe the space bar one)
kabaros
approved these changes
Mar 18, 2024
kabaros
force-pushed
the
LIBS-566/splitButton-accessibility
branch
from
f4c9bb9
to
e1400a3
Compare
dhis2-bot
added a commit
that referenced
this pull request
Mar 19, 2024
# [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))
kabaros
added a commit
that referenced
this pull request
Jun 3, 2024
* feat: splitButton accessibility improvements * feat: splitButton accessibility improvements * feat: splitButton accessibility improvements * refactor: apply code review comments (pairing session) --------- Co-authored-by: Mozafar Haider <mozafar@dhis2.org>
dhis2-bot
added a commit
that referenced
this pull request
Jun 3, 2024
# [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))
alaa-yahia
pushed a commit
that referenced
this pull request
Jun 10, 2024
* feat: splitButton accessibility improvements * feat: splitButton accessibility improvements * feat: splitButton accessibility improvements * refactor: apply code review comments (pairing session) --------- Co-authored-by: Mozafar Haider <mozafar@dhis2.org>
alaa-yahia
pushed a commit
that referenced
this pull request
Jun 10, 2024
* **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))
dhis2-bot
added a commit
that referenced
this pull request
Jun 17, 2024
# [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
added a commit
that referenced
this pull request
Sep 23, 2024
# [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)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
update accessibility in SplitButton component
Description
Implemented LIBS-566 by updating the SplitButton component to improve accessibility. This includes adding
titleandaria-labelattributes to the toggle button to provide better context for screen readers. Additionally, made the splitButton close when the escape button is closed.Known issues
Checklist
Screenshots
Additional Notes
SplitButtoncomponent to includetitleandaria-labelattributes for improved accessibility.supporting text