@ui5/webcomponents 2.24.0-rc.1 → 2.24.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.24.0-rc.1",
+  "version": "2.24.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -340,7 +340,7 @@
             },
             {
               "name": "accessible-role",
-              "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- Set accessibleRole to \"toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, it is recommended to avoid using the \"toolbar\" role, as it implies a grouping of multiple interactive controls.",
+              "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- By default, accessibleRole is set to \"Toolbar\", which renders the ARIA role \"toolbar\".\n\n- Use the default accessibleRole value \"Toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, set accessibleRole to \"None\" to avoid rendering the ARIA role \"toolbar\", as that role implies a grouping of multiple interactive controls.",
               "value": {
                 "type": "\"None\" | \"Toolbar\"",
                 "default": "\"Toolbar\""
@@ -384,7 +384,7 @@
               },
               {
                 "name": "accessible-role",
-                "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- Set accessibleRole to \"toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, it is recommended to avoid using the \"toolbar\" role, as it implies a grouping of multiple interactive controls.",
+                "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- By default, accessibleRole is set to \"Toolbar\", which renders the ARIA role \"toolbar\".\n\n- Use the default accessibleRole value \"Toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, set accessibleRole to \"None\" to avoid rendering the ARIA role \"toolbar\", as that role implies a grouping of multiple interactive controls.",
                 "value": { "type": "\"None\" | \"Toolbar\"" }
               },
               {
@@ -403,6 +403,11 @@
           "description": "### Overview\nEnables users to navigate between items by providing a list of links to previous steps in the user's navigation path.\nIt helps the user to be aware of their location within the application and allows faster navigation.\n\nThe last three steps can be accessed as links directly, while the remaining links prior to them are available\nin a drop-down menu.\n\nYou can choose the type of separator to be used from a number of predefined options.\n\n### Keyboard Handling\nThe `ui5-breadcrumbs` provides advanced keyboard handling.\n\n- [F4], [Alt] + [Up], [Alt] + [Down], [Space], or [Enter] - If the dropdown arrow is focused - opens/closes the drop-down.\n- [Space],[Enter] - Activates the focused item and triggers the `item-click` event.\n- [Escape] - Closes the drop-down.\n- [Left] - If the drop-down is closed - navigates one item to the left.\n- [Right] - If the drop-down is closed - navigates one item to the right.\n- [Up] - If the drop-down is open - moves focus to the next item.\n- [Down] - If the drop-down is open - moves focus to the previous item.\n- [Home] - Navigates to the first item.\n- [End] - Navigates to the last item.\n---\n\n\n### **Events:**\n - **item-click** - Fires when a `BreadcrumbsItem` is clicked.\n\n**Note:** You can prevent browser location change by calling `event.preventDefault()`.\n\n### **Slots:**\n - **default** - Defines the component items.\n\n**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "design",
               "description": "Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator",
@@ -434,6 +439,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "design",
                 "description": "Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator",
@@ -2190,6 +2200,55 @@
             ]
           }
         },
+        {
+          "name": "ui5-cb-item-custom",
+          "description": "The `ui5-cb-item-custom` is a combobox item component\nthat allows placing custom content inside a combobox item.\nThe `text` property is used for filtering and auto-complete.\nFor highlighting functionality, see `@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js`.\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "text",
+              "description": "Defines the text of the component.\nUsed for filtering, autocomplete, and mobile rendering.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the component.\nUsed for programmatic selection via the `selectedValue` property.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the content of the component."
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "text",
+                "description": "Defines the text of the component.\nUsed for filtering, autocomplete, and mobile rendering.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the component.\nUsed for programmatic selection via the `selectedValue` property.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-cb-item-group",
           "description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n- **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",
@@ -3659,7 +3718,7 @@
         },
         {
           "name": "ui5-dialog",
-          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
+          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -6815,6 +6874,55 @@
             ]
           }
         },
+        {
+          "name": "ui5-mcb-item-custom",
+          "description": "The `ui5-mcb-item-custom` is a multi-combobox item component\nthat allows placing custom content inside a multi-combobox item.\nThe `text` property is used for filtering and token display.\nFor highlighting functionality, see `@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js`.\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "text",
+              "description": "Defines the text of the component.\nUsed for filtering and token display.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the component.\nUsed for programmatic selection via selectedValues property.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the content of the component."
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "text",
+                "description": "Defines the text of the component.\nUsed for filtering and token display.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the component.\nUsed for programmatic selection via selectedValues property.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-mcb-item-group",
           "description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n- **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.24.0-rc.1",
+  "version": "2.24.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.24.0-rc.1",
-    "@ui5/webcomponents-icons": "2.24.0-rc.1",
-    "@ui5/webcomponents-icons-business-suite": "2.24.0-rc.1",
-    "@ui5/webcomponents-icons-tnt": "2.24.0-rc.1",
-    "@ui5/webcomponents-localization": "2.24.0-rc.1",
-    "@ui5/webcomponents-theming": "2.24.0-rc.1"
+    "@ui5/webcomponents-base": "2.24.0",
+    "@ui5/webcomponents-icons": "2.24.0",
+    "@ui5/webcomponents-icons-business-suite": "2.24.0",
+    "@ui5/webcomponents-icons-tnt": "2.24.0",
+    "@ui5/webcomponents-localization": "2.24.0",
+    "@ui5/webcomponents-theming": "2.24.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.24.0-rc.1",
+    "@ui5/webcomponents-tools": "2.24.0",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "b9131bd79fbbe253503cb85eae4e013ba46e4313"
+  "gitHead": "0823d74956236280e547b9f58bd06ff736180396"
 }

package/src/CalendarHeaderTemplate.tsx

@@ -147,9 +147,8 @@ function renderMiddleButtons(
 }
 
 function renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isMultiple: boolean) {
-	// In portrait or compact mode, show next button only on first calendar
 	// In landscape mode, show next button only on last calendar
-	const isVertical = this._portraitView || this._isCompactMode;
+	const isVertical = this._portraitView;
 	const shouldShowNextButton = !isMultiple || (isVertical ? isFirst : isLast);
 	const shouldShowSpacer = isMultiple && (isVertical ? isLast : !isLast);
 

package/src/CalendarTemplate.tsx

@@ -8,8 +8,8 @@ import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 
 export default function CalendarTemplate(this: Calendar) {
 	const showMultipleMonths = this._monthsToShow > 1 && !this._isDayPickerHidden;
-	const shouldRenderSeparateHeaders = this._isDefaultHeaderModeInMultipleMonths && !this._portraitView && !this._isCompactMode;
-	const shouldRenderInlineHeaders = this._isDefaultHeaderModeInMultipleMonths && (this._portraitView || this._isCompactMode);
+	const shouldRenderSeparateHeaders = this._isDefaultHeaderModeInMultipleMonths && !this._portraitView;
+	const shouldRenderInlineHeaders = this._isDefaultHeaderModeInMultipleMonths && this._portraitView;
 
 	return (
 		<>

package/src/ComboBoxItemCustomTemplate.tsx

@@ -0,0 +1,10 @@
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+import type ComboBoxItemCustom from "./ComboBoxItemCustom.js";
+
+export default function ComboBoxItemCustomTemplate(this: ComboBoxItemCustom) {
+	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+
+function listItemContent(this: ComboBoxItemCustom) {
+	return <slot></slot>;
+}

package/src/ComboBoxPopoverTemplate.tsx

@@ -67,11 +67,11 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 										return item.items
 											.filter(nestedItem => !!nestedItem)
 											.map(nestedItem =>
-												<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)}/>
+												<SuggestionItem text={nestedItem.text} additionalText={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)}/>
 											);
 									}
 									// For regular items
-									return <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)}/>;
+									return <SuggestionItem text={item.text} additionalText={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)}/>;
 								})}
 							</Input>
 						</div>

package/src/DialogTemplate.tsx

@@ -19,10 +19,6 @@ function beforeContent(this: Dialog) {
 				id="ui5-popup-header"
 				role="region"
 				aria-label={this._headerAriaLabel}
-				aria-describedby={this.effectiveAriaDescribedBy}
-				aria-roledescription={this.ariaRoleDescriptionHeaderText}
-				tabIndex={this._headerTabIndex}
-				onKeyDown={this._onDragOrResizeKeyDown}
 				onMouseDown={this._onDragMouseDown}
 				part="header"
 				// state={this.state}
@@ -35,16 +31,6 @@ function beforeContent(this: Dialog) {
 					:
 					<Title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{this.headerText}</Title>
 				}
-
-				{this.resizable ?
-					this.draggable ?
-						<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggableAndResizable}</span>
-						:
-						<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextResizable}</span>
-					:
-					this.draggable &&
-						<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggable}</span>
-				}
 			</div>
 		}
 	</>);
@@ -66,9 +52,30 @@ function afterContent(this: Dialog) {
 			<div
 				class="ui5-popup-resize-handle"
 				onMouseDown={this._onResizeMouseDown}
+				title={this._resizeHandleTooltip}
 			>
 				<Icon name={resizeCorner}></Icon>
 			</div>
 		}
+		{this._movable &&
+			<>
+				<span
+					id={`${this._id}-dragResizeHandler`}
+					class="ui5-popup-drag-resize-handler ui5-hidden-text"
+					tabIndex={this._dragResizeHandleTabIndex}
+					role="img"
+					aria-roledescription={this._dragResizeHandleAriaRoleDescription}
+					aria-label={this._dragResizeHandleAriaLabel}
+					aria-describedby={this._dragResizeHandleAriaDescribedBy}
+					onKeyDown={this._onDragOrResizeKeyDown}
+				></span>
+				{this.ariaDescribedByHandlerText &&
+					<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHandlerText}</span>
+				}
+				{this.dialogAriaDescribedByText &&
+					<span id={`${this._id}-dialog-descr`} aria-hidden="true" class="ui5-hidden-text">{this.dialogAriaDescribedByText}</span>
+				}
+			</>
+		}
 	</>);
 }

package/src/MultiComboBoxItemCustomTemplate.tsx

@@ -0,0 +1,22 @@
+import CheckBox from "./CheckBox.js";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+import type MultiComboBoxItemCustom from "./MultiComboBoxItemCustom.js";
+
+export default function MultiComboBoxItemCustomTemplate(this: MultiComboBoxItemCustom) {
+	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+
+function listItemContent(this: MultiComboBoxItemCustom) {
+	return (
+		<>
+			<CheckBox
+				disabled={this._readonly}
+				checked={this.selected}
+				_accInfo={this.checkBoxAccInfo}
+			/>
+			<div part="content" id="content" class="ui5-li-content">
+				<slot></slot>
+			</div>
+		</>
+	);
+}

package/src/RadioButtonTemplate.tsx

@@ -12,6 +12,7 @@ export default function RadioButtonTemplate(this: RadioButton) {
 			aria-disabled={this.effectiveAriaDisabled}
 			aria-describedby={this.effectiveAriaDescribedBy}
 			aria-label={this.ariaLabelText}
+			aria-labelledby={this.ariaLabelledBy}
 			tabindex={this.effectiveTabIndex}
 			onClick={this._onclick}
 			onKeyDown={this._onkeydown}

package/src/i18n/messagebundle.properties

@@ -832,17 +832,38 @@ MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Additional Actions
 #XACT: ARIA information for the Menu Item loading state
 MENU_ITEM_LOADING=Loading
 
-#XACT: ARIA announcement for roldesecription attribute of Dialog header
-DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interactive Header
+#XACT: ARIA announcement for describedby attribute of resizable Dialog
+DIALOG_ARIA_DESCRIBEDBY_RESIZABLE=Use Shift+Arrow keys to resize
 
-#XACT: ARIA announcement for describedby attribute of resizable Dialog header
-DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Use Shift+Arrow keys to resize
+#XACT: ARIA announcement for describedby attribute of draggable Dialog
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE=Use Arrow keys to move
 
-#XACT: ARIA announcement for describedby attribute of draggable Dialog header
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Use Arrow keys to move
+#XACT: ARIA announcement for describedby attribute of draggable and resizable Dialog
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Use Arrow keys to move, Shift+Arrow keys to resize
 
-#XACT: ARIA announcement for describedby attribute of draggable and resizable Dialog header
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Use Arrow keys to move, Shift+Arrow keys to resize
+#XACT: ARIA announcement for describedby attribute informing users how to reach drag and resize handle
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE=Tab to the end of dialog to reach drag and resize handle.
+
+#XACT: ARIA announcement for describedby attribute informing users how to reach drag handle
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE=Tab to the end of dialog to reach drag handle.
+
+#XACT: ARIA announcement for describedby attribute informing users how to reach resize handle
+DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE=Tab to the end of dialog to reach resize handle.
+
+#XACT: Tooltip for the resize handle icon in the Dialog
+DIALOG_RESIZE_HANDLE_TOOLTIP=Drag handle to resize (Shift+Arrow)
+
+#XACT: ARIA label for drag and resize handle
+DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL=Drag and resize dialog
+
+#XACT: ARIA label for drag handle
+DIALOG_DRAG_HANDLE_ARIA_LABEL=Drag dialog
+
+#XACT: ARIA label for resize handle
+DIALOG_RESIZE_HANDLE_ARIA_LABEL=Resize dialog
+
+#XACT: ARIA role description for drag/resize handle
+DIALOG_HANDLE_ARIA_ROLEDESCRIPTION=Handle
 
 #XACT: ARIA label for the Dialog header region
 DIALOG_HEADER_ARIA_LABEL=Header

package/src/i18n/messagebundle_ar.properties

@@ -566,13 +566,27 @@ MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=الإجراءات الإضافية
 
 MENU_ITEM_LOADING=تحميل
 
-DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=مقدمة تفاعلية
+DIALOG_ARIA_DESCRIBEDBY_RESIZABLE=استخدام مفاتيح Shift+Arrow لتغيير الحجم
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=استخدام مفاتيح Shift+Arrow لتغيير الحجم
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE=استخدام مفاتيح الأسهم للانتقال
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=استخدام مفاتيح الأسهم للانتقال
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=استخدام مفاتيح الأسهم للانتقال، مفاتيح Shift+Arrow لتغيير الحجم
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=استخدام مفاتيح الأسهم للانتقال، مفاتيح Shift+Arrow لتغيير الحجم
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE=اضغط على نهاية مربع الحوار للوصول إلى سحب المؤشر وتغيير حجمه.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE=اضغط على نهاية مربع الحوار للوصول إلى سحب المؤشر.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE=اضغط على نهاية مربع الحوار للوصول إلى تغيير حجم المؤشر.
+
+DIALOG_RESIZE_HANDLE_TOOLTIP=اسحب المؤشر لتغيير حجمه (Shift + Arrow).
+
+DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL=سحب مربع الحوار وتغيير حجمه
+
+DIALOG_DRAG_HANDLE_ARIA_LABEL=سحب مربع الحوار
+
+DIALOG_RESIZE_HANDLE_ARIA_LABEL=تغيير حجم مربع الحوار
+
+DIALOG_HANDLE_ARIA_ROLEDESCRIPTION=مؤشر
 
 DIALOG_HEADER_ARIA_LABEL=المقدمة
 

package/src/i18n/messagebundle_bg.properties

@@ -566,13 +566,27 @@ MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Допълнителни действия
 
 MENU_ITEM_LOADING=Зареждане
 
-DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Интерактивно заглавие
+DIALOG_ARIA_DESCRIBEDBY_RESIZABLE=Използвайте Shift+стрелки, за да промените размера
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Изберете Shift+стрелки, за да промените размера
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE=Придвижвайте се чрез клавишите със стрелки
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Придвижвайте се чрез клавишите със стрелки
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Придвижвайте се чрез клавишите със стрелки, а променяйте размера с Shift+стрелки
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Придвижвайте се чрез клавишите със стрелки, а променяйте размера с Shift+стрелки
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE=Преминете с табулатора до края на диалоговия прозорец, за да достигнете регулатора за провлачване и промяна на размера.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE=Преминете с табулатора до края на диалоговия прозорец, за да достигнете регулатора за провлачване.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE=Преминете с табулатора до края на диалоговия прозорец, за да достигнете регулатора за промяна на размера.
+
+DIALOG_RESIZE_HANDLE_TOOLTIP=Провлачете регулатора, за да промените размера (Shift + стрелка)
+
+DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL=Провлачване и промяна на размера на диалоговия прозорец
+
+DIALOG_DRAG_HANDLE_ARIA_LABEL=Провлачване на диалоговия прозорец
+
+DIALOG_RESIZE_HANDLE_ARIA_LABEL=Промяна на размера на диалоговия прозорец
+
+DIALOG_HANDLE_ARIA_ROLEDESCRIPTION=Регулатор
 
 DIALOG_HEADER_ARIA_LABEL=Заглавка
 

package/src/i18n/messagebundle_ca.properties

@@ -566,13 +566,27 @@ MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Accions addicionals
 
 MENU_ITEM_LOADING=S''està carregant
 
-DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Capçalera interactiva
+DIALOG_ARIA_DESCRIBEDBY_RESIZABLE=Utilitzeu les tecles majús+fletxa per ajustar la mida
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Utilitzeu les tecles Majús+fletxa per ajustar la mida
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE=Utilitzeu les tecles de fletxa per desplaçar-vos
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Utilitzeu les tecles de fletxa per desplaçar-vos
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Utilitzeu les tecles de fletxa per desplaçar-vos, Majús+fletxa per ajustar la mida
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Utilitzeu les tecles de fletxa per desplaçar-vos, Majús+fletxa per ajustar la mida
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE=Premeu la tabulació fins el final del diàleg per arribar al control d''arrossegar i ajustar la mida.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE=Premeu la tabulació fins el final del diàleg per arribar al control d''arrossegar.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE=Premeu la tabulació fins el final del diàleg per arribar al control d''ajustar la mida.
+
+DIALOG_RESIZE_HANDLE_TOOLTIP=Control d''arrossegar per ajustar la mida (majús+fletxa)
+
+DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL=Diàleg per arrossegar i ajustar la mida
+
+DIALOG_DRAG_HANDLE_ARIA_LABEL=Diàleg per arrossegar
+
+DIALOG_RESIZE_HANDLE_ARIA_LABEL=Diàleg per ajustar la mida
+
+DIALOG_HANDLE_ARIA_ROLEDESCRIPTION=Control
 
 DIALOG_HEADER_ARIA_LABEL=Capçalera
 

package/src/i18n/messagebundle_cnr.properties

@@ -566,13 +566,27 @@ MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Dodatne radnje
 
 MENU_ITEM_LOADING=Učitavanje
 
-DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interaktivno zaglavlje
+DIALOG_ARIA_DESCRIBEDBY_RESIZABLE=Koristite Shift+strelice na tastaturi za promjenu veličine
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Koristite Shift+strelice na tastaturi za promjenu veličine
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE=Koristite strelice na tastaturi za kretanje
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Koristite strelice na tastaturi za kretanje
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Koristite strelice na tastaturi za kretanje, Shift+strelice na tastaturi za promjenu veličine
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Koristite strelice na tastaturi za kretanje, Shift+strelice na tastaturi za promjenu veličine
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE=Preskočite na kraj dijaloga da dođete do regulatora za prevlačenje i promjenu veličine.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE=Preskočite na kraj dijaloga da dođete do regulatora za prevlačenje.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE=Preskočite na kraj dijaloga da dođete do regulatora za promjenu veličine.
+
+DIALOG_RESIZE_HANDLE_TOOLTIP=Prevuci regulator za promjenu veličine (shift+strelica)
+
+DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL=Prevuci i promijeni veličinu dijaloga
+
+DIALOG_DRAG_HANDLE_ARIA_LABEL=Prevuci dijalog
+
+DIALOG_RESIZE_HANDLE_ARIA_LABEL=Promijeni veličinu dijaloga
+
+DIALOG_HANDLE_ARIA_ROLEDESCRIPTION=Regulator
 
 DIALOG_HEADER_ARIA_LABEL=Zaglavlje
 

package/src/i18n/messagebundle_cs.properties

@@ -566,13 +566,27 @@ MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Další akce
 
 MENU_ITEM_LOADING=Načítání
 
-DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interaktivní hlavička
+DIALOG_ARIA_DESCRIBEDBY_RESIZABLE=Pro změnu velikosti použijte Shift+šipky
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Pro změnu velikosti použijte Shift+šipky
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE=Pro přesun použijte šipky
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Pro přesun použijte šipky
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Pro přesun použijte šipky, pro změnu velikosti Shift+šipky
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Pro přesun použijte šipky, pro změnu velikosti Shift+šipky
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE=Tabulátorem přejděte na konec dialogového okna, abyste dosáhli regulátoru přetažení a změny velikosti.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE=Tabulátorem přejděte na konec dialogového okna, abyste dosáhli regulátoru přetažení.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE=Tabulátorem přejděte na konec dialogového okna, abyste dosáhli regulátoru změny velikosti.
+
+DIALOG_RESIZE_HANDLE_TOOLTIP=Přetáhnout regulátor pro změnu velikosti (Shift+šipka)
+
+DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL=Dialog přetažení a změny velikosti
+
+DIALOG_DRAG_HANDLE_ARIA_LABEL=Dialog přetažení 
+
+DIALOG_RESIZE_HANDLE_ARIA_LABEL=Dialog změny velikosti
+
+DIALOG_HANDLE_ARIA_ROLEDESCRIPTION=Regulátor
 
 DIALOG_HEADER_ARIA_LABEL=Hlavička
 

package/src/i18n/messagebundle_cy.properties

@@ -566,13 +566,27 @@ MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Camau Gweithredu Ychwanegol
 
 MENU_ITEM_LOADING=Wrthi''n llwytho
 
-DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Pennyn Rhyngweithiol
+DIALOG_ARIA_DESCRIBEDBY_RESIZABLE=Defnyddiwch y bysellau shift+saeth i ailfeintio
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Defnyddiwch y bysellau Shift+Saeth i ailfeintio
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE=Defnyddiwch y bysellau saeth i symud
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Defnyddiwch y bysellau Saeth i symud
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Defnyddiwch y bysellau saeth i symud, a''r bysellau Shift+saeth i ailfeintio
 
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Defnyddiwch y bysellau Saeth i symud, a''r bysellau Shift+Saeth i ailfeintio
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE=Tab i ddiwedd y ddeialog i gyrraedd yr handlen llusgo ac ailfeintio.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE=Tab i ddiwedd y ddeialog i gyrraedd yr handlen llusgo.
+
+DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE=Tab i ddiwedd y ddeialog i gyrraedd yr handlen ailfeintio.
+
+DIALOG_RESIZE_HANDLE_TOOLTIP=Handlen llusgo i ailfeintio (shifft+saeth)
+
+DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL=Deialog Llusgo ac Ailfeintio
+
+DIALOG_DRAG_HANDLE_ARIA_LABEL=Deialog Llusgo
+
+DIALOG_RESIZE_HANDLE_ARIA_LABEL=Deialog Ailfeintio
+
+DIALOG_HANDLE_ARIA_ROLEDESCRIPTION=Handlen
 
 DIALOG_HEADER_ARIA_LABEL=Pennyn