@ui5/webcomponents 2.14.0 → 2.15.0-rc.2

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.14.0",
+  "version": "2.15.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -543,7 +543,7 @@
             },
             {
               "name": "accessibility-attributes",
-              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
               "value": {
                 "type": "ButtonAccessibilityAttributes",
                 "default": "{}"
@@ -640,7 +640,7 @@
               },
               {
                 "name": "accessibility-attributes",
-                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
                 "value": { "type": "ButtonAccessibilityAttributes" }
               },
               {
@@ -7861,7 +7861,7 @@
             },
             {
               "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`.",
+              "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\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\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": "{}"
@@ -7915,7 +7915,7 @@
               },
               {
                 "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`.",
+                "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\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\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" }
               }
             ],
@@ -10106,7 +10106,7 @@
             },
             {
               "name": "accessibility-attributes",
-              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
               "value": {
                 "type": "ButtonAccessibilityAttributes",
                 "default": "{}"
@@ -10208,7 +10208,7 @@
               },
               {
                 "name": "accessibility-attributes",
-                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
                 "value": { "type": "ButtonAccessibilityAttributes" }
               },
               {
@@ -10299,6 +10299,11 @@
               "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "name",
+              "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "show-clear-all",
               "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.",
@@ -10348,6 +10353,11 @@
                 "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "name",
+                "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "show-clear-all",
                 "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.",
@@ -10383,7 +10393,7 @@
         },
         {
           "name": "ui5-toolbar",
-          "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`\n---\n\n\n### **Methods:**\n - **isOverflowOpen(): _boolean_** - Returns if the overflow popup is open.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n \n  **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.",
+          "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`\n---\n\n\n### **Methods:**\n - **isOverflowOpen(): _boolean_** - Returns if the overflow popup is open.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.",
           "doc-url": "",
           "attributes": [
             {
@@ -10413,7 +10423,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "Defines the items of the component.\n \n  **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here."
+              "description": "Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here."
             }
           ],
           "events": [],
@@ -10601,7 +10611,7 @@
         },
         {
           "name": "ui5-toolbar-select",
-          "description": "### Overview\nThe `ui5-toolbar-select` component is used to create a toolbar drop-down list.\nThe items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n\n`import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option changes.\n- **open** - Fired after the component's dropdown menu opens.\n- **close** - Fired after the component's dropdown menu closes.\n\n### **Slots:**\n - **default** - Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-toolbar-select-option` component to define the desired options.",
+          "description": "### Overview\nThe `ui5-toolbar-select` component is used to create a toolbar drop-down list.\nThe items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n\n`import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option changes.\n- **open** - Fired after the component's dropdown menu opens.\n- **close** - Fired after the component's dropdown menu closes.\n\n### **Slots:**\n - **default** - Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-toolbar-select-option` component to define the desired options.\n- **label** - Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option.",
           "doc-url": "",
           "attributes": [
             {
@@ -10632,6 +10642,11 @@
               "description": "Receives id(or many ids) of the elements that label the select.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "value",
+              "description": "Defines the value of the component:",
+              "value": { "type": "any", "default": "\"\"" }
+            },
             {
               "name": "overflow-priority",
               "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.",
@@ -10650,6 +10665,10 @@
             {
               "name": "default",
               "description": "Defines the component options.\n\n**Note:** Only one selected option is allowed.\nIf more than one option is defined as selected, the last one would be considered as the selected one.\n\n**Note:** Use the `ui5-toolbar-select-option` component to define the desired options."
+            },
+            {
+              "name": "label",
+              "description": "Defines the HTML element that will be displayed in the component input part,\nrepresenting the selected option."
             }
           ],
           "events": [
@@ -10695,6 +10714,11 @@
                 "description": "Receives id(or many ids) of the elements that label the select.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "value",
+                "description": "Defines the value of the component:",
+                "value": { "type": "any" }
+              },
               {
                 "name": "overflow-priority",
                 "description": "Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\nthe item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.14.0",
+  "version": "2.15.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -8,8 +8,7 @@
   "type": "module",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
-  "private": false,
-  "customElements": "./dist/custom-elements.json",
+  "customElements": "dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
@@ -18,20 +17,20 @@
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
-    "lint:scope": "nps scope.lint",
+    "lint:scope": "wc-dev scope.lint",
     "start": "wc-dev start",
     "watch": "wc-dev watch",
-    "generate": "nps generate",
-    "generateAPI": "nps generateAPI",
+    "generate": "wc-dev generate",
+    "generateAPI": "wc-dev generateAPI",
     "build": "wc-dev build",
-    "bundle": "nps build.bundle",
-    "test": "wc-dev test",
-    "test:suite-1": "wc-dev test-suite-1",
-    "test:suite-2": "wc-dev test-suite-2",
-    "test:cypress": "nps test-cy-ci",
-    "test:cypress:suite-1": "nps test-cy-ci-suite-1",
-    "test:cypress:suite-2": "nps test-cy-ci-suite-2",
-    "test:cypress:open": "nps test-cy-open",
+    "bundle": "wc-dev build.bundle",
+    "test": "yarn test:cypress",
+    "test:cypress": "wc-dev test-cy-ci",
+    "test:cypress:suite-1": "wc-dev test-cy-ci-suite-1",
+    "test:cypress:suite-2": "wc-dev test-cy-ci-suite-2",
+    "test:cypress:suite-3": "wc-dev test-cy-ci-suite-3",
+    "test:cypress:suite-4": "wc-dev test-cy-ci-suite-4",
+    "test:cypress:open": "wc-dev test-cy-open",
     "test:cypress:single": "npx cypress run --component --browser chrome --spec",
     "test:vitest": "yarn vitest run",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
@@ -39,7 +38,6 @@
     "prepublishOnly": "tsc -b"
   },
   "exports": {
-    "./.port": "./.port",
     "./src/*": "./src/*",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json",
@@ -50,24 +48,29 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/SAP/ui5-webcomponents.git",
+    "url": "https://github.com/UI5/webcomponents.git",
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.14.0",
-    "@ui5/webcomponents-icons": "2.14.0",
-    "@ui5/webcomponents-icons-business-suite": "2.14.0",
-    "@ui5/webcomponents-icons-tnt": "2.14.0",
-    "@ui5/webcomponents-localization": "2.14.0",
-    "@ui5/webcomponents-theming": "2.14.0"
+    "@ui5/webcomponents-base": "2.15.0-rc.2",
+    "@ui5/webcomponents-icons": "2.15.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.15.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.15.0-rc.2",
+    "@ui5/webcomponents-localization": "2.15.0-rc.2",
+    "@ui5/webcomponents-theming": "2.15.0-rc.2"
   },
   "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.6",
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.14.0",
-    "chromedriver": "^138.0.5",
+    "@ui5/webcomponents-tools": "2.15.0-rc.2",
+    "chokidar-cli": "^3.0.0",
+    "cypress": "^13.0.0",
+    "eslint": "^7.22.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
+    "rimraf": "^6.0.1",
+    "vite": "5.4.8",
     "vitest": "^3.0.2"
   },
-  "gitHead": "798113e3338ae2e3570cbee2ad0eb629d70445e4"
+  "gitHead": "ed55cd91014aec191705b37b57e8cf5dc8cc95ce"
 }

package/src/ButtonTemplate.tsx

@@ -34,10 +34,11 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			onTouchStart={this._ontouchstart}
 			onTouchEnd={this._ontouchend}
 			tabindex={this.tabIndexValue}
-			aria-expanded={this.accessibilityAttributes.expanded}
-			aria-controls={this.accessibilityAttributes.controls}
-			aria-haspopup={this._hasPopup}
-			aria-label={this.ariaLabelText}
+			aria-expanded={this._computedAccessibilityAttributes?.expanded}
+			aria-controls={this._computedAccessibilityAttributes?.controls}
+			aria-haspopup={this._computedAccessibilityAttributes?.hasPopup}
+			aria-label={this._computedAccessibilityAttributes?.ariaLabel}
+			aria-keyshortcuts={this._computedAccessibilityAttributes?.ariaKeyShortcuts}
 			aria-description={this.ariaDescriptionText}
 			aria-busy={this.loading ? "true" : undefined}
 			title={this.buttonTitle}

package/src/CalendarHeaderTemplate.tsx

@@ -16,7 +16,6 @@ export default function CalendarTemplate(this: Calendar) {
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onPrevButtonClick}
-				title={this.headerPreviousButtonText}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
 			</div>
@@ -30,6 +29,9 @@ export default function CalendarTemplate(this: Calendar) {
 					tabindex={0}
 					role="button"
 					aria-label={this.accInfo.ariaLabelMonthButton}
+					aria-description={this.accInfo.ariaLabelMonthButton}
+					title={this.accInfo.tooltipMonthButton}
+					aria-keyshortcuts={this.accInfo.keyShortcutMonthButton}
 					onClick={this.onHeaderShowMonthPress}
 					onKeyDown={this.onMonthButtonKeyDown}
 					onKeyUp={this.onMonthButtonKeyUp}
@@ -47,9 +49,13 @@ export default function CalendarTemplate(this: Calendar) {
 					hidden={this._isHeaderYearButtonHidden}
 					tabindex={0}
 					role="button"
+					aria-label={this.accInfo.ariaLabelYearButton}
+					aria-description={this.accInfo.ariaLabelYearButton}
 					onClick={this.onHeaderShowYearPress}
 					onKeyDown={this.onYearButtonKeyDown}
 					onKeyUp={this.onYearButtonKeyUp}
+					title={this.accInfo.tooltipYearButton}
+					aria-keyshortcuts={this.accInfo.keyShortcutYearButton}
 				>
 					<span>{this._headerYearButtonText}</span>
 					{this.hasSecondaryCalendarType &&
@@ -63,6 +69,10 @@ export default function CalendarTemplate(this: Calendar) {
 					hidden={this._isHeaderYearRangeButtonHidden}
 					tabindex={0}
 					role="button"
+					aria-label={this.accInfo.ariaLabelYearRangeButton}
+					aria-description={this.accInfo.ariaLabelYearRangeButton}
+					title={this.accInfo.tooltipYearRangeButton}
+					aria-keyshortcuts={this.accInfo.keyShortcutYearRangeButton}
 					onClick={this.onHeaderShowYearRangePress}
 					onKeyDown={this.onYearRangeButtonKeyDown}
 					onKeyUp={this.onYearRangeButtonKeyUp}
@@ -83,7 +93,6 @@ export default function CalendarTemplate(this: Calendar) {
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onNextButtonClick}
-				title={this.headerNextButtonText}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowRight}/>
 			</div>

package/src/ListTemplate.tsx

@@ -29,7 +29,10 @@ export default function ListTemplate(this: List) {
 				active={this.showBusyIndicatorOverlay}
 				class="ui5-list-busy-indicator"
 			>
+
 				<div class="ui5-list-scroll-container">
+					<span tabindex={-1} aria-hidden="true" class="ui5-list-start-marker"></span>
+
 					{this.header.length > 0 && <slot name="header" />}
 
 					{this.shouldRenderH1 &&

package/src/MultiInputTemplate.tsx

@@ -27,6 +27,7 @@ function preContent(this: MultiInput) {
 				onKeyDown={this._onTokenizerKeydown}
 				onTokenDelete={this.tokenDelete}
 				onFocusOut={this._tokenizerFocusOut}
+				onShowMoreItemsPress={this._showMoreItemsPress}
 			>
 				{ this.tokens.map(token => <slot name={token._individualSlot}></slot>)}
 			</Tokenizer>

package/src/SegmentedButtonTemplate.tsx

@@ -10,7 +10,8 @@ export default function SegmentedButtonTemplate(this: SegmentedButton) {
 			onKeyDown={this._onkeydown}
 			onKeyUp={this._onkeyup}
 			onFocusIn={this._onfocusin}
-			aria-multiselectable="true"
+			aria-multiselectable={this.selectionMode === "Multiple" ? "true" : "false"}
+			aria-orientation="horizontal"
 			aria-description={this.ariaDescriptionText}
 			aria-label={this.ariaLabelText}
 			aria-roledescription={this.ariaRoleDescription}

package/src/SelectPopoverTemplate.tsx

@@ -27,6 +27,7 @@ export default function SelectPopoverTemplate(this: Select) {
 					onBeforeOpen={this._beforeOpen}
 					onClose={this._afterClose}
 					onKeyDown={this._onkeydown}
+					accessibleName={this._isPhone ? this._headerTitleText : undefined}
 				>
 					{this._isPhone &&
 						<div slot="header" class="ui5-responsive-popover-header">

package/src/SplitButtonTemplate.tsx

@@ -8,10 +8,11 @@ export default function SplitButtonTemplate(this: SplitButton) {
 			role={this._hideArrowButton ? "button" : "group"}
 			class="ui5-split-button-root"
 			tabindex={this._tabIndex}
-			aria-labelledby={this._hideArrowButton ? undefined : `${this._id}-invisibleTextDefault ${this._id}-invisibleText`}
+			aria-labelledby={`${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}
+			aria-label={this._computedAccessibilityAttributes?.root?.title}
+			aria-keyshortcuts={this._computedAccessibilityAttributes?.root?.ariaKeyShortcuts}
 			onFocusOut={this._onFocusOut}
 			onKeyDown={this._onKeyDown}
 			onKeyUp={this._onKeyUp}
@@ -56,7 +57,7 @@ export default function SplitButtonTemplate(this: SplitButton) {
 					>
 					</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>
+					<span id={`${this._id}-invisibleTextDefault`} class="ui5-hidden-text">{this.buttonTextContent}</span>
 				</>
 			)}
 		</div>

package/src/TabContainerTemplate.tsx

@@ -73,7 +73,6 @@ export default function TabContainerTemplate(this: TabContainer, injectedPartial
 						<Button
 							endIcon={this.overflowMenuIcon}
 							data-ui5-stable="overflow-start"
-							tabindex={ -1 }
 							tooltip={this.overflowMenuTitle}
 							accessibilityAttributes={this.overflowBtnAccessibilityAttributes}
 						>
@@ -108,7 +107,6 @@ export default function TabContainerTemplate(this: TabContainer, injectedPartial
 						<Button
 							endIcon={this.overflowMenuIcon}
 							data-ui5-stable="overflow-end"
-							tabindex={ -1 }
 							tooltip={this.overflowMenuTitle}
 							accessibilityAttributes={this.overflowBtnAccessibilityAttributes}
 						>

package/src/ToolbarSelectTemplate.tsx

@@ -7,6 +7,7 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 		<Select
 			class={this.classes.root}
 			style={this.styles}
+			value={this.value}
 			data-ui5-external-action-item-id={this._id}
 			valueState={this.valueState}
 			disabled={this.disabled}
@@ -17,6 +18,10 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 			onOpen={(...args) => this.onOpen(...args)}
 			onChange={(...args) => this.onChange(...args)}
 		>
+			{this.hasCustomLabel &&
+				<slot name="label" slot="label">
+				</slot>
+			}
 			{this.options.map((option, index) => (
 				<Option
 					selected={option.selected}
@@ -25,6 +30,5 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 					{option.textContent}
 				</Option>
 			))}
-		</Select>
-	);
+		</Select>);
 }

package/src/i18n/messagebundle.properties

@@ -592,11 +592,32 @@ VALUE_STATE_LINKS=To go to the first link, press Ctrl+Alt+F8. To move to the nex
 #XACT: ARIA announcement for keyboard shortcut to value state multiple links on Mac
 VALUE_STATE_LINKS_MAC=To go to the first link, press Cmd+Option+F8. To move to the next link, use Tab
 
-#XBUT: Tooltip text for 'Next' button in the Calendar Header
-CALENDAR_HEADER_NEXT_BUTTON = Next
+#XACT: ARIA label for month button in the Calendar Header
+CALENDAR_HEADER_MONTH_BUTTON = Month {0}
 
-#XBUT: Tooltip text for 'Previous' button in the Calendar Header
-CALENDAR_HEADER_PREVIOUS_BUTTON = Previous
+#XACT: ARIA label for year button in the Calendar Header
+CALENDAR_HEADER_YEAR_BUTTON = Year {0}
+
+#XACT: ARIA label for year range button in the Calendar Header
+CALENDAR_HEADER_YEAR_RANGE_BUTTON = Year range from {0} to {1}
+
+#XACT: Keyboard shortcut for month button in the Calendar Header
+CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT = F4
+
+#XACT: Keyboard shortcut for year button in the Calendar Header
+CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT = Shift + F4
+
+#XACT: Keyboard shortcut for year range button in the Calendar Header
+CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT = Shift + F4
+
+#XACT: ARIA label for day picker selected range start
+DAY_PICKER_SELECTED_RANGE_START = {0} First date of range
+
+#XACT: ARIA label for day picker selected range between dates
+DAY_PICKER_SELECTED_RANGE_BETWEEN = {0} in a selected range
+
+#XACT: ARIA label for day picker selected range end
+DAY_PICKER_SELECTED_RANGE_END = {0} Last date of range
 
 #XBUT: Text for 'Week number' in the DayPicker
 DAY_PICKER_WEEK_NUMBER_TEXT = Week number