fix(CUI-7441): Coral.CycleButton: fix menuitemradio and menuitem roles #153
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
Per https://jira.corp.adobe.com/browse/CUI-7441 In both the CoralUI and Coral Spectrum CycleButton implementations, the `menuitemradio` role on `coral-cyclebutton-item` and the `menuitem` role on `coral-cyclebutton-action` are not propagated to `coral-selectlist-item` and `button[is="coral-buttonlist-item"]` elements in the dropdown menu. Items within a menu should have a `menuitem*` role. ### Behavior can be seen in Coral Spectrum: 1. Open https://opensource.adobe.com/coral-spectrum/examples/#cyclebutton 2. Expand dropdown menu for the "With additional actions" CycleButton example. 3. Use the Web Inspector to inspect `coral-selectlist-item` elements in the `coral-selectlist[role="group"]` and `button[is="coral-buttonlist-item"]` in the `coral-buttonlist` contained within the `coral-popover[role="menu"]`. #### Expected behavior coral-selectlist-item elements should have role="menuitemradio" button[is="coral-buttonlist-item"] elements should have role="menuitem" #### Actual behavior * `coral-selectlist-item` elements have `role="option"`, which is not appropriate for an item within `role="menu"`. * `button[is="coral-buttonlist-item"]` elements have the implicit role of `button`, which is not appropriate for an item within `role="menu"`. ### Suggested fix At CycleButton.js#L653 and CycleButton.js#L668, where we are defining items for the SelectList and actions for the ButtonList, we seem to expect the role from the `coral-cyclebutton-item` or `coral-cyclebutton-action` to get applied to the SelectList.Item or ButtonList.Item, but these components do not include getters and setters for the role attribute, so the role is not applied. We should instead either explicitly set the role attribute or add a getter/setter for role to SelectList.Item and ButtonList.Item.
|
@icaraps Could I get a review? |
majornista
requested review from
lazd and
icaraps
and removed request for
lazd
icaraps
requested review from
Pareesh and
CezCz
and removed request for
icaraps
github-actions bot
pushed a commit
that referenced
this pull request
Apr 9, 2021
## [4.10.17](v4.10.16...v4.10.17) (2021-04-09) ### Bug Fixes * **CUI-7441:** Coral.CycleButton: fix menuitemradio and menuitem roles ([#153](#153)) ([7bd0ffe](7bd0ffe)), closes [CycleButton.js#L653](https://github.com/CycleButton.js/issues/L653) [CycleButton.js#L668](https://github.com/CycleButton.js/issues/L668)
|
🎉 This PR is included in version 4.10.17 🎉 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
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.
Per https://jira.corp.adobe.com/browse/CUI-7441
Description
In both the CoralUI and Coral Spectrum CycleButton implementations, the
menuitemradiorole oncoral-cyclebutton-itemand themenuitemrole oncoral-cyclebutton-actionare not propagated tocoral-selectlist-itemandbutton[is="coral-buttonlist-item"]elements in the dropdown menu. Items within a menu should have amenuitem*role.Behavior can be seen in Coral Spectrum:
coral-selectlist-itemelements in thecoral-selectlist[role="group"]andbutton[is="coral-buttonlist-item"]in thecoral-buttonlistcontained within thecoral-popover[role="menu"].Expected behavior
coral-selectlist-item elements should have role="menuitemradio"
button[is="coral-buttonlist-item"] elements should have role="menuitem"
Actual behavior
coral-selectlist-itemelements haverole="option", which is not appropriate for an item withinrole="menu".button[is="coral-buttonlist-item"]elements have the implicit role ofbutton, which is not appropriate for an item withinrole="menu".Suggested fix
At CycleButton.js#L653 and CycleButton.js#L668, where we are defining items for the SelectList and actions for the ButtonList, we seem to expect the role from the
coral-cyclebutton-itemorcoral-cyclebutton-actionto get applied to the SelectList.Item or ButtonList.Item, but these components do not include getters and setters for the role attribute, so the role is not applied. We should instead either explicitly set the role attribute or add a getter/setter for role to SelectList.Item and ButtonList.Item.Related Issue
https://jira.corp.adobe.com/browse/CUI-7441
Motivation and Context
Fixes accessibility implementation for items in the cycle button dropdown menu.
How Has This Been Tested?
Tested against documentation examples.
Types of changes
Checklist: