-
Notifications
You must be signed in to change notification settings - Fork 273
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
[Refactoring]SegmentedButton: create dedicated child component #3191
Comments
Hello @SAP/ui5-webcomponents-topic-b this request for refactoring origins from the following SegmentedButton a11y issue: #2934 After discussing it with @ghristanov and within the Web Components team, we decided to go for implementing a new child component, SegmentedButtonItem, in order to full-fill the a11y spec. You can find more details above. As the refactoring will lead to API BREAKING CHANGES, please consider this is HIGH PRIORITY task. Best, |
…child of SegmentedButton (#3258) Introduce new component SegmentedButtonItem (ui5-segmentedbutton-item), meant to be used within the SegmentedButton (ui5-segmented-button) as a child, in order to implement a11y compliant DOM structure and attributes. The SegmentedButtonItem replaces the ToggleButton, previously used in the SegmentedButton. Fixes: #3191 Closes: #3191 BREAKING_CHANGE: `selectedButton` event detail of "selection-change" has been renamed to `selectedItem` BREAKING_CHANGE: SegmentedButton no longer accepts ToggleButton, you have to use the newly created component, called SegmentedButtonItem as follows: <ui5-segmentedbutton> <ui5-segmentedbutton-item pressed>One</ui5-segmentedbutton-item> <ui5-segmentedbutton-item>Two</ui5-segmentedbutton-item> <ui5-segmentedbutton-item>Three</ui5-segmentedbutton-item> </ui5-segmentedbutton>
@ilhan007 is it possible to release this change to one SF patch version? Thanks |
Hello @BennyHuang we can, but as it's a breaking change, could you post a message in the SFSF channel to let everyone know and make sure that everyone is fine with downporting it. |
…child of SegmentedButton (#3258) Introduce new component SegmentedButtonItem (ui5-segmentedbutton-item), meant to be used within the SegmentedButton (ui5-segmented-button) as a child, in order to implement a11y compliant DOM structure and attributes. The SegmentedButtonItem replaces the ToggleButton, previously used in the SegmentedButton. Fixes: #3191 Closes: #3191 BREAKING_CHANGE: `selectedButton` event detail of "selection-change" has been renamed to `selectedItem` BREAKING_CHANGE: SegmentedButton no longer accepts ToggleButton, you have to use the newly created component, called SegmentedButtonItem as follows: <ui5-segmentedbutton> <ui5-segmentedbutton-item pressed>One</ui5-segmentedbutton-item> <ui5-segmentedbutton-item>Two</ui5-segmentedbutton-item> <ui5-segmentedbutton-item>Three</ui5-segmentedbutton-item> </ui5-segmentedbutton>
Is your feature request related to a problem? Please describe.
To full-fill the accessibility spec of the SegmentedButton, we would need to perform a significant DOM refactoring.
The ToggleButton component can't be used as a child of the SegmentedButton as certain aria attributes requires different DOM elements. And, we can't change the ToggleButton for the purpose of the SegmentedButton.
That's why we will need a new dedicated component - SegmentedButtonItem, that would like look and act the same as the ToggleButton, but will be rendered with different DOM elements and aria attributes.
Stakeholder
SuccessFactors
Origin issue
#2934
Reference
https://openui5nightly.hana.ondemand.com/entity/sap.m.SegmentedButton/sample/sap.m.sample.SegmentedButton
Contact Person on accessibility questions
@ghristanov
Usage
Note
The tag name can be discussed, this is an example, if you come up with better suggestion, please raise it.
Another solution Considered
We also considered leaving the ToggleButton as it is now, and internally wrap the toggle buttons with new elements and provide the required aria attrs on that elements, but then we would also have to bring the focus to these new elements and the toggle buttons start looking obsolete and the DOM too complex. That's why we want to stick to the aforementioned solution
The text was updated successfully, but these errors were encountered: