@sapudex/web-components 2.59.0 → 2.60.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cypress/specs/SelectBox.cy.tsx +355 -249
- package/dist/ListGroupHeaderBase.js +9 -0
- package/dist/ListGroupHeaderBase.js.map +1 -1
- package/dist/ListGroupHeaderTemplate.js +15 -1
- package/dist/ListGroupHeaderTemplate.js.map +1 -1
- package/dist/MastheadCountrySelectorTemplate.js +1 -1
- package/dist/MastheadCountrySelectorTemplate.js.map +1 -1
- package/dist/SelectBase.d.ts +7 -2
- package/dist/SelectBase.js +26 -38
- package/dist/SelectBase.js.map +1 -1
- package/dist/assets/{InputSuggestions-CloTVyrf.js → InputSuggestions-DyNcKgip.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-DpquSMb2.js → ListItemStandardExpandableTextTemplate-qdKPzaOQ.js} +1 -1
- package/dist/assets/{bundle.esm-Cyz8a5IX.js → bundle.esm-sUYwSJOp.js} +8 -8
- package/dist/css/themes/FeedItem.css +1 -1
- package/dist/css/themes/ListGroupHeader.css +1 -1
- package/dist/css/themes/Pagination.css +1 -1
- package/dist/generated/themes/FeedItem.css.d.ts +1 -1
- package/dist/generated/themes/FeedItem.css.js +1 -1
- package/dist/generated/themes/FeedItem.css.js.map +1 -1
- package/dist/generated/themes/ListGroupHeader.css.d.ts +1 -1
- package/dist/generated/themes/ListGroupHeader.css.js +1 -1
- package/dist/generated/themes/ListGroupHeader.css.js.map +1 -1
- package/dist/generated/themes/Pagination.css.d.ts +1 -1
- package/dist/generated/themes/Pagination.css.js +1 -1
- package/dist/generated/themes/Pagination.css.js.map +1 -1
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
- package/src/ListGroupHeaderBase.ts +9 -0
- package/src/ListGroupHeaderTemplate.tsx +15 -3
- package/src/MastheadCountrySelectorTemplate.tsx +3 -2
- package/src/SelectBase.ts +29 -46
- package/src/generated/themes/FeedItem.css.ts +1 -1
- package/src/generated/themes/ListGroupHeader.css.ts +1 -1
- package/src/generated/themes/Pagination.css.ts +1 -1
- package/src/themes/FeedItem.css +2 -1
- package/src/themes/ListGroupHeader.css +6 -4
- package/src/themes/Pagination.css +14 -5
|
@@ -179,6 +179,15 @@ let UDExListGroupHeaderBase = class UDExListGroupHeaderBase extends UDExListItem
|
|
|
179
179
|
return this._groupAsListbox && !this._useHostAriaRole && !this._treeMode;
|
|
180
180
|
}
|
|
181
181
|
get singleCollapsibleHeaderRole() {
|
|
182
|
+
// In aria-activedescendant mode (SelectBox/CountrySelector) the HOST element
|
|
183
|
+
// carries the treeitem role + state (set via SearchableListBaseTemplate's
|
|
184
|
+
// hostAriaAttrs). The inner focusable div must then be presentational, otherwise
|
|
185
|
+
// it is a second treeitem nested inside the host treeitem with no owning
|
|
186
|
+
// tree/group — the "role not inside the required context" axe/SiteImprove error.
|
|
187
|
+
// Mirrors UDExListItem.roleItem, which is presentational under _useHostAriaRole.
|
|
188
|
+
if (this._useHostAriaRole) {
|
|
189
|
+
return "presentation";
|
|
190
|
+
}
|
|
182
191
|
return this._treeMode ? "treeitem" : "button";
|
|
183
192
|
}
|
|
184
193
|
// Pins the collapsible header's accessible name to its heading (+ supporting text)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListGroupHeaderBase.js","sourceRoot":"","sources":["../src/ListGroupHeaderBase.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport UDExListItemBase from \"./ListItemBase.js\";\n\nconst listGroupHeaderClass: string = \"udex-list__group-header\";\n\n/**\n * @class\n *\n * A class to serve as a foundation\n * for the <code>UDExListGroupHeader</code> and <code>UDExFilterMenuGroupHeader</code> classes.\n *\n * @constructor\n * @author SAP SE\n * @extends UDExListItemBase\n * @public\n */\n@customElement({\n languageAware: true,\n renderer: jsxRenderer,\n})\n\nclass UDExListGroupHeaderBase extends UDExListItemBase {\n /**\n * Defines non-interactive the group header.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n nonInteractive!: boolean;\n\n @property({ type: String })\n _additionalClassName!: string;\n\n /**\n * Marks the group header as part of a tree structure. When true, the header\n * renders as a treeitem and its children container as a group.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _treeMode: boolean = false;\n\n /**\n * Marks the group as a self-contained role=\"listbox\" (FilterMenu real-focus\n * SingleSelect, non-collapsible groups). When true, this group's options are\n * wrapped in their own listbox so JAWS counts them natively per group. Set by\n * the parent (SearchableListBase.isPerGroupListbox) only when the whole list is\n * grouped; the outer #udex-list drops its listbox role in that case.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _groupAsListbox: boolean = false;\n\n /**\n * Slot for group header list items.\n *\n * @slot items\n * @public\n */\n @slot({ type: UDExListItemBase, \"default\": true })\n items!: DefaultSlot<UDExListItemBase>;\n\n handleSelectionGroupState() {\n const isAnyEnabledOption = this.isAnyEnabledOption();\n\n if (!isAnyEnabledOption) {\n return;\n }\n\n const isAllSelectedGroupState = this.isAllSelected();\n const isIndeterminateGroupState = this.indeterminate;\n\n if (isAllSelectedGroupState) {\n this.processGroupDeselectAll();\n } else if (isIndeterminateGroupState) {\n this.toggleIndeterminateGroupState();\n } else {\n this.processGroupSelectAll();\n }\n }\n\n processGroupDeselectAll() {\n const isAnySelectedOptionDisabled = this.isAnySelectedOptionDisabled();\n\n this.setAllItems(false);\n\n if (isAnySelectedOptionDisabled) {\n this.activateHeaderIndeterminate();\n } else {\n this.deactivateHeader();\n }\n }\n\n toggleIndeterminateGroupState() {\n const isEachEnabledOptionSelected = this.isEachEnabledOptionSelected();\n\n if (isEachEnabledOptionSelected) {\n this.processGroupDeselectAll();\n } else {\n this.processGroupSelectAll();\n }\n }\n\n processGroupSelectAll() {\n const isAnyNotSelectedOptionDisabled = this.isAnyNotSelectedOptionDisabled();\n\n this.setAllItems(true);\n\n if (isAnyNotSelectedOptionDisabled) {\n this.activateHeaderIndeterminate();\n } else {\n this.activateHeader();\n }\n }\n\n handleHeaderState() {\n const isAllSelected = this.isAllSelected();\n const isAllDeselected = this.isAllDeselected();\n\n if (isAllDeselected) {\n this.deactivateHeader();\n return;\n }\n\n if (isAllSelected) {\n this.activateHeader();\n return;\n }\n\n this.activateHeaderIndeterminate();\n }\n\n activateHeaderIndeterminate() {\n this.selected = true;\n this.indeterminate = true;\n }\n\n activateHeader() {\n this.indeterminate = false;\n this.selected = true;\n }\n\n deactivateHeader() {\n this.selected = false;\n this.indeterminate = false;\n }\n\n setAllItems(value: boolean) {\n this.getItems().forEach(item => {\n if (!item.disabled) {\n item.selected = value;\n }\n });\n }\n\n isAllSelected(): boolean {\n return this.getItems().every(({ selected }) => selected);\n }\n\n isAllDeselected(): boolean {\n return this.getItems().every(({ selected }) => !selected);\n }\n\n isEachEnabledOptionSelected(): boolean {\n return this.getItems().every(item => item.disabled || item.selected);\n }\n\n isAnyNotSelectedOptionDisabled(): boolean {\n return this.getItems().some(item => !item.selected && item.disabled);\n }\n\n isAnySelected(): boolean {\n return this.getItems().some(item => item.selected);\n }\n\n isAnySelectedOptionDisabled(): boolean {\n return this.getItems().some(({ disabled, selected }) => disabled && selected);\n }\n\n isAnyEnabledOption(): boolean {\n return this.getItems().some(({ disabled }) => !disabled);\n }\n\n getItems(): Array<UDExListItemBase> {\n return this.getSlottedNodes<UDExListItemBase>(\"items\");\n }\n\n get isGroup(): boolean {\n return true;\n }\n\n get isSelectAllHeader(): boolean {\n return false;\n }\n\n get isFilterMenuSelectAllHeader(): boolean {\n return false;\n }\n\n get isNonActiveHeader(): boolean {\n return this.nonInteractive || this.modeRadioGroup;\n }\n\n /**\n * Decides which collapsible-header partial to render.\n * Uses the udex-list-item-based partial for MultiSelect/RadioGroup only.\n * SingleSelect collapsible headers use the plain div partial — the list-item\n * partial fires its own Enter/Space/click selection handlers that must not run.\n */\n get useListItemHeader(): boolean {\n return this.modeMultiSelectOrRadioGroup;\n }\n\n get isTreeAccessibleRole(): boolean {\n return this._treeMode;\n }\n\n // FilterMenu real-focus SingleSelect non-collapsible group: its options are\n // rendered inside their own role=\"listbox\" so JAWS counts them natively per\n // group (\"1 of 4\"). JAWS ignores role=\"group\" boundaries and author\n // aria-posinset within a single listbox, but counts reliably within a flat\n // listbox. Excludes SelectBox (_useHostAriaRole) and tree mode.\n get isPerGroupListbox(): boolean {\n return this._groupAsListbox && !this._useHostAriaRole && !this._treeMode;\n }\n\n get singleCollapsibleHeaderRole(): string {\n return this._treeMode ? \"treeitem\" : \"button\";\n }\n\n // Pins the collapsible header's accessible name to its heading (+ supporting text)\n // so the decorative expand/collapse chevron button — a child of the header — does\n // not fold its \"Expand\"/\"Collapse\" label into the header's name. The chevron is a\n // mouse affordance only (tabindex=-1); its state is already conveyed by\n // aria-expanded, so excluding its name avoids announcing \"Collapse\" alongside the\n // spoken \"expanded\"/\"collapsed\" state.\n get collapsibleHeaderLabelledBy(): string {\n return this.supportingText ? \"group-heading group-supporting-text\" : \"group-heading\";\n }\n\n get collapsibleHeaderAccessibleRole(): string {\n return this._treeMode ? \"treeitem\" : \"button\";\n }\n\n get groupWrapperRole(): string {\n if (this._useHostAriaRole) {\n return \"presentation\";\n }\n // Tree mode keeps the treeitem/group nesting; per-group-listbox mode moves the\n // single labelled role=\"listbox\" onto the inner options wrapper — the outer div\n // is transparent so screen readers don't announce a redundant \"group\" around it.\n if (this._treeMode || this.isPerGroupListbox) {\n return \"none\";\n }\n return \"group\";\n }\n\n get contentRegionRole(): string {\n return this._treeMode ? \"group\" : \"region\";\n }\n\n get nonCollapsibleContainerRole(): string {\n // The single role=\"group\" for non-collapsible headers lives on the outer\n // div.udex-list__group wrapper (groupWrapperRole = \"group\" in non-tree mode,\n // labelled by aria-labelledby=\"group-heading\"). This container div must be\n // transparent so that extra \"group group\" announcements are avoided.\n return \"none\";\n }\n\n get nonCollapsibleHeaderAccessibleRole(): string | undefined {\n return this._treeMode ? \"treeitem\" : undefined;\n }\n\n get className(): string {\n const controlledClassName = this.controlled ? `${listGroupHeaderClass}_controlled` : \"\";\n return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName} ${listGroupHeaderClass}-wrap`;\n }\n\n get listItem(): UDExListItemBase {\n return this.shadowRoot!.querySelector<UDExListItemBase>(\"[udex-list-item]\")!;\n }\n}\n\nexport default UDExListGroupHeaderBase;\n"]}
|
|
1
|
+
{"version":3,"file":"ListGroupHeaderBase.js","sourceRoot":"","sources":["../src/ListGroupHeaderBase.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport UDExListItemBase from \"./ListItemBase.js\";\n\nconst listGroupHeaderClass: string = \"udex-list__group-header\";\n\n/**\n * @class\n *\n * A class to serve as a foundation\n * for the <code>UDExListGroupHeader</code> and <code>UDExFilterMenuGroupHeader</code> classes.\n *\n * @constructor\n * @author SAP SE\n * @extends UDExListItemBase\n * @public\n */\n@customElement({\n languageAware: true,\n renderer: jsxRenderer,\n})\n\nclass UDExListGroupHeaderBase extends UDExListItemBase {\n /**\n * Defines non-interactive the group header.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n nonInteractive!: boolean;\n\n @property({ type: String })\n _additionalClassName!: string;\n\n /**\n * Marks the group header as part of a tree structure. When true, the header\n * renders as a treeitem and its children container as a group.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _treeMode: boolean = false;\n\n /**\n * Marks the group as a self-contained role=\"listbox\" (FilterMenu real-focus\n * SingleSelect, non-collapsible groups). When true, this group's options are\n * wrapped in their own listbox so JAWS counts them natively per group. Set by\n * the parent (SearchableListBase.isPerGroupListbox) only when the whole list is\n * grouped; the outer #udex-list drops its listbox role in that case.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _groupAsListbox: boolean = false;\n\n /**\n * Slot for group header list items.\n *\n * @slot items\n * @public\n */\n @slot({ type: UDExListItemBase, \"default\": true })\n items!: DefaultSlot<UDExListItemBase>;\n\n handleSelectionGroupState() {\n const isAnyEnabledOption = this.isAnyEnabledOption();\n\n if (!isAnyEnabledOption) {\n return;\n }\n\n const isAllSelectedGroupState = this.isAllSelected();\n const isIndeterminateGroupState = this.indeterminate;\n\n if (isAllSelectedGroupState) {\n this.processGroupDeselectAll();\n } else if (isIndeterminateGroupState) {\n this.toggleIndeterminateGroupState();\n } else {\n this.processGroupSelectAll();\n }\n }\n\n processGroupDeselectAll() {\n const isAnySelectedOptionDisabled = this.isAnySelectedOptionDisabled();\n\n this.setAllItems(false);\n\n if (isAnySelectedOptionDisabled) {\n this.activateHeaderIndeterminate();\n } else {\n this.deactivateHeader();\n }\n }\n\n toggleIndeterminateGroupState() {\n const isEachEnabledOptionSelected = this.isEachEnabledOptionSelected();\n\n if (isEachEnabledOptionSelected) {\n this.processGroupDeselectAll();\n } else {\n this.processGroupSelectAll();\n }\n }\n\n processGroupSelectAll() {\n const isAnyNotSelectedOptionDisabled = this.isAnyNotSelectedOptionDisabled();\n\n this.setAllItems(true);\n\n if (isAnyNotSelectedOptionDisabled) {\n this.activateHeaderIndeterminate();\n } else {\n this.activateHeader();\n }\n }\n\n handleHeaderState() {\n const isAllSelected = this.isAllSelected();\n const isAllDeselected = this.isAllDeselected();\n\n if (isAllDeselected) {\n this.deactivateHeader();\n return;\n }\n\n if (isAllSelected) {\n this.activateHeader();\n return;\n }\n\n this.activateHeaderIndeterminate();\n }\n\n activateHeaderIndeterminate() {\n this.selected = true;\n this.indeterminate = true;\n }\n\n activateHeader() {\n this.indeterminate = false;\n this.selected = true;\n }\n\n deactivateHeader() {\n this.selected = false;\n this.indeterminate = false;\n }\n\n setAllItems(value: boolean) {\n this.getItems().forEach(item => {\n if (!item.disabled) {\n item.selected = value;\n }\n });\n }\n\n isAllSelected(): boolean {\n return this.getItems().every(({ selected }) => selected);\n }\n\n isAllDeselected(): boolean {\n return this.getItems().every(({ selected }) => !selected);\n }\n\n isEachEnabledOptionSelected(): boolean {\n return this.getItems().every(item => item.disabled || item.selected);\n }\n\n isAnyNotSelectedOptionDisabled(): boolean {\n return this.getItems().some(item => !item.selected && item.disabled);\n }\n\n isAnySelected(): boolean {\n return this.getItems().some(item => item.selected);\n }\n\n isAnySelectedOptionDisabled(): boolean {\n return this.getItems().some(({ disabled, selected }) => disabled && selected);\n }\n\n isAnyEnabledOption(): boolean {\n return this.getItems().some(({ disabled }) => !disabled);\n }\n\n getItems(): Array<UDExListItemBase> {\n return this.getSlottedNodes<UDExListItemBase>(\"items\");\n }\n\n get isGroup(): boolean {\n return true;\n }\n\n get isSelectAllHeader(): boolean {\n return false;\n }\n\n get isFilterMenuSelectAllHeader(): boolean {\n return false;\n }\n\n get isNonActiveHeader(): boolean {\n return this.nonInteractive || this.modeRadioGroup;\n }\n\n /**\n * Decides which collapsible-header partial to render.\n * Uses the udex-list-item-based partial for MultiSelect/RadioGroup only.\n * SingleSelect collapsible headers use the plain div partial — the list-item\n * partial fires its own Enter/Space/click selection handlers that must not run.\n */\n get useListItemHeader(): boolean {\n return this.modeMultiSelectOrRadioGroup;\n }\n\n get isTreeAccessibleRole(): boolean {\n return this._treeMode;\n }\n\n // FilterMenu real-focus SingleSelect non-collapsible group: its options are\n // rendered inside their own role=\"listbox\" so JAWS counts them natively per\n // group (\"1 of 4\"). JAWS ignores role=\"group\" boundaries and author\n // aria-posinset within a single listbox, but counts reliably within a flat\n // listbox. Excludes SelectBox (_useHostAriaRole) and tree mode.\n get isPerGroupListbox(): boolean {\n return this._groupAsListbox && !this._useHostAriaRole && !this._treeMode;\n }\n\n get singleCollapsibleHeaderRole(): string {\n // In aria-activedescendant mode (SelectBox/CountrySelector) the HOST element\n // carries the treeitem role + state (set via SearchableListBaseTemplate's\n // hostAriaAttrs). The inner focusable div must then be presentational, otherwise\n // it is a second treeitem nested inside the host treeitem with no owning\n // tree/group — the \"role not inside the required context\" axe/SiteImprove error.\n // Mirrors UDExListItem.roleItem, which is presentational under _useHostAriaRole.\n if (this._useHostAriaRole) {\n return \"presentation\";\n }\n return this._treeMode ? \"treeitem\" : \"button\";\n }\n\n // Pins the collapsible header's accessible name to its heading (+ supporting text)\n // so the decorative expand/collapse chevron button — a child of the header — does\n // not fold its \"Expand\"/\"Collapse\" label into the header's name. The chevron is a\n // mouse affordance only (tabindex=-1); its state is already conveyed by\n // aria-expanded, so excluding its name avoids announcing \"Collapse\" alongside the\n // spoken \"expanded\"/\"collapsed\" state.\n get collapsibleHeaderLabelledBy(): string {\n return this.supportingText ? \"group-heading group-supporting-text\" : \"group-heading\";\n }\n\n get collapsibleHeaderAccessibleRole(): string {\n return this._treeMode ? \"treeitem\" : \"button\";\n }\n\n get groupWrapperRole(): string {\n if (this._useHostAriaRole) {\n return \"presentation\";\n }\n // Tree mode keeps the treeitem/group nesting; per-group-listbox mode moves the\n // single labelled role=\"listbox\" onto the inner options wrapper — the outer div\n // is transparent so screen readers don't announce a redundant \"group\" around it.\n if (this._treeMode || this.isPerGroupListbox) {\n return \"none\";\n }\n return \"group\";\n }\n\n get contentRegionRole(): string {\n return this._treeMode ? \"group\" : \"region\";\n }\n\n get nonCollapsibleContainerRole(): string {\n // The single role=\"group\" for non-collapsible headers lives on the outer\n // div.udex-list__group wrapper (groupWrapperRole = \"group\" in non-tree mode,\n // labelled by aria-labelledby=\"group-heading\"). This container div must be\n // transparent so that extra \"group group\" announcements are avoided.\n return \"none\";\n }\n\n get nonCollapsibleHeaderAccessibleRole(): string | undefined {\n return this._treeMode ? \"treeitem\" : undefined;\n }\n\n get className(): string {\n const controlledClassName = this.controlled ? `${listGroupHeaderClass}_controlled` : \"\";\n return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName} ${listGroupHeaderClass}-wrap`;\n }\n\n get listItem(): UDExListItemBase {\n return this.shadowRoot!.querySelector<UDExListItemBase>(\"[udex-list-item]\")!;\n }\n}\n\nexport default UDExListGroupHeaderBase;\n"]}
|
|
@@ -20,7 +20,21 @@ function SingleGroupHeaderCollapsible() {
|
|
|
20
20
|
// (aria-activedescendant, _useHostAriaRole) and non-tree modes, which keep the flat
|
|
21
21
|
// structure with the content region emitted as a sibling by the template body.
|
|
22
22
|
const nested = this.isTreeAccessibleRole && !this._useHostAriaRole;
|
|
23
|
-
|
|
23
|
+
// In aria-activedescendant mode (SelectBox) the HOST element is the treeitem and
|
|
24
|
+
// already carries aria-expanded + the accessible name. This inner div must then be
|
|
25
|
+
// presentational (singleCollapsibleHeaderRole) and must NOT duplicate those states,
|
|
26
|
+
// otherwise it is a second treeitem nested inside the host treeitem with no owning
|
|
27
|
+
// tree/group (axe/SiteImprove aria-required-parent). It stays focusable, though:
|
|
28
|
+
// clicking the collapsible-header body relies on it receiving DOM focus to redirect
|
|
29
|
+
// focus back to the combobox input — the same focusable, role="presentation" shape
|
|
30
|
+
// the list-item [part=item] divs already use. The real-focus (FilterMenu) path keeps
|
|
31
|
+
// the treeitem semantics plus controls/labelling on this div.
|
|
32
|
+
const headerAriaAttrs = this._useHostAriaRole ? {} : {
|
|
33
|
+
"aria-expanded": this.expanded,
|
|
34
|
+
"aria-controls": this.ariaControlsId,
|
|
35
|
+
"aria-labelledby": this.collapsibleHeaderLabelledBy,
|
|
36
|
+
};
|
|
37
|
+
return (_jsx("div", { class: `udex-list__group-content ${nested ? "udex-list__group-content--nested " : ""}udex-list__group-header-wrap ${this.sizeClass}`, part: "group-item", id: `${this._id}_group-content__focusable`, role: this.singleCollapsibleHeaderRole, tabIndex: 0, onKeyDown: this.handleKeyDown, ...headerAriaAttrs, "_tab-index": Number(this._effectiveTabIndex), children: nested ? (_jsxs(_Fragment, { children: [_jsx("div", { class: "udex-list__group-header-row", children: SingleCollapsibleHeaderRow.call(this) }), _jsx("div", { id: this.ariaControlsId, role: this.contentRegionRole, class: "udex-list__group-list__content", children: _jsx("slot", {}) })] })) : (SingleCollapsibleHeaderRow.call(this)) }));
|
|
24
38
|
}
|
|
25
39
|
function MultiOrRadioGroupHeader() {
|
|
26
40
|
if (this.isNonActiveHeader) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListGroupHeaderTemplate.js","sourceRoot":"","sources":["../src/ListGroupHeaderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type UDExListGroupHeader from \"./ListGroupHeader.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExButton from \"./Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nfunction SingleGroupHeader(this: UDExListGroupHeader) {\n return (\n <div class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`} part=\"group-item\">\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n name={this._icon}\n />\n )}\n <div class=\"udex-list__header\">\n <span\n id=\"group-heading\"\n class=\"udex-list__header-title\"\n {...({ innerHTML: this.label } as object)}>\n </span>\n {this.supportingText && (\n <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>\n )}\n </div>\n </div>\n );\n}\n\n// The visible header row of the single-select collapsible group: number/icon,\n// heading + supporting text, and the expand/collapse chevron.\nfunction SingleCollapsibleHeaderRow(this: UDExListGroupHeader) {\n return (\n <>\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n name={this._icon}\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n />\n )}\n <div class=\"udex-list__header\">\n <span\n id=\"group-heading\"\n class=\"udex-list__header-title\"\n {...({ innerHTML: this.label } as object)}>\n </span>\n {this.supportingText && (\n <span id=\"group-supporting-text\" class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>\n )}\n </div>\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n size=\"Small\"\n design=\"Tertiary\"\n class=\"udex-list__group-heading__icon\"\n onClick={this.handleCollapseIconClick as unknown as EventListener}\n onMouseDown={this.handleCollapseIconMouseDown}\n tabindex={-1}\n accessible-name={this.expandButtonAccessibleName}\n icon={slimArrowRight}\n {...({ \"mode\": \"Interactive\" } as object)}\n />\n </div>\n </>\n );\n}\n\nfunction SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {\n // Conformant WAI-ARIA tree (FilterMenu real focus): nest the child role=\"group\"\n // INSIDE this treeitem so screen readers count children per group natively — no\n // explicit aria-posinset/aria-setsize (which JAWS distrusts). Excludes SelectBox\n // (aria-activedescendant, _useHostAriaRole) and non-tree modes, which keep the flat\n // structure with the content region emitted as a sibling by the template body.\n const nested = this.isTreeAccessibleRole && !this._useHostAriaRole;\n return (\n <div\n class={`udex-list__group-content ${nested ? \"udex-list__group-content--nested \" : \"\"}udex-list__group-header-wrap ${this.sizeClass}`}\n part=\"group-item\"\n id={`${this._id}_group-content__focusable`}\n role={this.singleCollapsibleHeaderRole as AriaRole}\n tabIndex={0}\n onKeyDown={this.handleKeyDown}\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}\n aria-labelledby={this.collapsibleHeaderLabelledBy}\n _tab-index={Number(this._effectiveTabIndex)}>\n {nested ? (\n <>\n <div class=\"udex-list__group-header-row\">\n {SingleCollapsibleHeaderRow.call(this)}\n </div>\n <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class=\"udex-list__group-list__content\">\n <slot></slot>\n </div>\n </>\n ) : (\n SingleCollapsibleHeaderRow.call(this)\n )}\n </div>\n );\n}\n\nfunction MultiOrRadioGroupHeader(this: UDExListGroupHeader) {\n if (this.isNonActiveHeader) {\n return (\n <header id=\"group-heading\" class=\"udex-list__inactive-header udex-list__group-header-wrap\">\n <div class=\"udex-list__inactive-header-content\">\n <span class=\"udex-list__header-title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\">{this.supportingText}</span>\n )}\n </div>\n </header>\n );\n }\n return (\n <UDExListItem\n id=\"group-heading\"\n part=\"group-item\"\n role=\"none\"\n selected={this.selected}\n indeterminate={this.indeterminate}\n class={this.className}\n mode={this.mode}\n controlled={this.controlled}\n onClick={this.handleHeaderPress}\n onKeyDown={this.handleKeyDownPress}\n type={this.type}\n label={this.label}\n size={this.size}\n supportingText={this.supportingText}\n accessible-role={this.nonCollapsibleHeaderAccessibleRole}\n _additional-class-name={this._additionalClassName}\n _tab-index={Number(this._effectiveTabIndex)}\n _aria-pos-in-set={this._ariaPosInSet}\n _aria-set-size={this._ariaSetSize}\n _icon={this._icon}\n _filtered={this._filtered}\n />\n );\n}\n\nfunction MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {\n if (this.isNonActiveHeader) {\n return (\n <header\n role=\"button\"\n id=\"group-heading\"\n class=\"udex-list__inactive-header udex-list__group-header-wrap\"\n tabIndex={Number(this._effectiveTabIndex)}\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}>\n <div class=\"udex-list__inactive-header-content\">\n <span class=\"udex-list__header-title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\">{this.supportingText}</span>\n )}\n </div>\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n class=\"udex-list__group-heading__icon\"\n size={UDExButtonSize.Small}\n design={UDExButtonDesign.Tertiary}\n tabindex={-1}\n icon={slimArrowRight}\n onClick={this.handleCollapseIconClick as EventListener}\n accessible-name={this.expandButtonAccessibleName}\n {...({ \"mode\": \"Interactive\" } as object)}\n />\n </div>\n </header>\n );\n }\n return (\n <UDExListItem\n id=\"group-heading\"\n part=\"group-item\"\n role=\"none\"\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}\n selected={this.selected}\n indeterminate={this.indeterminate}\n collapsible={this.collapsible}\n collapsed={this.collapsed}\n class={this.className}\n mode={this.mode}\n controlled={this.controlled}\n onClick={this.handleHeaderPress}\n onKeyDown={this.handleKeyDownPress}\n type={this.type}\n label={this.label}\n size={this.size}\n supportingText={this.supportingText}\n accessible-role={this.collapsibleHeaderAccessibleRole}\n onAccordionIconClick={this.handleCollapseIconClick as EventListener}\n _additional-class-name={this._additionalClassName}\n _tab-index={Number(this._effectiveTabIndex)}\n _aria-pos-in-set={this._ariaPosInSet}\n _aria-set-size={this._ariaSetSize}\n _icon={this._icon}\n _filtered={this._filtered}\n />\n );\n}\n\nexport default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {\n // Single-select real-focus tree: SingleGroupHeaderCollapsible now emits the\n // role=\"group\" content region as a CHILD of the treeitem (conformant nesting),\n // so the template body must not also emit it as a sibling.\n const singleSelectNested = this.isTreeAccessibleRole && !this.useListItemHeader && !this._useHostAriaRole;\n return (\n <div\n part=\"item\"\n class=\"udex-list__group\"\n role={this.groupWrapperRole as AriaRole}\n aria-labelledby={(!this.isTreeAccessibleRole && !this.isPerGroupListbox) ? \"group-heading\" : undefined}>\n {this.collapsible ? (\n <div\n class=\"udex-list__group-list\"\n onui5-item-press={this.getHandleGroupItemsClick}\n {...({ name: \"group\" } as object)}>\n {this.useListItemHeader\n ? MultiOrRadioGroupHeaderCollapsible.call(this)\n : SingleGroupHeaderCollapsible.call(this)\n }\n {!singleSelectNested && (\n <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class=\"udex-list__group-list__content\">\n {this.isTreeAccessibleRole ? (\n <slot></slot>\n ) : (\n <div role=\"listbox\" aria-label=\"group\">\n <slot></slot>\n </div>\n )}\n </div>\n )}\n </div>\n ) : (\n <div\n role={this.nonCollapsibleContainerRole as AriaRole}\n class=\"udex-list__group-list\"\n onui5-item-press={this.getHandleGroupItemsClick}\n {...({ name: \"group\" } as object)}>\n {this.modeMultiSelectOrRadioGroup\n ? MultiOrRadioGroupHeader.call(this)\n : SingleGroupHeader.call(this)\n }\n {this.isTreeAccessibleRole ? (\n <div role=\"group\">\n <slot></slot>\n </div>\n ) : this.isPerGroupListbox ? (\n // Each group is its own labelled listbox: JAWS counts the options natively\n // per group (\"Python, 1 of 4\"). The outer #udex-list is presentational\n // (SearchableListBase.isPerGroupListbox) so this is not a nested listbox.\n <div role=\"listbox\" aria-labelledby=\"group-heading\">\n <slot></slot>\n </div>\n ) : (\n <slot></slot>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ListGroupHeaderTemplate.js","sourceRoot":"","sources":["../src/ListGroupHeaderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type UDExListGroupHeader from \"./ListGroupHeader.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExButton from \"./Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nfunction SingleGroupHeader(this: UDExListGroupHeader) {\n return (\n <div class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`} part=\"group-item\">\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n name={this._icon}\n />\n )}\n <div class=\"udex-list__header\">\n <span\n id=\"group-heading\"\n class=\"udex-list__header-title\"\n {...({ innerHTML: this.label } as object)}>\n </span>\n {this.supportingText && (\n <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>\n )}\n </div>\n </div>\n );\n}\n\n// The visible header row of the single-select collapsible group: number/icon,\n// heading + supporting text, and the expand/collapse chevron.\nfunction SingleCollapsibleHeaderRow(this: UDExListGroupHeader) {\n return (\n <>\n {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n {this.typeCircle && <span class=\"udex-list__circle\">•</span>}\n {this.typeIcon && (\n <Icon\n name={this._icon}\n class=\"udex-list__icon\"\n accessible-role=\"presentation\"\n aria-hidden=\"true\"\n part=\"icon\"\n />\n )}\n <div class=\"udex-list__header\">\n <span\n id=\"group-heading\"\n class=\"udex-list__header-title\"\n {...({ innerHTML: this.label } as object)}>\n </span>\n {this.supportingText && (\n <span id=\"group-supporting-text\" class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>\n )}\n </div>\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n size=\"Small\"\n design=\"Tertiary\"\n class=\"udex-list__group-heading__icon\"\n onClick={this.handleCollapseIconClick as unknown as EventListener}\n onMouseDown={this.handleCollapseIconMouseDown}\n tabindex={-1}\n accessible-name={this.expandButtonAccessibleName}\n icon={slimArrowRight}\n {...({ \"mode\": \"Interactive\" } as object)}\n />\n </div>\n </>\n );\n}\n\nfunction SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {\n // Conformant WAI-ARIA tree (FilterMenu real focus): nest the child role=\"group\"\n // INSIDE this treeitem so screen readers count children per group natively — no\n // explicit aria-posinset/aria-setsize (which JAWS distrusts). Excludes SelectBox\n // (aria-activedescendant, _useHostAriaRole) and non-tree modes, which keep the flat\n // structure with the content region emitted as a sibling by the template body.\n const nested = this.isTreeAccessibleRole && !this._useHostAriaRole;\n // In aria-activedescendant mode (SelectBox) the HOST element is the treeitem and\n // already carries aria-expanded + the accessible name. This inner div must then be\n // presentational (singleCollapsibleHeaderRole) and must NOT duplicate those states,\n // otherwise it is a second treeitem nested inside the host treeitem with no owning\n // tree/group (axe/SiteImprove aria-required-parent). It stays focusable, though:\n // clicking the collapsible-header body relies on it receiving DOM focus to redirect\n // focus back to the combobox input — the same focusable, role=\"presentation\" shape\n // the list-item [part=item] divs already use. The real-focus (FilterMenu) path keeps\n // the treeitem semantics plus controls/labelling on this div.\n const headerAriaAttrs = this._useHostAriaRole ? {} : {\n \"aria-expanded\": this.expanded,\n \"aria-controls\": this.ariaControlsId,\n \"aria-labelledby\": this.collapsibleHeaderLabelledBy,\n };\n return (\n <div\n class={`udex-list__group-content ${nested ? \"udex-list__group-content--nested \" : \"\"}udex-list__group-header-wrap ${this.sizeClass}`}\n part=\"group-item\"\n id={`${this._id}_group-content__focusable`}\n role={this.singleCollapsibleHeaderRole as AriaRole}\n tabIndex={0}\n onKeyDown={this.handleKeyDown}\n {...headerAriaAttrs}\n _tab-index={Number(this._effectiveTabIndex)}>\n {nested ? (\n <>\n <div class=\"udex-list__group-header-row\">\n {SingleCollapsibleHeaderRow.call(this)}\n </div>\n <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class=\"udex-list__group-list__content\">\n <slot></slot>\n </div>\n </>\n ) : (\n SingleCollapsibleHeaderRow.call(this)\n )}\n </div>\n );\n}\n\nfunction MultiOrRadioGroupHeader(this: UDExListGroupHeader) {\n if (this.isNonActiveHeader) {\n return (\n <header id=\"group-heading\" class=\"udex-list__inactive-header udex-list__group-header-wrap\">\n <div class=\"udex-list__inactive-header-content\">\n <span class=\"udex-list__header-title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\">{this.supportingText}</span>\n )}\n </div>\n </header>\n );\n }\n return (\n <UDExListItem\n id=\"group-heading\"\n part=\"group-item\"\n role=\"none\"\n selected={this.selected}\n indeterminate={this.indeterminate}\n class={this.className}\n mode={this.mode}\n controlled={this.controlled}\n onClick={this.handleHeaderPress}\n onKeyDown={this.handleKeyDownPress}\n type={this.type}\n label={this.label}\n size={this.size}\n supportingText={this.supportingText}\n accessible-role={this.nonCollapsibleHeaderAccessibleRole}\n _additional-class-name={this._additionalClassName}\n _tab-index={Number(this._effectiveTabIndex)}\n _aria-pos-in-set={this._ariaPosInSet}\n _aria-set-size={this._ariaSetSize}\n _icon={this._icon}\n _filtered={this._filtered}\n />\n );\n}\n\nfunction MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {\n if (this.isNonActiveHeader) {\n return (\n <header\n role=\"button\"\n id=\"group-heading\"\n class=\"udex-list__inactive-header udex-list__group-header-wrap\"\n tabIndex={Number(this._effectiveTabIndex)}\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}>\n <div class=\"udex-list__inactive-header-content\">\n <span class=\"udex-list__header-title\" {...({ innerHTML: this.label } as object)}></span>\n {this.supportingText && (\n <span class=\"udex-list__supporting-text\">{this.supportingText}</span>\n )}\n </div>\n <div class=\"udex-list__group-heading__icon-wrapper\">\n <UDExButton\n class=\"udex-list__group-heading__icon\"\n size={UDExButtonSize.Small}\n design={UDExButtonDesign.Tertiary}\n tabindex={-1}\n icon={slimArrowRight}\n onClick={this.handleCollapseIconClick as EventListener}\n accessible-name={this.expandButtonAccessibleName}\n {...({ \"mode\": \"Interactive\" } as object)}\n />\n </div>\n </header>\n );\n }\n return (\n <UDExListItem\n id=\"group-heading\"\n part=\"group-item\"\n role=\"none\"\n aria-expanded={this.expanded}\n aria-controls={this.ariaControlsId}\n selected={this.selected}\n indeterminate={this.indeterminate}\n collapsible={this.collapsible}\n collapsed={this.collapsed}\n class={this.className}\n mode={this.mode}\n controlled={this.controlled}\n onClick={this.handleHeaderPress}\n onKeyDown={this.handleKeyDownPress}\n type={this.type}\n label={this.label}\n size={this.size}\n supportingText={this.supportingText}\n accessible-role={this.collapsibleHeaderAccessibleRole}\n onAccordionIconClick={this.handleCollapseIconClick as EventListener}\n _additional-class-name={this._additionalClassName}\n _tab-index={Number(this._effectiveTabIndex)}\n _aria-pos-in-set={this._ariaPosInSet}\n _aria-set-size={this._ariaSetSize}\n _icon={this._icon}\n _filtered={this._filtered}\n />\n );\n}\n\nexport default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {\n // Single-select real-focus tree: SingleGroupHeaderCollapsible now emits the\n // role=\"group\" content region as a CHILD of the treeitem (conformant nesting),\n // so the template body must not also emit it as a sibling.\n const singleSelectNested = this.isTreeAccessibleRole && !this.useListItemHeader && !this._useHostAriaRole;\n return (\n <div\n part=\"item\"\n class=\"udex-list__group\"\n role={this.groupWrapperRole as AriaRole}\n aria-labelledby={(!this.isTreeAccessibleRole && !this.isPerGroupListbox) ? \"group-heading\" : undefined}>\n {this.collapsible ? (\n <div\n class=\"udex-list__group-list\"\n onui5-item-press={this.getHandleGroupItemsClick}\n {...({ name: \"group\" } as object)}>\n {this.useListItemHeader\n ? MultiOrRadioGroupHeaderCollapsible.call(this)\n : SingleGroupHeaderCollapsible.call(this)\n }\n {!singleSelectNested && (\n <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class=\"udex-list__group-list__content\">\n {this.isTreeAccessibleRole ? (\n <slot></slot>\n ) : (\n <div role=\"listbox\" aria-label=\"group\">\n <slot></slot>\n </div>\n )}\n </div>\n )}\n </div>\n ) : (\n <div\n role={this.nonCollapsibleContainerRole as AriaRole}\n class=\"udex-list__group-list\"\n onui5-item-press={this.getHandleGroupItemsClick}\n {...({ name: \"group\" } as object)}>\n {this.modeMultiSelectOrRadioGroup\n ? MultiOrRadioGroupHeader.call(this)\n : SingleGroupHeader.call(this)\n }\n {this.isTreeAccessibleRole ? (\n <div role=\"group\">\n <slot></slot>\n </div>\n ) : this.isPerGroupListbox ? (\n // Each group is its own labelled listbox: JAWS counts the options natively\n // per group (\"Python, 1 of 4\"). The outer #udex-list is presentational\n // (SearchableListBase.isPerGroupListbox) so this is not a nested listbox.\n <div role=\"listbox\" aria-labelledby=\"group-heading\">\n <slot></slot>\n </div>\n ) : (\n <slot></slot>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -5,7 +5,7 @@ export default function MastheadCountrySelectorTemplate() {
|
|
|
5
5
|
return (_jsx("div", { class: "udex-masthead-country-selector", children: this._isActiveRegionOpen ? activeRegionView.call(this) : regionsView.call(this) }));
|
|
6
6
|
}
|
|
7
7
|
function activeRegionView() {
|
|
8
|
-
return (_jsxs(_Fragment, { children: [_jsx("span", { class: "udex-masthead-country-selector__title", children: this.countryTitle }), !this.isSingleMode && (_jsx(UDExMastheadMenuItem, { class: "udex-masthead-country-selector__region-back-item", "accessible-role": "button", onClick: this.backToRegions, label: this._activeRegion?.title, type: "Button", part: "menu-item", "icon-start": true, "_accessible-name": this.backToRegionListAccessibleName, "is-back": "" })), !this.hideSearch && (_jsxs(_Fragment, { children: [_jsx(UDExSearch, { class: "udex-masthead-country-selector__search", "onui5-handle-value-search": this.handleSearch, "onui5-handle-value-reset": this.handleSearchReset, "onui5-submit-search-value": this.handleSearch, "language-voice": this.languageVoice, label: this.searchLabel, mode: this.homeSearchMode, "show-voice-button": this.showSearchVoiceButton, "non-interactive-submit-button": true, "show-submit-button": true }), _jsx("span", { "aria-live": "polite", "aria-atomic": "true", class: "hidden", children: this._accSearchResultInfo })] })), _jsx("div", { class: "udex-masthead-country-selector__list-container", children: _jsx("div", { class: "udex-masthead-country-selector__list-wrap", onScroll: this.handleCountryListShadowVisible, children: _jsx("ul", { class: "udex-masthead-country-selector__list udex-masthead-country-selector__list_countries",
|
|
8
|
+
return (_jsxs(_Fragment, { children: [_jsx("span", { class: "udex-masthead-country-selector__title", children: this.countryTitle }), !this.isSingleMode && (_jsx(UDExMastheadMenuItem, { class: "udex-masthead-country-selector__region-back-item", "accessible-role": "button", onClick: this.backToRegions, label: this._activeRegion?.title, type: "Button", part: "menu-item", "icon-start": true, "_accessible-name": this.backToRegionListAccessibleName, "is-back": "" })), !this.hideSearch && (_jsxs(_Fragment, { children: [_jsx(UDExSearch, { class: "udex-masthead-country-selector__search", "onui5-handle-value-search": this.handleSearch, "onui5-handle-value-reset": this.handleSearchReset, "onui5-submit-search-value": this.handleSearch, "language-voice": this.languageVoice, label: this.searchLabel, mode: this.homeSearchMode, "show-voice-button": this.showSearchVoiceButton, "non-interactive-submit-button": true, "show-submit-button": true }), _jsx("span", { "aria-live": "polite", "aria-atomic": "true", class: "hidden", children: this._accSearchResultInfo })] })), _jsx("div", { class: "udex-masthead-country-selector__list-container", children: _jsx("div", { class: "udex-masthead-country-selector__list-wrap", onScroll: this.handleCountryListShadowVisible, children: _jsx("ul", { class: "udex-masthead-country-selector__list udex-masthead-country-selector__list_countries", children: this._activeCountries.map((country, index) => (_jsx("li", { children: _jsx(UDExMastheadMenuItem, { class: "udex-masthead-country-selector__item udex-masthead-country-selector__item_countries", onClick: this.handleCountryClick, "accessible-role": "link", url: country.url, label: country.displayTitle, index: index, part: "menu-item", "_country-code": country.countryCode,
|
|
9
9
|
"is-nav-item": "",
|
|
10
10
|
...(country.active ? { "_is-active-country": "" } : {}) }) }, index))) }) }) })] }));
|
|
11
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MastheadCountrySelectorTemplate.js","sourceRoot":"","sources":["../src/MastheadCountrySelectorTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,MAAM,uBAAuB,CAAC;AACzD,OAAO,UAAU,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,+BAA+B;IACrD,OAAO,CACL,cAAK,KAAK,EAAC,gCAAgC,YACxC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAC5E,CACP,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB;IACvB,OAAO,CACL,8BACE,eAAM,KAAK,EAAC,uCAAuC,YAAE,IAAI,CAAC,YAAY,GAAQ,EAC7E,CAAC,IAAI,CAAC,YAAY,IAAI,CACrB,KAAC,oBAAoB,IACnB,KAAK,EAAC,kDAAkD,qBACxC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAChC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,gBACJ,IAAI,EACV,kBAAkB,EAAE,IAAI,CAAC,8BAA8B,EAAE,SAAS,EAAE,EAAE,GACvD,CACxB,EACA,CAAC,IAAI,CAAC,UAAU,IAAI,CACnB,8BACE,KAAC,UAAU,IACT,KAAK,EAAC,wCAAwC,+BACnB,IAAI,CAAC,YAAY,8BAClB,IAAI,CAAC,iBAAiB,+BACrB,IAAI,CAAC,YAAY,oBAC5B,IAAI,CAAC,aAAa,EAClC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,IAAI,EAAE,IAAI,CAAC,cAAc,uBACN,IAAI,CAAC,qBAAqB,mCACd,IAAI,wBACf,IAAI,GACb,EACb,4BAAgB,QAAQ,iBAAa,MAAM,EAAC,KAAK,EAAC,QAAQ,YAAE,IAAI,CAAC,oBAAoB,GAAQ,IAC5F,CACJ,EACD,cAAK,KAAK,EAAC,gDAAgD,YACzD,cAAK,KAAK,EAAC,2CAA2C,EAAC,QAAQ,EAAE,IAAI,CAAC,8BAA8B,YAClG,aAAI,KAAK,EAAC,qFAAqF,
|
|
1
|
+
{"version":3,"file":"MastheadCountrySelectorTemplate.js","sourceRoot":"","sources":["../src/MastheadCountrySelectorTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type UDExMastheadCountrySelector from \"./MastheadCountrySelector.js\";\nimport UDExMastheadMenuItem from \"./MastheadMenuItem.js\";\nimport UDExSearch from \"./Search.js\";\n\nexport default function MastheadCountrySelectorTemplate(this: UDExMastheadCountrySelector) {\n return (\n <div class=\"udex-masthead-country-selector\">\n {this._isActiveRegionOpen ? activeRegionView.call(this) : regionsView.call(this)}\n </div>\n );\n}\n\nfunction activeRegionView(this: UDExMastheadCountrySelector) {\n return (\n <>\n <span class=\"udex-masthead-country-selector__title\">{this.countryTitle}</span>\n {!this.isSingleMode && (\n <UDExMastheadMenuItem\n class=\"udex-masthead-country-selector__region-back-item\"\n accessible-role=\"button\"\n onClick={this.backToRegions}\n label={this._activeRegion?.title}\n type=\"Button\"\n part=\"menu-item\"\n icon-start={true}\n {...{ \"_accessible-name\": this.backToRegionListAccessibleName, \"is-back\": \"\" }}>\n </UDExMastheadMenuItem>\n )}\n {!this.hideSearch && (\n <>\n <UDExSearch\n class=\"udex-masthead-country-selector__search\"\n onui5-handle-value-search={this.handleSearch}\n onui5-handle-value-reset={this.handleSearchReset}\n onui5-submit-search-value={this.handleSearch}\n language-voice={this.languageVoice}\n label={this.searchLabel}\n mode={this.homeSearchMode}\n show-voice-button={this.showSearchVoiceButton}\n non-interactive-submit-button={true}\n show-submit-button={true}>\n </UDExSearch>\n <span aria-live=\"polite\" aria-atomic=\"true\" class=\"hidden\">{this._accSearchResultInfo}</span>\n </>\n )}\n <div class=\"udex-masthead-country-selector__list-container\">\n <div class=\"udex-masthead-country-selector__list-wrap\" onScroll={this.handleCountryListShadowVisible}>\n <ul class=\"udex-masthead-country-selector__list udex-masthead-country-selector__list_countries\">\n {this._activeCountries.map((country, index) => (\n <li key={index}>\n <UDExMastheadMenuItem\n class=\"udex-masthead-country-selector__item udex-masthead-country-selector__item_countries\"\n onClick={this.handleCountryClick as any}\n accessible-role=\"link\"\n url={country.url}\n label={country.displayTitle}\n index={index}\n part=\"menu-item\"\n {...{\n \"_country-code\": country.countryCode,\n \"is-nav-item\": \"\",\n ...(country.active ? { \"_is-active-country\": \"\" } : {}),\n }}>\n </UDExMastheadMenuItem>\n </li>\n ))}\n </ul>\n </div>\n </div>\n </>\n );\n}\n\nfunction regionsView(this: UDExMastheadCountrySelector) {\n return (\n <>\n <span class=\"udex-masthead-country-selector__title\">{this.regionTitle}</span>\n <ul class=\"udex-masthead-country-selector__list\">\n {this.regionsData.map((region, index) => (\n <li key={index}>\n <UDExMastheadMenuItem\n onClick={this.handleRegionClick as any}\n index={index}\n accessible-role=\"button\"\n class=\"udex-masthead-country-selector__item udex-masthead-country-selector__item_region\"\n aria-haspopup=\"true\"\n type=\"Button\"\n part=\"menu-item\"\n has-border={true}\n icon-end={true}\n label={region.title}\n {...{ \"is-nav-item\": \"\" }}>\n </UDExMastheadMenuItem>\n </li>\n ))}\n </ul>\n </>\n );\n}\n"]}
|
package/dist/SelectBase.d.ts
CHANGED
|
@@ -184,6 +184,13 @@ declare class UDExSelectBase extends UDExSearchableListBase {
|
|
|
184
184
|
* Activates the first navigable item as the aria-activedescendant without moving DOM focus.
|
|
185
185
|
*/
|
|
186
186
|
_activateFirstItem(): void;
|
|
187
|
+
/**
|
|
188
|
+
* Establishes the initial aria-activedescendant when the dropdown opens, without moving
|
|
189
|
+
* DOM focus. In SingleSelect mode the currently selected item is activated so reopening
|
|
190
|
+
* restores focus to it; when nothing is selected (or in other modes) the first navigable
|
|
191
|
+
* item is activated instead.
|
|
192
|
+
*/
|
|
193
|
+
_activateSelectedOrFirstItem(): void;
|
|
187
194
|
/**
|
|
188
195
|
* Navigates to the item at the given index, updating aria-activedescendant and _selectedOption.
|
|
189
196
|
*/
|
|
@@ -191,8 +198,6 @@ declare class UDExSelectBase extends UDExSearchableListBase {
|
|
|
191
198
|
handleKeyDownDropdown(e: KeyboardEvent): void;
|
|
192
199
|
handleEndKeyPress(items: UDExListItemBase[], lastItemIndex: number): void;
|
|
193
200
|
handleHomeKeyPress(items: UDExListItemBase[]): void;
|
|
194
|
-
handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number): void;
|
|
195
|
-
handleUpKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number): void;
|
|
196
201
|
handleLetterKeyPress(e: KeyboardEvent): void;
|
|
197
202
|
handleEscKeyPress(e: KeyboardEvent): void;
|
|
198
203
|
handleItemSelection(e: CustomEvent): void;
|
package/dist/SelectBase.js
CHANGED
|
@@ -202,6 +202,28 @@ class UDExSelectBase extends UDExSearchableListBase {
|
|
|
202
202
|
this._list.setTabIndexByIndex(items, firstIndex);
|
|
203
203
|
this._setActiveDescendant(items[firstIndex], false);
|
|
204
204
|
}
|
|
205
|
+
/**
|
|
206
|
+
* Establishes the initial aria-activedescendant when the dropdown opens, without moving
|
|
207
|
+
* DOM focus. In SingleSelect mode the currently selected item is activated so reopening
|
|
208
|
+
* restores focus to it; when nothing is selected (or in other modes) the first navigable
|
|
209
|
+
* item is activated instead.
|
|
210
|
+
*/
|
|
211
|
+
_activateSelectedOrFirstItem() {
|
|
212
|
+
const items = this._list?.getKeyboardNavigationItems();
|
|
213
|
+
if (!items?.length) {
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
|
|
217
|
+
const selectedIndex = this.modeSingleSelect
|
|
218
|
+
? items.findIndex(item => item.selected && !item.isGroup)
|
|
219
|
+
: -1;
|
|
220
|
+
const targetIndex = selectedIndex >= 0 ? selectedIndex : firstIndex;
|
|
221
|
+
this._list.setTabIndexByIndex(items, targetIndex);
|
|
222
|
+
this._setActiveDescendant(items[targetIndex], false);
|
|
223
|
+
if (this.showImageFlags) {
|
|
224
|
+
this.handleImagePosition(items, targetIndex);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
205
227
|
/**
|
|
206
228
|
* Navigates to the item at the given index, updating aria-activedescendant and _selectedOption.
|
|
207
229
|
*/
|
|
@@ -324,40 +346,6 @@ class UDExSelectBase extends UDExSearchableListBase {
|
|
|
324
346
|
const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
|
|
325
347
|
this._navigateToIndex(items, firstIndex);
|
|
326
348
|
}
|
|
327
|
-
handleDownKeyPress(items, currentSelectedIndex, lastItemIndex) {
|
|
328
|
-
const nextIndex = currentSelectedIndex + 1;
|
|
329
|
-
const nextSelectIndex = nextIndex > lastItemIndex ? 0 : nextIndex;
|
|
330
|
-
const isNonInteractive = items[nextSelectIndex].nonInteractive && !items[nextSelectIndex].collapsible;
|
|
331
|
-
if (isNonInteractive) {
|
|
332
|
-
const skipIndex = nextSelectIndex + 1 > lastItemIndex ? 0 : nextSelectIndex + 1;
|
|
333
|
-
this._selectedOption = items[skipIndex].label;
|
|
334
|
-
if (this.showImageFlags) {
|
|
335
|
-
this.handleImagePosition(items, skipIndex);
|
|
336
|
-
}
|
|
337
|
-
return;
|
|
338
|
-
}
|
|
339
|
-
this._selectedOption = items[nextSelectIndex].label;
|
|
340
|
-
if (this.showImageFlags) {
|
|
341
|
-
this.handleImagePosition(items, nextSelectIndex);
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
handleUpKeyPress(items, currentSelectedIndex, lastItemIndex) {
|
|
345
|
-
const prevIndex = currentSelectedIndex - 1;
|
|
346
|
-
const previousSelectIndex = prevIndex < 0 ? lastItemIndex : prevIndex;
|
|
347
|
-
const isNonInteractive = items[previousSelectIndex].nonInteractive && !items[previousSelectIndex].collapsible;
|
|
348
|
-
if (isNonInteractive) {
|
|
349
|
-
const skipIndex = previousSelectIndex === 0 ? lastItemIndex : previousSelectIndex - 1;
|
|
350
|
-
this._selectedOption = items[skipIndex].label;
|
|
351
|
-
if (this.showImageFlags) {
|
|
352
|
-
this.handleImagePosition(items, skipIndex);
|
|
353
|
-
}
|
|
354
|
-
return;
|
|
355
|
-
}
|
|
356
|
-
this._selectedOption = items[previousSelectIndex].label;
|
|
357
|
-
if (this.showImageFlags) {
|
|
358
|
-
this.handleImagePosition(items, previousSelectIndex);
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
349
|
handleLetterKeyPress(e) {
|
|
362
350
|
e.stopPropagation();
|
|
363
351
|
e.preventDefault();
|
|
@@ -450,10 +438,7 @@ class UDExSelectBase extends UDExSearchableListBase {
|
|
|
450
438
|
if (isDownAndPopoverClosed) {
|
|
451
439
|
e.preventDefault();
|
|
452
440
|
this.openDropdown();
|
|
453
|
-
this.
|
|
454
|
-
if (this.showImageFlags) {
|
|
455
|
-
this.handleImagePosition(items, firstIndex);
|
|
456
|
-
}
|
|
441
|
+
this._activateSelectedOrFirstItem();
|
|
457
442
|
return;
|
|
458
443
|
}
|
|
459
444
|
if (isDownAndPopoverOpened) {
|
|
@@ -599,6 +584,9 @@ class UDExSelectBase extends UDExSearchableListBase {
|
|
|
599
584
|
this._expandCollapsedGroupsWithSelection();
|
|
600
585
|
return renderFinished();
|
|
601
586
|
}).then(() => {
|
|
587
|
+
if (!this._activeDescendantItem) {
|
|
588
|
+
this._activateSelectedOrFirstItem();
|
|
589
|
+
}
|
|
602
590
|
this._handleDropdownScroll();
|
|
603
591
|
this._announceCurrentOrFirst();
|
|
604
592
|
}).catch(() => { });
|