@ui5/webcomponents 2.13.0-rc.1 → 2.13.0-rc.3

package/dist/vscode.html-custom-data.json

@@ -288,6 +288,16 @@
           "name": "accessible-role",
           "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
           "values": [{ "name": "Button" }, { "name": "Link" }]
+        },
+        {
+          "name": "loading",
+          "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+          "values": []
+        },
+        {
+          "name": "loading-delay",
+          "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+          "values": []
         }
       ],
       "references": []
@@ -1505,7 +1515,7 @@
     },
     {
       "name": "ui5-file-uploader",
-      "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set the `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+      "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
       "attributes": [
         {
           "name": "accept",
@@ -2001,6 +2011,11 @@
           "description": "Defines the accessible name of the component.",
           "values": []
         },
+        {
+          "name": "accessibility-attributes",
+          "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
+          "values": [{ "name": "ListAccessibilityAttributes" }]
+        },
         {
           "name": "accessible-name-ref",
           "description": "Defines the IDs of the elements that label the component.",
@@ -3623,6 +3638,11 @@
           "name": "accessible-name",
           "description": "Defines the accessible ARIA name of the component.",
           "values": []
+        },
+        {
+          "name": "accessibility-attributes",
+          "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **roleDescription**: Provides a human-readable description for the role of the button.\n    Accepts any string value.\n  - **title**: Specifies a tooltip or description for screen readers.\n    Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n    Accepts boolean values: `true` or `false`.",
+          "values": [{ "name": "SplitButtonAccessibilityAttributes" }]
         }
       ],
       "references": []
@@ -4104,7 +4124,7 @@
         },
         {
           "name": "position",
-          "description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
+          "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
           "values": []
         },
         {
@@ -4646,6 +4666,16 @@
           "name": "accessible-role",
           "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
           "values": [{ "name": "Button" }, { "name": "Link" }]
+        },
+        {
+          "name": "loading",
+          "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+          "values": []
+        },
+        {
+          "name": "loading-delay",
+          "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+          "values": []
         }
       ],
       "references": []

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.13.0-rc.1",
+  "version": "2.13.0-rc.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -569,6 +569,16 @@
                 "type": "\"Button\" | \"Link\"",
                 "default": "\"Button\""
               }
+            },
+            {
+              "name": "loading",
+              "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading-delay",
+              "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+              "value": { "type": "number", "default": "1000" }
             }
           ],
           "slots": [
@@ -647,6 +657,16 @@
                 "name": "accessible-role",
                 "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
                 "value": { "type": "\"Button\" | \"Link\"" }
+              },
+              {
+                "name": "loading",
+                "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "loading-delay",
+                "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+                "value": { "type": "number" }
               }
             ],
             "events": [
@@ -3113,7 +3133,7 @@
         },
         {
           "name": "ui5-file-uploader",
-          "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n---\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set the `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+          "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n---\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
           "doc-url": "",
           "attributes": [
             {
@@ -3188,7 +3208,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set the `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users."
+              "description": "This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users."
             },
             {
               "name": "valueStateMessage",
@@ -4130,6 +4150,14 @@
               "description": "Defines the accessible name of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
+              "value": {
+                "type": "ListAccessibilityAttributes",
+                "default": "{}"
+              }
+            },
             {
               "name": "accessible-name-ref",
               "description": "Defines the IDs of the elements that label the component.",
@@ -4262,6 +4290,11 @@
                 "description": "Defines the accessible name of the component.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
+                "value": { "type": "ListAccessibilityAttributes" }
+              },
               {
                 "name": "accessible-name-ref",
                 "description": "Defines the IDs of the elements that label the component.",
@@ -7556,6 +7589,14 @@
               "name": "accessible-name",
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessibility-attributes",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **roleDescription**: Provides a human-readable description for the role of the button.\n    Accepts any string value.\n  - **title**: Specifies a tooltip or description for screen readers.\n    Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n    Accepts boolean values: `true` or `false`.",
+              "value": {
+                "type": "SplitButtonAccessibilityAttributes",
+                "default": "{}"
+              }
             }
           ],
           "slots": [
@@ -7602,6 +7643,11 @@
                 "name": "accessible-name",
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessibility-attributes",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **roleDescription**: Provides a human-readable description for the role of the button.\n    Accepts any string value.\n  - **title**: Specifies a tooltip or description for screen readers.\n    Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n    Accepts boolean values: `true` or `false`.",
+                "value": { "type": "SplitButtonAccessibilityAttributes" }
               }
             ],
             "events": [
@@ -8700,7 +8746,7 @@
             },
             {
               "name": "position",
-              "description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
+              "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
               "value": { "type": "number | undefined", "default": "undefined" }
             },
             {
@@ -8739,7 +8785,7 @@
               },
               {
                 "name": "position",
-                "description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
+                "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
                 "value": { "type": "number | undefined" }
               },
               {
@@ -9784,6 +9830,16 @@
                 "type": "\"Button\" | \"Link\"",
                 "default": "\"Button\""
               }
+            },
+            {
+              "name": "loading",
+              "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading-delay",
+              "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+              "value": { "type": "number", "default": "1000" }
             }
           ],
           "slots": [
@@ -9867,6 +9923,16 @@
                 "name": "accessible-role",
                 "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
                 "value": { "type": "\"Button\" | \"Link\"" }
+              },
+              {
+                "name": "loading",
+                "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "loading-delay",
+                "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+                "value": { "type": "number" }
               }
             ],
             "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.13.0-rc.1",
+  "version": "2.13.0-rc.3",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.13.0-rc.1",
-    "@ui5/webcomponents-icons": "2.13.0-rc.1",
-    "@ui5/webcomponents-icons-business-suite": "2.13.0-rc.1",
-    "@ui5/webcomponents-icons-tnt": "2.13.0-rc.1",
-    "@ui5/webcomponents-localization": "2.13.0-rc.1",
-    "@ui5/webcomponents-theming": "2.13.0-rc.1"
+    "@ui5/webcomponents-base": "2.13.0-rc.3",
+    "@ui5/webcomponents-icons": "2.13.0-rc.3",
+    "@ui5/webcomponents-icons-business-suite": "2.13.0-rc.3",
+    "@ui5/webcomponents-icons-tnt": "2.13.0-rc.3",
+    "@ui5/webcomponents-localization": "2.13.0-rc.3",
+    "@ui5/webcomponents-theming": "2.13.0-rc.3"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.13.0-rc.1",
+    "@ui5/webcomponents-tools": "2.13.0-rc.3",
     "chromedriver": "^137.0.4",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "40399a913e7a3c386f3ef969efaf1b63375f214a"
+  "gitHead": "f8c87eefa1d3cf69cd319ef9c72c01391978c008"
 }

package/src/ButtonTemplate.tsx

@@ -1,5 +1,7 @@
 import type Button from "./Button.js";
 import Icon from "./Icon.js";
+import BusyIndicator from "./BusyIndicator.js";
+import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
 
 export default function ButtonTemplate(this: Button, injectedProps?: {
 		ariaPressed?: boolean,
@@ -15,7 +17,7 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				"ui5-button-root": true,
 				"ui5-button-badge-placement-end": this.badge[0]?.design === "InlineText",
 				"ui5-button-badge-placement-end-top": this.badge[0]?.design === "OverlayText",
-				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot",
+				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot"
 			}}
 			disabled={this.disabled}
 			data-sap-focus-ref
@@ -37,6 +39,7 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			aria-haspopup={this._hasPopup}
 			aria-label={this.ariaLabelText}
 			aria-description={this.ariaDescriptionText}
+			aria-busy={this.loading ? "true" : undefined}
 			title={this.buttonTitle}
 			part="button"
 			role={this.effectiveAccRole}
@@ -69,5 +72,15 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				<slot name="badge"/>
 			}
 		</button>
+		{this.loading &&
+			<BusyIndicator
+				id={`${this._id}-button-busy-indicator`}
+				class="ui5-button-busy-indicator"
+				size={this.iconOnly ? BusyIndicatorSize.S : BusyIndicatorSize.M}
+				active={true}
+				delay={this.loadingDelay}
+				inert={this.loading}
+			/>
+		}
 	</>);
 }

package/src/CheckBoxTemplate.tsx

@@ -15,16 +15,16 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				"ui5-checkbox-root": true,
 				"ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(),
 			}}
-			role="checkbox"
+			role={this.accInfo.role}
 			part="root"
-			aria-checked={this.effectiveAriaChecked}
-			aria-readonly={this.ariaReadonly}
-			aria-disabled={this.effectiveAriaDisabled}
+			aria-checked={this.accInfo.ariaChecked}
+			aria-readonly={this.accInfo.ariaReadonly}
+			aria-disabled={this.accInfo.ariaDisabled}
 			aria-label={this.ariaLabelText}
 			aria-labelledby={this.ariaLabelledBy}
 			aria-describedby={this.ariaDescribedBy}
-			aria-required={this.required}
-			tabindex={this.effectiveTabIndex}
+			aria-required={this.accInfo.ariaRequired}
+			tabindex={this.accInfo.tabindex}
 			onMouseDown={this._onmousedown}
 			onMouseUp={this._onmouseup}
 			onKeyDown={this._onkeydown}
@@ -45,6 +45,7 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				</div>
 			}
 
+			{this.accInfo.role === "checkbox" &&
 			<input
 				id={`${this._id}-CB`}
 				type="checkbox"
@@ -56,6 +57,7 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				aria-hidden="true"
 				data-sap-no-tab-ref
 			/>
+			}
 
 			{this.text &&
 			<Label

package/src/FileUploaderTemplate.tsx

@@ -1,4 +1,6 @@
 import Icon from "./Icon.js";
+import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
 import type FileUploader from "./FileUploader.js";
@@ -64,7 +66,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 										))}
 									</Tokenizer>
 									<Icon
-										name="decline"
+										name={decline}
 										class="ui5-file-uploader-clear-icon inputIcon"
 										onClick={this._onClearIconClick}
 										title={this.clearIconTitle}
@@ -83,7 +85,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 							)}
 
 							<Icon
-								name="value-help"
+								name={valueHelp}
 								class="ui5-file-uploader-value-help-icon inputIcon"
 								title={this.valueHelpTitle}
 							/>

package/src/ListTemplate.tsx

@@ -13,7 +13,7 @@ export default function ListTemplate(this: List) {
 			onDrop={this._ondrop}
 			onDragLeave={this._ondragleave}
 			// events bubbling from slotted items
-			onui5-close={this.onItemClose}
+			onui5-_close={this.onItemClose}
 			onui5-toggle={this.onItemToggle}
 			onui5-request-tabindex-change={this.onItemTabIndexChange}
 			onui5-_focused={this.onItemFocused}
@@ -92,7 +92,8 @@ function moreRow(this: List) {
 					"ui5-growing-button-inner": true,
 					"ui5-growing-button-inner-active": this._loadMoreActive,
 				}}
-				aria-labelledby={`${this._id}-growingButton-text`}
+				aria-label={this.growingButtonAriaLabel}
+				aria-labelledby={this.growingButtonAriaLabelledBy}
 				onClick={this._onLoadMoreClick}
 				onKeyDown={this._onLoadMoreKeydown}
 				onKeyUp={this._onLoadMoreKeyup}

package/src/MenuItemGroupTemplate.tsx

@@ -4,6 +4,7 @@ export default function MenuItemGroupTemplate(this: MenuItemGroup) {
 	return (
 		<div
 			role="group"
+			aria-label={this.ariaLabelText}
 			onui5-check={this._handleItemCheck}
 		>
 			<slot></slot>

package/src/MenuItemTemplate.tsx

@@ -138,6 +138,7 @@ function listItemPostContent(this: MenuItem) {
 						loadingDelay={this.loadingDelay}
 						onMouseOver={this._itemMouseOver}
 						onKeyDown={this._itemKeyDown}
+						onKeyUp={this._itemKeyUp}
 						// handles event from slotted children
 						onui5-close-menu={this._close}
 						onui5-exit-end-content={this._navigateOutOfEndContent}

package/src/MultiComboBoxItemTemplate.tsx

@@ -12,8 +12,7 @@ function listItemContent(this: MultiComboBoxItem) {
 			<CheckBox
 				disabled={this._readonly}
 				checked={this.selected}
-				tabindex={-1}
-				accessibleName={this._accessibleName}
+				_accInfo = {this.checkBoxAccInfo}
 			/>
 			<div part="content" id="content" class="ui5-li-content">
 				<div class="ui5-li-text-wrapper">

package/src/SplitButtonTemplate.tsx

@@ -8,7 +8,10 @@ export default function SplitButtonTemplate(this: SplitButton) {
 			role={this._hideArrowButton ? "button" : "group"}
 			class="ui5-split-button-root"
 			tabindex={this._tabIndex}
-			aria-labelledby={`${this._id}-invisibleTextDefault ${this._id}-invisibleText`}
+			aria-labelledby={this._hideArrowButton ? undefined : `${this._id}-invisibleTextDefault ${this._id}-invisibleText`}
+			aria-haspopup={this._computedAccessibilityAttributes?.root?.hasPopup}
+			aria-roledescription={this._computedAccessibilityAttributes?.root?.roleDescription}
+			aria-label={this._hideArrowButton ? this._computedAccessibilityAttributes?.root?.title : undefined}
 			onFocusOut={this._onFocusOut}
 			onKeyDown={this._onKeyDown}
 			onKeyUp={this._onKeyUp}
@@ -28,31 +31,34 @@ export default function SplitButtonTemplate(this: SplitButton) {
 				onMouseUp={this._textButtonRelease}
 				onFocusIn={this._onInnerButtonFocusIn}
 				onFocusOut={this._onFocusOut}
+				tooltip={this._computedAccessibilityAttributes?.root?.title}
 			>
 				{this.isTextButton && <slot></slot> }
 			</Button>
 
-			{!this._hideArrowButton &&
-				<Button
-					class="ui5-split-arrow-button"
-					design={this.design}
-					icon={slimArrowDown}
-					tabindex={-1}
-					tooltip={this.accInfo.arrowButton.title}
-					accessibilityAttributes={this.accInfo.arrowButton.accessibilityAttributes}
-					disabled={this.disabled}
-					active={this.effectiveActiveArrowButton}
-					part="arrowButton"
-					onClick={this._handleArrowButtonAction}
-					onMouseDown={this._arrowButtonPress}
-					onMouseUp={this._arrowButtonRelease}
-					onFocusIn={this._onInnerButtonFocusIn}
-					onActiveStateChange={this._onArrowButtonActiveStateChange}
-				>
-				</Button>
-			}
-			<span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.accInfo.root.description} {this.accInfo.root.keyboardHint} {this.accessibleName}</span>
-			<span id={`${this._id}-invisibleTextDefault`} class="ui5-hidden-text">{this.textButtonAccText}</span>
+			{!this._hideArrowButton && (
+				<>
+					<Button
+						class="ui5-split-arrow-button"
+						design={this.design}
+						icon={slimArrowDown}
+						tabindex={-1}
+						tooltip={this._computedAccessibilityAttributes?.arrowButton?.title}
+						accessibilityAttributes={{ hasPopup: this._computedAccessibilityAttributes?.arrowButton?.hasPopup, expanded: this._computedAccessibilityAttributes?.arrowButton?.expanded }}
+						disabled={this.disabled}
+						active={this.effectiveActiveArrowButton}
+						part="arrowButton"
+						onClick={this._handleArrowButtonAction}
+						onMouseDown={this._arrowButtonPress}
+						onMouseUp={this._arrowButtonRelease}
+						onFocusIn={this._onInnerButtonFocusIn}
+						onActiveStateChange={this._onArrowButtonActiveStateChange}
+					>
+					</Button>
+					<span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.accInfo.keyboardHint} {this.accessibleName}</span>
+					<span id={`${this._id}-invisibleTextDefault`} class="ui5-hidden-text">{this._computedAccessibilityAttributes?.root?.title || this.textButtonAccText}</span>
+				</>
+			)}
 		</div>
 	);
 }

package/src/TableHeaderRowTemplate.tsx

@@ -6,13 +6,15 @@ import ClearAll from "@ui5/webcomponents-icons/dist/clear-all.js";
 import IconDesign from "./types/IconDesign.js";
 import type TableHeaderRow from "./TableHeaderRow.js";
 
-export default function TableHeaderRowTemplate(this: TableHeaderRow) {
+export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColIndex: number = 1) {
 	return (
 		<>
 			{ this._hasSelector &&
 				<TableHeaderCell id="selection-cell"
 					aria-selected={this._isSelected}
 					aria-label={this._i18nSelection}
+					aria-description={this._selectionCellAriaDescription}
+					aria-colindex={ariaColIndex++}
 					data-ui5-table-cell-fixed
 					data-ui5-table-selection-component
 				>
@@ -40,12 +42,14 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow) {
 				</TableHeaderCell>
 			}
 
-			{ this._visibleCells.map(cell => (
-				<slot name={cell._individualSlot} key={cell._individualSlot}></slot>
-			))}
+			{ this._visibleCells.map(cell => {
+				cell.ariaColIndex = `${ariaColIndex++}`;
+				return <slot name={cell._individualSlot} key={cell._individualSlot}></slot>;
+			})}
 
 			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell"
+					aria-colindex={ariaColIndex++}
 					aria-label={this._i18nRowActions}
 				></TableHeaderCell>
 			}

package/src/TableRowTemplate.tsx

@@ -60,7 +60,7 @@ export default function TableRowTemplate(this: TableRow) {
 			}
 
 			{ this._renderNavigated &&
-				<TableCell id="navigated-cell" data-excluded-from-navigation={true}>
+				<TableCell id="navigated-cell" data-excluded-from-navigation aria-hidden={true}>
 					<div id="navigated"></div>
 				</TableCell>
 			}

package/src/TableTemplate.tsx

@@ -12,7 +12,9 @@ export default function TableTemplate(this: Table) {
 			<div id="table" role="grid"
 				style={this.styles.table}
 				aria-label={this._ariaLabel}
+				aria-description={this._ariaDescription}
 				aria-rowcount={this._ariaRowCount}
+				aria-colcount={this._ariaColCount}
 				aria-multiselectable={this._ariaMultiSelectable}
 			>
 				<slot name="headerRow"></slot>
@@ -68,7 +70,7 @@ export default function TableTemplate(this: Table) {
 
 function growingRow(this: Table) {
 	return (
-		<TableRow id="growing-row" ui5-growing-row>
+		<TableRow id="growing-row" ui5-growing-row aria-hidden={true}>
 			<TableCell id="growing-cell">
 				<slot name={this._getGrowing()?._individualSlot}></slot>
 			</TableCell>

package/src/i18n/messagebundle.properties

@@ -514,6 +514,9 @@ DATETIME_PICKER_TIME_BUTTON=Time
 #XACT: ARIA announcement for token deletable
 TOKEN_ARIA_DELETABLE=Deletable
 
+#XACT: ARIA announcement for token removal
+TOKEN_ARIA_REMOVE=Remove
+
 #XACT: ARIA announcement for token label
 TOKEN_ARIA_LABEL=Token
 
@@ -643,6 +646,15 @@ MENU_CLOSE_BUTTON_ARIA_LABEL=Decline
 #XACT: ARIA information for the Menu popover
 MENU_POPOVER_ACCESSIBLE_NAME=Select an option from the menu
 
+#XACT: ARIA information for the Menu Item Group with itemSelectionMode "None"
+MENU_ITEM_GROUP_NONE_ACCESSIBLE_NAME=Contains Non-Selectable Items
+
+#XACT: ARIA information for the Menu Item Group with itemSelectionMode "SingleSelect"
+MENU_ITEM_GROUP_SINGLE_ACCESSIBLE_NAME=Contains Selectable Items
+
+#XACT: ARIA information for the Menu Item Group with itemSelectionMode "MultiSelect"
+MENU_ITEM_GROUP_MULTI_ACCESSIBLE_NAME=Contains Multi-Selectable Items
+
 #XACT: ARIA announcement for roldesecription attribute of Dialog header
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interactive Header
 
@@ -683,6 +695,20 @@ TABLE_SELECTION=Selection
 TABLE_ROW_SELECTOR=Row Selector
 #XMSG: Message text to be displayed when there are no rows in the grid
 TABLE_NO_DATA=No Data
+#XACT: ARIA announcement for the table that allows single selections
+TABLE_SINGLE_SELECTABLE=Single Selection Table
+#XACT: ARIA announcement for the table that allows multi selection
+TABLE_MULTI_SELECTABLE=Multi Selection Table
+#XACT: ARIA description for the selection column header when select all checkbox is shown
+TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Contains Select All Checkbox
+#XACT: ARIA description for the selection column header when select all checkbox is checked
+TABLE_COLUMNHEADER_SELECTALL_CHECKED=Checked
+#XACT: ARIA description for the selection column header when select all checkbox is not checked
+TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Not Checked
+#XACT: ARIA description for the selection column header when clear all button is shown
+TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Contains Clear All Button
+#XACT: ARIA description for the selection column header when clear all button is disabled
+TABLE_COLUMNHEADER_CLEARALL_DISABLED=Disabled
 #XACT: Description for the popin containing column header
 TABLE_ROW_POPIN=Row Popin
 #XTXT: Text for the growing button