@openui5/sap.m 1.117.1 → 1.118.0

package/src/sap/m/ListBase.js

@@ -63,9 +63,6 @@ function(
 	// shortcut for sap.m.ListType
 	var ListItemType = library.ListType;
 
-	// shortcut for sap.m.ListKeyboardMode
-	var ListKeyboardMode = library.ListKeyboardMode;
-
 	// shortcut for sap.m.ListGrowingDirection
 	var ListGrowingDirection = library.ListGrowingDirection;
 
@@ -108,7 +105,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.118.0
 	 *
 	 * @constructor
 	 * @public
@@ -264,7 +261,7 @@ function(
 				 * Defines keyboard handling behavior of the control.
 				 * @since 1.38.0
 				 */
-				keyboardMode : {type : "sap.m.ListKeyboardMode", group : "Behavior", defaultValue : ListKeyboardMode.Navigation},
+				keyboardMode : {type : "sap.m.ListKeyboardMode", group : "Behavior", defaultValue : "Navigation" },
 
 				/**
 				 * Defines the section of the control that remains fixed at the top of the page during vertical scrolling as long as the control is in the viewport.
@@ -2024,12 +2021,14 @@ function(
 			sStates += oBundle.getText("LIST_REQUIRED") + " ";
 		}
 
-		if (sMode == mMode.MultiSelect) {
-			sStates += oBundle.getText("LIST_MULTISELECTABLE") + " . ";
-		} else if (sMode == mMode.Delete) {
+		if (sMode == mMode.Delete) {
 			sStates += oBundle.getText("LIST_DELETABLE") + " . ";
-		} else if (sMode != mMode.None) {
-			sStates += oBundle.getText("LIST_SELECTABLE") + " . ";
+		} else if (this.getAriaRole() == "list") {
+			if (sMode == mMode.MultiSelect) {
+				sStates += oBundle.getText("LIST_MULTISELECTABLE") + " . ";
+			} else if (sMode != mMode.None) {
+				sStates += oBundle.getText("LIST_SELECTABLE") + " . ";
+			}
 		}
 
 		if (this.isGrouped()) {
@@ -2047,11 +2046,10 @@ function(
 	};
 
 	ListBase.prototype.getAccessbilityPosition = function(oItem) {
-		var iSetSize = 0,
+		var iSetSize, iPosInSet,
 			aItems = this.getVisibleItems(),
 			sAriaRole = this.getAriaRole(),
-			// exclude group headers from item count for role="list" || role="listbox" only
-			bExcludeGroupHeaderFromCount = sAriaRole === "list" || sAriaRole === "listbox";
+			bExcludeGroupHeaderFromCount = (sAriaRole === "list" || sAriaRole === "listbox");
 
 		if (bExcludeGroupHeaderFromCount) {
 			aItems = aItems.filter(function(oItem) {
@@ -2059,13 +2057,14 @@ function(
 			});
 		}
 
-		var iPosInset = aItems.indexOf(oItem) + 1,
-			oBinding = this.getBinding("items");
+		if (oItem) {
+			iPosInSet = aItems.indexOf(oItem) + 1;
+		}
 
-		// use binding length if list is in scroll to load growing mode
-		if (this.getGrowing() && this.getGrowingScrollToLoad() && oBinding && oBinding.isLengthFinal()) {
+		var oBinding = this.getBinding("items");
+		if (oBinding && this.getGrowing() && this.getGrowingScrollToLoad()) {
 			iSetSize = oBinding.getLength();
-			if (oBinding.isGrouped() && !bExcludeGroupHeaderFromCount) {
+			if (!bExcludeGroupHeaderFromCount && oBinding.isGrouped()) {
 				iSetSize += aItems.filter(function(oItem) {
 					return oItem.isGroupHeader();
 				}).length;
@@ -2075,8 +2074,8 @@ function(
 		}
 
 		return {
-			setSize: iSetSize,
-			posInset: iPosInset
+			setsize: iSetSize,
+			posinset: iPosInSet
 		};
 	};
 
@@ -2099,11 +2098,11 @@ function(
 			// prepare the announcement for the screen reader
 			var oAccInfo = oItem.getAccessibilityInfo(),
 				oBundle = Library.getResourceBundleFor("sap.m"),
-				sDescription = oItem.isGroupHeader() ? "" : oAccInfo.type + " . ";
+				sDescription = oAccInfo.type ? oAccInfo.type + " . " : "";
 
 			if (this.isA("sap.m.Table")) {
 				var mPosition = this.getAccessbilityPosition(oItem);
-				sDescription += oBundle.getText("LIST_ITEM_POSITION", [mPosition.posInset, mPosition.setSize]) + " . ";
+				sDescription += oBundle.getText("LIST_ITEM_POSITION", [mPosition.posinset, mPosition.setsize]) + " . ";
 			}
 
 			sDescription += oAccInfo.description;
@@ -2144,13 +2143,12 @@ function(
 	ListBase.prototype._startItemNavigation = function(bIfNeeded) {
 
 		// item navigation only for desktop
-		if (!Device.system.desktop) {
+		var oDomRef = this.getDomRef();
+		if (!Device.system.desktop || !oDomRef) {
 			return;
 		}
 
 		// focus on root element should be prevented by showNoData=false and there a no items & destroy ItemNavigation
-		var oDomRef = this.getDomRef();
-
 		if (!this.getShowNoData() && !this.getVisibleItems().length && oDomRef) {
 			oDomRef.classList.add("sapMListPreventFocus");
 			this._destroyItemNavigation();
@@ -2161,22 +2159,11 @@ function(
 			oDomRef.classList.remove("sapMListPreventFocus");
 		}
 
-		var sKeyboardMode = this.getKeyboardMode(),
-			mKeyboardMode = ListKeyboardMode;
-
-		// ItemNavigation is not necessary if there is no item in edit mode
-		if (sKeyboardMode == mKeyboardMode.Edit && !this.getItems(true).length) {
-			return;
-		}
-
 		// if focus is not on the navigation items then only invalidate the item navigation
 		var oNavigationRoot = this.getNavigationRoot();
-		var iTabIndex = (sKeyboardMode == mKeyboardMode.Edit) ? -1 : 0;
 		if (bIfNeeded && oNavigationRoot && !oNavigationRoot.contains(document.activeElement)) {
 			this._bItemNavigationInvalidated = true;
-			if (!oNavigationRoot.getAttribute("tabindex")) {
-				oNavigationRoot.tabIndex = iTabIndex;
-			}
+			oNavigationRoot.tabIndex = "0";
 			return;
 		}
 
@@ -2186,8 +2173,9 @@ function(
 			this._oItemNavigation.setCycling(false);
 			this.addDelegate(this._oItemNavigation);
 
-			// set the tab index of active items
-			this._setItemNavigationTabIndex(iTabIndex);
+			// set the tab index of navigation root
+			this._oItemNavigation.setTabIndex0(0);
+			this._oItemNavigation.iActiveTabIndex = -1;
 
 			// explicitly setting table mode with one column
 			// to disable up/down reaction on events of the cell
@@ -2249,46 +2237,6 @@ function(
 		return this._oItemNavigation;
 	};
 
-	// sets the active elements tabindex of ItemNavigation
-	ListBase.prototype._setItemNavigationTabIndex = function(iTabIndex) {
-		if (this._oItemNavigation) {
-			this._oItemNavigation.iActiveTabIndex = iTabIndex;
-			this._oItemNavigation.iTabIndex = iTabIndex;
-		}
-	};
-
-	ListBase.prototype.setKeyboardMode = function(sKeyboardMode) {
-		this.setProperty("keyboardMode", sKeyboardMode, true);
-
-		if (this.isActive()) {
-			var iTabIndex = (sKeyboardMode == ListKeyboardMode.Edit) ? -1 : 0;
-			this.$("nodata").prop("tabIndex", ~iTabIndex);
-			this.$("listUl").prop("tabIndex", iTabIndex);
-			this.$("after").prop("tabIndex", iTabIndex);
-			this._setItemNavigationTabIndex(iTabIndex);
-		}
-
-		return this;
-	};
-
-	/*
-	 * Makes the given ListItem(row) focusable via ItemNavigation
-	 *
-	 * @since 1.26
-	 * @protected
-	 */
-	ListBase.prototype.setItemFocusable = function(oListItem) {
-		if (!this._oItemNavigation) {
-			return;
-		}
-
-		var aItemDomRefs = this._oItemNavigation.getItemDomRefs();
-		var iIndex = aItemDomRefs.indexOf(oListItem.getDomRef());
-		if (iIndex >= 0) {
-			this._oItemNavigation.setFocusedIndex(iIndex);
-		}
-	};
-
 	/*
 	 * Forward tab before or after List
 	 * This function should be called before tab key is pressed
@@ -2303,33 +2251,19 @@ function(
 		this.$(bForward ? "after" : "before").trigger("focus");
 	};
 
-	// move focus out of the table for nodata row
-	ListBase.prototype.onsaptabnext = function(oEvent) {
-		if (oEvent.isMarked() || this.getKeyboardMode() == ListKeyboardMode.Edit) {
+	// move focus out of the list
+	ListBase.prototype.onsaptabnext = ListBase.prototype.onsaptabprevious = function(oEvent) {
+		if (oEvent.isMarked() || oEvent.target.id == this.getId("trigger")) {
 			return;
 		}
 
-		if (jQuery(this.getDomRef("nodata")).find(":sapTabbable").addBack().get(-1) == oEvent.target) {
-			this.forwardTab(true);
+		if (oEvent.target.matches(".sapMLIBFocusable,.sapMTblCellFocusable") ||
+			oEvent.target === jQuery(this.getNavigationRoot()).find(":sapTabbable").get(oEvent.type == "saptabnext" ? -1 : 0)) {
+			this.forwardTab(oEvent.type == "saptabnext");
 			oEvent.setMarked();
 		}
 	};
 
-	// move focus out of the table for nodata row
-	ListBase.prototype.onsaptabprevious = function(oEvent) {
-		if (oEvent.isMarked() || this.getKeyboardMode() == ListKeyboardMode.Edit) {
-			return;
-		}
-
-		var sTargetId = oEvent.target.id;
-		if (sTargetId == this.getId("nodata")) {
-			this.forwardTab(false);
-		} else if (sTargetId == this.getId("trigger")) {
-			this.focusPrevious();
-			oEvent.preventDefault();
-		}
-	};
-
 	// navigate to previous or next section according to current focus position
 	ListBase.prototype._navToSection = function(bForward) {
 		var $TargetSection;
@@ -2410,35 +2344,71 @@ function(
 		}
 	};
 
-	// Ctrl + A to switch select all/none
 	ListBase.prototype.onkeydown = function(oEvent) {
-		var bCtrlA = (oEvent.which == KeyCodes.A) && (oEvent.metaKey || oEvent.ctrlKey);
+		if (oEvent.isMarked()) {
+			return;
+		}
 
-		if (oEvent.isMarked() || !bCtrlA || !jQuery(oEvent.target).hasClass(this.sNavItemClass) ) {
+		var $Target = jQuery(oEvent.target);
+		var $FocusableItem = $Target.closest(".sapMLIBFocusable").next(".sapMListTblSubRow").addBack();
+		if (!$FocusableItem[0]) {
+			$FocusableItem = $Target.closest(".sapMListTblSubRow").prev(".sapMLIBFocusable").addBack();
+		}
+		if (!$FocusableItem[0]) {
 			return;
 		}
-		var sMultiSelectMode = this.getMultiSelectMode();
-		var bCtrlShiftA = bCtrlA && oEvent.shiftKey && sMultiSelectMode == MultiSelectMode.ClearAll;
-		if (bCtrlShiftA) {
+
+		var bItemEvent = $Target.hasClass("sapMLIBFocusable");
+		var preventDefault = function() {
 			oEvent.preventDefault();
 			oEvent.setMarked();
-			this.removeSelections(false, true);
-			return;
+		};
+
+		// Ctrl + (Shift) + A: select/deselect all
+		if (oEvent.code == "KeyA" && (oEvent.metaKey || oEvent.ctrlKey) && bItemEvent && this.getMode() == ListMode.MultiSelect) {
+			var bClearAll = (this.getMultiSelectMode() == MultiSelectMode.ClearAll);
+			if (oEvent.shiftKey) {
+				if (bClearAll) {
+					this.removeSelections(false, true);
+				}
+			} else if (!bClearAll) {
+				if (this.isAllSelectableSelected()) {
+					this.removeSelections(false, true);
+				} else {
+					this.selectAll(true);
+				}
+			}
+			return preventDefault();
 		}
 
-		oEvent.preventDefault();
+		// Enter / F2: focus from container to the content
+		if ((oEvent.code == "Enter" || oEvent.code == "F2") && $Target.hasClass("sapMTblCellFocusable")) {
+			$Target.find(":sapTabbable").first().trigger("focus");
+			return preventDefault();
+		}
 
-		if (this.getMode() !== ListMode.MultiSelect || sMultiSelectMode ===  MultiSelectMode.ClearAll) {
-			return;
+		// F2 / F7: focus from item to the first interactive element
+		if ((oEvent.code == "F2" && bItemEvent) || (oEvent.code == "F7" && bItemEvent && this._iFocusIndexOfItem == undefined)) {
+			$FocusableItem.find(":sapTabbable").first().trigger("focus");
+			return preventDefault();
 		}
 
-		if (this.isAllSelectableSelected()) {
-			this.removeSelections(false, true);
-		} else {
-			this.selectAll(true);
+		// F2: focus from editable content to the container
+		if (oEvent.code == "F2" && !bItemEvent) {
+			jQuery($Target.closest(".sapMTblCellFocusable")[0] || $FocusableItem[0]).trigger("focus");
+			return preventDefault();
 		}
 
-		oEvent.setMarked();
+		// F7: switch focus between content and item
+		if (oEvent.code == "F7") {
+			if (bItemEvent) {
+				$FocusableItem.find(":sapFocusable").eq(this._iFocusIndexOfItem).trigger("focus");
+			} else {
+				this._iFocusIndexOfItem = $FocusableItem.find(":sapFocusable").index($Target);
+				$FocusableItem.eq(0).trigger("focus");
+			}
+			return preventDefault();
+		}
 	};
 
 	ListBase.prototype.onmousedown = function(oEvent) {
@@ -2459,19 +2429,18 @@ function(
 			return;
 		}
 
-		// get the last focused element from the ItemNavigation
+		// get the last focused element from the ItemNavigation and focus
 		var aNavigationDomRefs = this._oItemNavigation.getItemDomRefs();
 		var iLastFocusedIndex = this._oItemNavigation.getFocusedIndex();
 		var $LastFocused = jQuery(aNavigationDomRefs[iLastFocusedIndex]);
 
-		// find related item control to get tabbables
-		var oRelatedControl = Element.closestTo($LastFocused[0]) || {};
-		var $Tabbables = oRelatedControl.getTabbables ? oRelatedControl.getTabbables() : $LastFocused.find(":sapTabbable");
-
-		// get the last tabbable item or itself and focus
-		var $FocusElement = $Tabbables.eq(-1).add($LastFocused).eq(-1);
 		this.bAnnounceDetails = true;
-		$FocusElement.trigger("focus");
+		if (this.getKeyboardMode() == "Edit") {
+			var $Tabbable = $LastFocused.find(":sapTabbable").first();
+			$Tabbable[0] ? $Tabbable.trigger("focus") : $LastFocused.trigger("focus");
+		} else {
+			$LastFocused.trigger("focus");
+		}
 	};
 
 	// Handles focus to reposition the focus to correct place
@@ -2497,12 +2466,25 @@ function(
 				sDescription = ListItemBase.getAccessibilityText(vNoData);
 			}
 			this.updateInvisibleText(sDescription, oTarget);
+		} else if (oTarget.id == this.getId("listUl") && this.getKeyboardMode() == "Edit") {
+			this.focusPrevious();
+			oEvent.stopImmediatePropagation(true);
+			return;
+		}
+
+		// update the focused index of item navigation when inner elements are focused
+		if (this._oItemNavigation && !oTarget.matches(".sapMLIBFocusable,.sapMTblCellFocusable")) {
+			var oFocusableItem = oTarget.closest(".sapMLIBFocusable,.sapMTblCellFocusable");
+			if (oFocusableItem) {
+				var iFocusableIndex = this._oItemNavigation.getItemDomRefs().indexOf(oFocusableItem);
+				if (iFocusableIndex >= 0) {
+					this._oItemNavigation.iFocusedIndex = (this.getKeyboardMode() == "Edit") ? iFocusableIndex : iFocusableIndex - iFocusableIndex % this._oItemNavigation.iColumns;
+				}
+			}
 		}
 
 		// handle only for backward navigation
-		if (oEvent.isMarked() || !this._oItemNavigation ||
-			this.getKeyboardMode() == ListKeyboardMode.Edit ||
-			oTarget.id != this.getId("after")) {
+		if (oEvent.isMarked() || !this._oItemNavigation || oTarget.id != this.getId("after")) {
 			return;
 		}
 
@@ -2520,7 +2502,7 @@ function(
 
 	// this gets called when items up arrow key is pressed for the edit keyboard mode
 	ListBase.prototype.onItemArrowUpDown = function(oListItem, oEvent) {
-		if (this.getKeyboardMode() !== ListKeyboardMode.Edit || oEvent.target instanceof HTMLTextAreaElement) {
+		if (oEvent.target instanceof HTMLTextAreaElement) {
 			return;
 		}
 
@@ -2947,27 +2929,6 @@ function(
 		return "list";
 	};
 
-	/**
-	 * This method is a hook for the RenderManager that gets called
-	 * during the rendering of child Controls. It allows to add,
-	 * remove and update existing accessibility attributes (ARIA) of
-	 * those controls.
-	 *
-	 * @param {sap.ui.core.Control} oElement - The Control that gets rendered by the RenderManager
-	 * @param {object} mAriaProps - The mapping of "aria-" prefixed attributes
-	 * @protected
-	 */
-	ListBase.prototype.enhanceAccessibilityState = function(oElement, mAriaProps) {
-		if (!oElement.isA("sap.m.ListItemBase") || oElement.isGroupHeader()) {
-			return;
-		}
-
-		// add aria-posinset & aria-setsize attributes to listitem DOM (not for group headers)
-		var mPosition = this.getAccessbilityPosition(oElement);
-		mAriaProps.posinset = mPosition.posInset;
-		mAriaProps.setsize = mPosition.setSize;
-	};
-
 	return ListBase;
 
 });

package/src/sap/m/ListBaseRenderer.js

@@ -11,9 +11,6 @@ sap.ui.define(["sap/m/library", "sap/ui/core/library", "sap/ui/Device", "sap/ui/
 	// shortcut for sap.m.ListGrowingDirection
 	var ListGrowingDirection = library.ListGrowingDirection;
 
-	// shortcut for sap.m.ListKeyboardMode
-	var ListKeyboardMode = library.ListKeyboardMode;
-
 	// shortcut for sap.m.ToolbarDesign
 	var ToolbarDesign = library.ToolbarDesign;
 
@@ -129,7 +126,6 @@ sap.ui.define(["sap/m/library", "sap/ui/core/library", "sap/ui/Device", "sap/ui/
 		var aItems = oControl.getItems(),
 			bShowNoData = oControl.getShowNoData(),
 			bRenderItems = oControl.shouldRenderItems() && aItems.length,
-			iTabIndex = oControl.getKeyboardMode() == ListKeyboardMode.Edit ? -1 : 0,
 			bUpwardGrowing = oControl.getGrowingDirection() == ListGrowingDirection.Upwards && oControl.getGrowing();
 
 		// render top growing
@@ -138,7 +134,7 @@ sap.ui.define(["sap/m/library", "sap/ui/core/library", "sap/ui/Device", "sap/ui/
 		}
 
 		// dummy keyboard handling area
-		this.renderDummyArea(rm, oControl, "before", -1);
+		this.renderDummyArea(rm, oControl, "before", "-1");
 
 		// run hook method to start building list
 		this.renderListStartAttributes(rm, oControl);
@@ -150,7 +146,7 @@ sap.ui.define(["sap/m/library", "sap/ui/core/library", "sap/ui/Device", "sap/ui/
 		}
 
 		if (bRenderItems || bShowNoData) {
-			rm.attr("tabindex", iTabIndex);
+			rm.attr("tabindex", "0");
 		}
 
 		// separators
@@ -193,7 +189,7 @@ sap.ui.define(["sap/m/library", "sap/ui/core/library", "sap/ui/Device", "sap/ui/
 		this.renderListEndAttributes(rm, oControl);
 
 		// dummy keyboard handling area
-		this.renderDummyArea(rm, oControl, "after", iTabIndex);
+		this.renderDummyArea(rm, oControl, "after", "0");
 
 		// render bottom growing
 		if (!bUpwardGrowing) {
@@ -297,7 +293,7 @@ sap.ui.define(["sap/m/library", "sap/ui/core/library", "sap/ui/Device", "sap/ui/
 		var sRole = oControl.getAriaRole();
 		return {
 			role : sRole,
-			multiselectable : (sRole === "listbox" && oControl._bSelectionMode) ? oControl.getMode() == "MultiSelect" : undefined,
+			multiselectable : (sRole != "list" && oControl._bSelectionMode) ? oControl.getMode() == "MultiSelect" : undefined,
 			labelledby : {
 				value : this.getAriaLabelledBy(oControl),
 				append : true
@@ -327,7 +323,7 @@ sap.ui.define(["sap/m/library", "sap/ui/core/library", "sap/ui/Device", "sap/ui/
 	 */
 	ListBaseRenderer.renderNoData = function(rm, oControl) {
 		rm.openStart("li", oControl.getId("nodata"));
-		rm.attr("tabindex", oControl.getKeyboardMode() == ListKeyboardMode.Navigation ? -1 : 0);
+		rm.attr("tabindex", "-1");
 		var sAriaRole = this.getNoDataAriaRole(oControl);
 		if (sAriaRole) {
 			rm.attr("role", sAriaRole);