feat(ui5-select): add ui5-option-group component for grouped options - #13913
feat(ui5-select): add ui5-option-group component for grouped options#13913plamenivanov91 wants to merge 3 commits into
Conversation
Introduces ui5-option-group, a new public component that allows grouping options inside ui5-select, matching the ComboBox's ui5-combobox-item-group API pattern. Key changes: - New ui5-option-group component extending ListItemGroup, with individualSlots: true and ARIA group semantics (role="group", aria-label, aria-roledescription) - Select._flatOptions getter flattens grouped + ungrouped options for all navigation and selection logic - Per-group aria-setsize/aria-posinset injected via _forcedSetsize and _forcedPosinset on Option, rendered via ListItemBaseTemplate - Hidden live-region span on the Select trigger announces option count and group count on focus (aria-describedby) - IOptionGroup interface exported from Select.ts for consumers - Website docs sample added (OptionGroups) JIRA: BGSOFUIPIRIN-7094
|
🚀 Deployed on https://pr-13913--ui5-webcomponents-preview.netlify.app |
👋 Heads-up: dev close is in effectThanks for the contribution! This repository is currently in dev close ahead of release This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):
Could you please hold off on merging into If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.
Posted automatically by the Dev Close Notice workflow. |
| * @constructor | ||
| * @extends ListItemGroup | ||
| * @public | ||
| * @since 2.10.0 |
There was a problem hiding this comment.
I think this should be 2.26.0
| */ | ||
| _applyAutoSelection() { | ||
| let selectedIndex = this.options.findLastIndex(option => option.selected); | ||
| let selectedIndex = this._flatOptions.findLastIndex(option => option.selected); |
There was a problem hiding this comment.
can we cache the flatOptions here, as on each call of the getter there is a mapping, flatting and instance check?
const options = this._flatOptions;
| _select(index: number) { | ||
| const selectedIndex = this._selectedIndex; | ||
| if (index < 0 || index >= this.options.length || this.options.length === 0) { | ||
| if (index < 0 || index >= this._flatOptions.length || this._flatOptions.length === 0) { |
There was a problem hiding this comment.
cache flatOptions also here, as there are 5 call in this method.
|
|
||
| _applyFocusToSelectedItem() { | ||
| this.options.forEach(option => { | ||
| this._flatOptions.forEach(option => { |
There was a problem hiding this comment.
and cache flatOptions again here
| const group = item as IOptionGroup; | ||
| group.items.forEach((option, idx) => { | ||
| option._forcedSetsize = group.items.length; | ||
| option._forcedPosinset = idx + 1; |
There was a problem hiding this comment.
Same as UI5, according to Figma:
aria-setsize should be the total count of options and aria-posinset should be the individual position in the whole set
IlianaB
left a comment
IlianaB
left a comment
There was a problem hiding this comment.
Same as UI5:
Underline (border) of group header is missing here.
And I wonder: should a flat option also have a aria-posinset and aria-setsize ... sounds pretty logical to me. But we can ask ACC experts on this.
| responsivePopoverHeader: { | ||
| "display": this.options.length && this._listWidth === 0 ? "none" : "inline-block", | ||
| "width": `${this.options.length ? this._listWidth : this.offsetWidth}px`, | ||
| "display": this._flatOptions.length && this._listWidth === 0 ? "none" : "inline-block", |
2 participants
Introduces ui5-option-group, a new public component that allows grouping options inside ui5-select, matching the ComboBox's ui5-combobox-item-group API pattern.
Key changes:
JIRA: BGSOFUIPIRIN-7094