@ui5/webcomponents 1.4.0 → 1.7.0

package/src/List.js

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import {
@@ -14,6 +13,7 @@ import {
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
@@ -77,7 +77,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
 		 * Defines the component header text.
@@ -265,7 +265,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
 		 * Fired when an item is activated, unless the item's <code>type</code> property
@@ -344,6 +344,7 @@ const metadata = {
 			detail: {
 				selectedItems: { type: Array },
 				previouslySelectedItems: { type: Array },
+				targetItem: { type: HTMLElement }, // protected, holds the event target item
 				selectionComponentPressed: { type: Boolean }, // protected, indicates if the user used the selection components to change the selection
 			},
 		},
@@ -598,15 +599,10 @@ class List extends UI5Element {
 	}
 
 	get growsOnScroll() {
-		return this.growing === ListGrowingMode.Scroll && !isIE();
+		return this.growing === ListGrowingMode.Scroll;
 	}
 
 	get growsWithButton() {
-		if (isIE()) {
-			// On IE fallback to "More" button, even if growing of type "Scroll" is set.
-			return this.grows;
-		}
-
 		return this.growing === ListGrowingMode.Button;
 	}
 
@@ -615,7 +611,7 @@ class List extends UI5Element {
 	}
 
 	get busyIndPosition() {
-		if (isIE() || !this.grows) {
+		if (!this.grows) {
 			return "absolute";
 		}
 
@@ -630,6 +626,15 @@ class List extends UI5Element {
 		};
 	}
 
+	get classes() {
+		return {
+			root: {
+				"ui5-list-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
+		};
+	}
+
 	initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this, {
 			skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items
@@ -698,6 +703,7 @@ class List extends UI5Element {
 				selectedItems: this.getSelectedItems(),
 				previouslySelectedItems,
 				selectionComponentPressed: event.detail.selectionComponentPressed,
+				targetItem: event.detail.item,
 				key: event.detail.key,
 			});
 		}
@@ -894,6 +900,8 @@ class List extends UI5Element {
 	onItemFocused(event) {
 		const target = event.target;
 
+		event.stopPropagation();
+
 		this._itemNavigation.setCurrentItem(target);
 		this.fireEvent("item-focused", { item: target });
 
@@ -943,7 +951,7 @@ class List extends UI5Element {
 	onForwardBefore(event) {
 		this.setPreviouslyFocusedItem(event.target);
 		this.focusBeforeElement();
-		event.stopImmediatePropagation();
+		event.stopPropagation();
 	}
 
 	onForwardAfter(event) {
@@ -955,6 +963,8 @@ class List extends UI5Element {
 			this.focusGrowingButton();
 			event.preventDefault();
 		}
+
+		event.stopPropagation();
 	}
 
 	focusBeforeElement() {

package/src/ListItem.hbs

@@ -19,7 +19,7 @@
 	aria-posinset="{{_accInfo.posinset}}"
 	aria-setsize="{{_accInfo.setsize}}"
 	aria-describedby="{{_id}}-invisibleText-describedby"
-	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
+	aria-labelledby="{{_accessibleNameRef}}"
 	aria-disabled="{{ariaDisabled}}"
 >
 		{{> listItemPreContent}}
@@ -80,7 +80,7 @@
 				id="{{_id}}-multiSelectionElement"
 				class="ui5-li-multisel-cb"
 				?checked="{{selected}}"
-				aria-label="{{_accInfo.ariaLabel}}"
+				accessible-name="{{_accInfo.ariaLabel}}"
 				@click="{{onMultiSelectionComponentPress}}">
 		</ui5-checkbox>
 	{{/if}}

package/src/ListItem.js

@@ -24,7 +24,7 @@ import styles from "./generated/themes/ListItem.css.js";
  */
 const metadata = {
 	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.ListItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
 
 		/**
 		 * Defines the visual indication and behavior of the list items.
@@ -376,6 +376,16 @@ class ListItem extends ListItemBase {
 		return ListItem.i18nBundle.getText(DELETE);
 	}
 
+	get _accessibleNameRef() {
+		if (this.accessibleName) {
+			// accessibleName is set - return labels excluding content
+			return `${this._id}-invisibleText`;
+		}
+
+		// accessibleName is not set - return _accInfo.listItemAriaLabel including content
+		return `${this._id}-content ${this._id}-invisibleText`;
+	}
+
 	get _accInfo() {
 		return {
 			role: this.accessibleRole || this.role,

package/src/ListItemBase.js

@@ -10,7 +10,7 @@ import styles from "./generated/themes/ListItemBase.css.js";
  * @public
  */
 const metadata = {
-	properties: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.ListItemBase.prototype */  {
 
 		/**
 		 * Defines the selected state of the <code>ListItem</code>.
@@ -57,7 +57,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
+	events: /** @lends sap.ui.webcomponents.main.ListItemBase.prototype */  {
 		_focused: {},
 		"_forward-after": {},
 		"_forward-before": {},

package/src/Menu.hbs

@@ -57,6 +57,7 @@
 				class="ui5-menu-item"
 				id="{{../_id}}-menu-item-{{@index}}"
 				icon="{{this.item.icon}}"
+				accessible-name={{this.item.ariaLabelledByText}}
 				accessible-role="menuitem"
 				._ariaHasPopup={{this.ariaHasPopup}}
 				?disabled={{this.item.disabled}}

package/src/Menu.js

@@ -118,6 +118,8 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
 		/**
 		 * Defines the items of this component.
+		 * <br><br>
+		 * <b>Note:</b> Use <code>ui5-menu-item</code> for the intended design.
 		 *
 		 * @type {sap.ui.webcomponents.main.IMenuItem[]}
 		 * @slot items
@@ -178,7 +180,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/Menu.js";</code>
+ * <code>import "@ui5/webcomponents/dist/Menu.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -395,11 +397,11 @@ class Menu extends UI5Element {
 	}
 
 	_prepareSubMenuDesktopTablet(item, opener, actionId) {
-		if (actionId !== this._subMenuOpenerId || item.hasChildren) {
+		if (actionId !== this._subMenuOpenerId || (item && item.hasChildren)) {
 			// close opened sub-menu if there is any opened
 			this._closeItemSubMenu(this._openedSubMenuItem, true);
 		}
-		if (item.hasChildren) {
+		if (item && item.hasChildren) {
 			// create new sub-menu
 			this._createSubMenu(item, actionId);
 			this._openItemSubMenu(item, opener, actionId);
@@ -432,7 +434,7 @@ class Menu extends UI5Element {
 			// respect mouseover only on desktop
 			const item = event.target.associatedItem;
 
-			if (item.hasChildren && item._subMenu) {
+			if (item && item.hasChildren && item._subMenu) {
 				// try to close the sub-menu
 				item._preventSubMenuClose = false;
 				this._closeItemSubMenu(item);

package/src/MenuItem.js

@@ -22,7 +22,7 @@ const metadata = {
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 <b>* Example:</b>
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -56,7 +56,19 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the any of the element siblings have children items.
+		 * Defines the accessible ARIA name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.7.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Indicates whether any of the element siblings have children items.
 		 * @type {boolean}
 		 * @private
 		 */
@@ -66,7 +78,7 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the any of the element siblings have icon.
+		 * Indicates whether any of the element siblings have icon.
 		 * @type {boolean}
 		 * @private
 		 */
@@ -125,10 +137,9 @@ const metadata = {
  * and each <code>ui5-menu-item</code> is represented by a list item (<code>ui5-li</code>) in that list. Therefore, you should only use
  * <code>ui5-menu-item</code> directly in your apps. The <code>ui5-li</code> list item is internal for the list, and not intended for public use.
  *
- * For the <code>ui5-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/MenuItem.js";</code>
+ * <code>import "@ui5/webcomponents/dist/MenuItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -155,6 +166,10 @@ class MenuItem extends UI5Element {
 	get subMenuOpened() {
 		return !!Object.keys(this._subMenu).length;
 	}
+
+	get ariaLabelledByText() {
+		return `${this.text} ${this.accessibleName}`.trim();
+	}
 }
 
 MenuItem.define();

package/src/MessageStrip.js

@@ -94,7 +94,7 @@ const metadata = {
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {sap.ui.webcomponents.main.IIcon}
 		 * @slot

package/src/MonthPicker.hbs

@@ -20,7 +20,14 @@
 					role="gridcell"
 					aria-selected="{{this.ariaSelected}}"
 				>
-					{{this.name}}
+					<span class="ui5-dp-monthtext">
+						{{this.name}}
+					</span>
+					{{#if this.nameInSecType}}
+						<span class="ui5-dp-monthtext ui5-dp-monthsectext">
+							{{this.nameInSecType}}
+						</span>
+					{{/if}}
 				</div>
 			{{/each}}
 

package/src/MonthPicker.js

@@ -1,4 +1,6 @@
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import {
 	isEnter,
@@ -19,12 +21,13 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import CalendarPart from "./CalendarPart.js";
 import MonthPickerTemplate from "./generated/templates/MonthPickerTemplate.lit.js";
 import styles from "./generated/themes/MonthPicker.css.js";
+
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-monthpicker",
-	properties: /** @lends  sap.ui.webcomponents.main.MonthPicker.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.MonthPicker.prototype */ {
 		/**
 		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
 		 * @type {Array}
@@ -46,7 +49,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.MonthPicker.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.MonthPicker.prototype */ {
 		/**
 		 * Fired when the user selects a month (space/enter/click).
 		 * @public
@@ -131,6 +134,7 @@ class MonthPicker extends CalendarPart {
 				selected: isSelected,
 				ariaSelected: isSelected ? "true" : "false",
 				name: monthsNames[i],
+				nameInSecType: this.secondaryCalendarType && this._getDisplayedSecondaryMonthText(timestamp).text,
 				disabled: isDisabled,
 				classes: "ui5-mp-item",
 			};
@@ -155,6 +159,11 @@ class MonthPicker extends CalendarPart {
 		this._months = months;
 	}
 
+	_getDisplayedSecondaryMonthText(timestamp) {
+		const monthsName = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp);
+		return convertMonthNumbersToMonthNames(monthsName.firstDate.getMonth(), monthsName.lastDate.getMonth(), this.secondaryCalendarType);
+	}
+
 	onAfterRendering() {
 		if (!this._hidden) {
 			this.focus();

package/src/MultiComboBox.hbs

@@ -3,7 +3,7 @@
 	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 
 	{{#if hasValueState}}
-		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
+		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 	{{/if}}
 
 	<ui5-tokenizer slot="_beginContent"