Skip to content
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

Closed
ilhan007 opened this issue Apr 28, 2021 · 3 comments · Fixed by #3258
Closed

[Refactoring]SegmentedButton: create dedicated child component #3191

ilhan007 opened this issue Apr 28, 2021 · 3 comments · Fixed by #3258

Comments

@ilhan007
Copy link
Member

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

<ui5-segmentedbutton>
     <ui5-segmentedbutton-item>One</ui5-segmentedbutton-item>
      <ui5-segmentedbutton-item>Two</ui5-segmentedbutton-item>
       <ui5-segmentedbutton-item>Three</ui5-segmentedbutton-item>
</ui5-segmentedbutton>

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

@ilhan007
Copy link
Member Author

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,
ilhan

@ilhan007 ilhan007 added the ACC label Apr 28, 2021
ilhan007 pushed a commit that referenced this issue Jun 14, 2021
…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>
@BennyHuang
Copy link

@ilhan007 is it possible to release this change to one SF patch version? Thanks

@ilhan007
Copy link
Member Author

ilhan007 commented Aug 6, 2021

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.

ilhan007 pushed a commit that referenced this issue Aug 9, 2021
…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 ilhan007 modified the milestones: 1.0.0-rc.16, 1.0.0-rc.15 Aug 18, 2021
@petyabegovska petyabegovska moved this to 1.0.0-rc.15 (released Aug) in UI5 Web Components - Roadmap Jun 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: 1.0.0-rc.15 (released Aug)
5 participants