@openui5/sap.f 1.133.0 → 1.134.0

package/src/sap/f/GridContainer.js

@@ -15,7 +15,6 @@ sap.ui.define([
 	"sap/base/strings/capitalize",
 	"sap/ui/core/Lib",
 	"sap/ui/core/RenderManager",
-	'sap/ui/core/delegate/ItemNavigation',
 	"sap/ui/base/ManagedObjectObserver",
 	"sap/ui/core/Control",
 	"sap/ui/core/Element",
@@ -37,7 +36,6 @@ sap.ui.define([
 	capitalize,
 	Library,
 	RenderManager,
-	ItemNavigation,
 	ManagedObjectObserver,
 	Control,
 	Element,
@@ -50,21 +48,6 @@ sap.ui.define([
 ) {
 	"use strict";
 
-	/**
-	 * For these controls check if the grid item visual focus can be displayed from the control inside.
-	 */
-	var mOwnVisualFocusControls = {
-		"sap.f.Card": function (oCard) {
-			return oCard.getCardHeader() || oCard.getCardContent();
-		},
-		"sap.ui.integration.widgets.Card": function (oCard) {
-			return oCard.getCardHeader() || oCard.getCardContent();
-		},
-		"sap.m.GenericTile": function () {
-			return true;
-		}
-	};
-
 	/**
 	 * Gets the column-span property from the item's layout data.
 	 * @private
@@ -116,6 +99,9 @@ sap.ui.define([
 	 *
 	 * All rows have the same height and all columns have the same width. Their sizes can be configured with the use of the <code>layout</code> aggregation and <code>{@link sap.f.GridContainerSettings}</code>.
 	 *
+	 * **Note:** To ensure better keyboard and accessibility support,
+	 * child items should implement <code>sap.f.IGridContainerItem</code> interface.
+	 *
 	 * <h3>Usage</h3>
 	 *
 	 * <i>When to use</i>
@@ -177,7 +163,7 @@ sap.ui.define([
 	 * @see {@link sap.f.dnd.GridDropInfo}
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @extends sap.ui.core.Control
 	 *
@@ -398,6 +384,10 @@ sap.ui.define([
 		}
 
 		oContainer._reflectItemVisibilityToWrapper(this);
+
+		if (this.isA("sap.f.IGridContainerItem")) {
+			this.setGridItemRole("listitem");
+		}
 	};
 
 	/**
@@ -407,8 +397,6 @@ sap.ui.define([
 	GridContainer.prototype._onAfterItemRendering = function () {
 		var oContainer = this.getParent();
 
-		oContainer._checkOwnVisualFocus(this);
-
 		oContainer._resizeListeners[this.getId()] = ResizeHandler.register(this, oContainer._resizeItemHandler);
 
 		oContainer._setItemNavigationItems();
@@ -416,28 +404,6 @@ sap.ui.define([
 		oContainer._applyItemAutoRows(this);
 	};
 
-	GridContainer.prototype._onItemWrapperFocusIn = function (oEvent) {
-		var oFocusedDomRef = this._oItemNavigation.getFocusedDomRef(),
-			oControl,
-			sAccText;
-
-		if (!oFocusedDomRef || !oFocusedDomRef.firstChild) {
-			return;
-		}
-
-		oControl = Element.closestTo(oFocusedDomRef.firstChild);
-
-		if (!oControl || !oControl.getAriaRoleDescription) {
-			return;
-		}
-
-		// announce the aria role description text, if any
-		sAccText = oControl.getAriaRoleDescription();
-		if (sAccText) {
-			InvisibleMessage.getInstance().announce(sAccText);
-		}
-	};
-
 	/**
 	 * Reflects "visible" behavior of the control to the wrapper element - sapFGridContainerItemWrapper.
 	 *
@@ -445,7 +411,6 @@ sap.ui.define([
 	 * @param {sap.ui.core.Control} oItem The control of which we will check "visible" property.
 	 */
 	GridContainer.prototype._reflectItemVisibilityToWrapper = function (oItem) {
-
 		var oItemWrapper = GridContainerUtils.getItemWrapper(oItem),
 			$oItemWrapper;
 
@@ -504,32 +469,28 @@ sap.ui.define([
 		if (!this._isRenderingFinished) {
 			return;
 		}
-		var that = this,
-			aWrapperItemsDomRef = [];
+		var aItemsDomRef = [];
 
 		//Initialize the ItemNavigation
-		if (!that._oItemNavigation) {
-			that._oItemNavigation = new GridContainerItemNavigation()
+		if (!this._oItemNavigation) {
+			this._oItemNavigation = new GridContainerItemNavigation()
 				.setCycling(false)
 				.setDisabledModifiers({
 					sapnext : ["alt", "meta", "ctrl"],
 					sapprevious : ["alt", "meta", "ctrl"]
 				})
 				.setTableMode(true, true)
-				.setFocusedIndex(0)
-				.attachEvent(ItemNavigation.Events.AfterFocus, this._onItemWrapperFocusIn.bind(this));
+				.setFocusedIndex(0);
 
-			that.addDelegate(this._oItemNavigation);
+			this.addDelegate(this._oItemNavigation);
 		}
 
-		that.$("listUl").children().map(function (iIndex, oWrapperItem) {
-			if (oWrapperItem.getAttribute("class").indexOf("sapFGridContainerItemWrapper") > -1) {
-				aWrapperItemsDomRef.push(oWrapperItem);
-			}
+		this.getItems().map((oItem) => {
+			aItemsDomRef.push(GridContainerUtils.getItemFocusDomRef(oItem));
 		});
 
-		that._oItemNavigation.setRootDomRef(that.getDomRef());
-		that._oItemNavigation.setItemDomRefs(aWrapperItemsDomRef);
+		this._oItemNavigation.setRootDomRef(this.getDomRef());
+		this._oItemNavigation.setItemDomRefs(aItemsDomRef);
 	};
 
 	/**
@@ -955,8 +916,15 @@ sap.ui.define([
 			mStyles = mStylesInfo.styles,
 			aClasses = mStylesInfo.classes,
 			oWrapper = document.createElement("div");
-			oWrapper.setAttribute("id", GridContainerRenderer.generateWrapperId(oItem, this));
+
+		oWrapper.setAttribute("id", GridContainerRenderer.generateWrapperId(oItem, this));
+
+		if (!oItem.isA("sap.f.IGridContainerItem")) {
 			oWrapper.setAttribute("tabindex", "0");
+			oWrapper.classList.add("sapFGCFocusable");
+		} else {
+			oItem.setGridItemRole("listitem");
+		}
 
 		mStyles.forEach(function (sValue, sKey) {
 			oWrapper.style.setProperty(sKey, sValue);
@@ -979,53 +947,8 @@ sap.ui.define([
 		this.fireEvent("borderReached", mParameters);
 	};
 
-	/**
-	 * Keyboard handling of [keydown], [keyup], [enter], [space] keys
-	 * Stops propagation to avoid triggering the listeners for the same keys of the parent control (the AnchorBar)
-	 */
-	["onkeypress", "onkeyup", "onkeydown", "onsapenter", "onsapselect", "onsapspace"].forEach(function (sName) {
-		GridContainer.prototype[sName] = function (oEvent) {
-			if (!this._isItemWrapper(oEvent.target)) {
-				return;
-			}
-
-			if (sName === "onsapspace") {
-				// prevent page scrolling
-				oEvent.preventDefault();
-			}
-
-			var oItem = Element.closestTo(oEvent.target.firstChild);
-
-			if (oItem) {
-				var oFocusDomRef = oItem.getFocusDomRef(),
-				oFocusControl = Element.closestTo(oFocusDomRef);
-
-				if (oFocusControl && oFocusControl[sName]) {
-					oFocusControl[sName].call(oFocusControl, oEvent);
-				}
-			}
-		};
-	});
-
-	/**
-	 * Checks if the control will display the grid item visual focus.
-	 * @param {sap.ui.core.Control} oControl The control
-	 * @private
-	 */
-	GridContainer.prototype._checkOwnVisualFocus = function (oControl) {
-		var sName = oControl.getMetadata().getName(),
-			oFocusDomRef;
-
-		if (mOwnVisualFocusControls[sName] && mOwnVisualFocusControls[sName](oControl)) {
-			oFocusDomRef = oControl.getFocusDomRef();
-
-			// remove the focus DOM ref from the tab chain
-			if (oFocusDomRef.getAttribute("tabindex") === "0") {
-				oFocusDomRef.setAttribute("tabindex", -1);
-				oFocusDomRef.tabIndex = -1;
-			}
-			GridContainerUtils.getItemWrapper(oControl).classList.add("sapFGridContainerItemWrapperNoVisualFocus");
-		}
+	GridContainer.prototype._isListItem = function (oControl) {
+		return oControl.isA("sap.f.IGridContainerItem");
 	};
 
 	/**
@@ -1038,11 +961,14 @@ sap.ui.define([
 			return;
 		}
 
-		if (!this._isItemWrapper(oEvent.target)) {
+		const oSource = oEvent.srcControl;
+		const bIsGridContainerItem = oSource?.isA("sap.f.IGridContainerItem");
+
+		if (!bIsGridContainerItem && !oEvent.target.classList.contains("sapFGridContainerItemWrapper")) {
 			return;
 		}
 
-		var oItem = Element.closestTo(oEvent.target.firstElementChild),
+		var oItem = bIsGridContainerItem ? oSource : Element.closestTo(oEvent.target.firstElementChild),
 			iLength = this.getItems().length,
 			iItemIndex = this.indexOfItem(oItem),
 			iInsertAt = -1,
@@ -1169,14 +1095,38 @@ sap.ui.define([
 		return GridNavigationMatrix.create(this.getDomRef("listUl"), aItemsDomRefs);
 	};
 
-	GridContainer.prototype._isItemWrapper = function (oElement) {
-		return oElement.classList.contains("sapFGridContainerItemWrapper");
-	};
-
 	GridContainer.prototype._handleThemeApplied = function () {
 		this._bThemeApplied = true;
 		Theming.detachApplied(this._handleThemeAppliedBound);
 	};
 
+	/**
+	 * Keyboard handling of [keydown], [keyup], [enter], [space] keys
+	 * Stops propagation to avoid triggering the listeners for the same keys of the parent control (the AnchorBar)
+	 */
+	["onkeypress", "onkeyup", "onkeydown", "onsapenter", "onsapselect", "onsapspace"].forEach(function (sName) {
+		GridContainer.prototype[sName] = function (oEvent) {
+			if (!oEvent.target?.classList.contains("sapFGCFocusable")) {
+				return;
+			}
+
+			if (sName === "onsapspace") {
+				// prevent page scrolling
+				oEvent.preventDefault();
+			}
+
+			var oItem = Element.closestTo(oEvent.target.firstChild);
+
+			if (oItem) {
+				var oFocusDomRef = oItem.getFocusDomRef(),
+					oFocusControl = Element.closestTo(oFocusDomRef);
+
+				if (oFocusControl && oFocusControl[sName]) {
+					oFocusControl[sName].call(oFocusControl, oEvent);
+				}
+			}
+		};
+	});
+
 	return GridContainer;
 });

package/src/sap/f/GridContainerItemLayoutData.js

@@ -21,7 +21,7 @@ sap.ui.define(['sap/ui/core/LayoutData'],
 		 * @see {@link topic:32d4b9c2b981425dbc374d3e9d5d0c2e Grid Controls}
 		 *
 		 * @author SAP SE
-		 * @version 1.133.0
+		 * @version 1.134.0
 		 *
 		 * @extends sap.ui.core.LayoutData
 		 *

package/src/sap/f/GridContainerRenderer.js

@@ -100,6 +100,7 @@ sap.ui.define([], function () {
 		var mStylesInfo = this.getStylesForItemWrapper(oItem, oControl),
 			mStyles = mStylesInfo.styles,
 			aClasses = mStylesInfo.classes,
+			bIsListItem = oControl._isListItem(oItem),
 			mAccState = {
 				role: "listitem"
 			};
@@ -108,9 +109,13 @@ sap.ui.define([], function () {
 			mAccState.roledescription = oItem.getAriaRoleDescription();
 		}
 
-		oRM.openStart("div", this.generateWrapperId(oItem, oControl))
-			.attr("tabindex", "0")
-			.accessibilityState(oControl, mAccState);
+		oRM.openStart("div", this.generateWrapperId(oItem, oControl));
+
+		if (!bIsListItem) {
+			oRM.attr("tabindex", "0")
+				.class("sapFGCFocusable")
+				.accessibilityState(oControl, mAccState);
+		}
 
 		mStyles.forEach(function (sValue, sKey) {
 			oRM.style(sKey, sValue);

package/src/sap/f/GridContainerSettings.js

@@ -58,14 +58,14 @@ sap.ui.define([
 	 * Can be used to define the sizes of columns and rows for different screen sizes, by using the <code>layout</code> aggregations of <code>sap.f.GridContainer</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @see {@link topic:32d4b9c2b981425dbc374d3e9d5d0c2e Grid Controls}
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @since 1.65
 	 * @public

package/src/sap/f/GridContainerUtils.js

@@ -43,6 +43,14 @@ sap.ui.define([
 			return null;
 		},
 
+		getItemFocusDomRef: function (oItem) {
+			if (oItem.isA("sap.f.IGridContainerItem")) {
+				return oItem.getFocusDomRef();
+			}
+
+			return this.getItemWrapper(oItem);
+		},
+
 		createConfig: function (oGrid, oItem) {
 			return {
 				grid: oGrid,

package/src/sap/f/GridList.js

@@ -93,7 +93,7 @@ sap.ui.define([
 	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout MDN web docs: CSS Grid Layout}
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @extends sap.m.ListBase
 	 * @implements sap.ui.layout.cssgrid.IGridConfigurable

package/src/sap/f/GridListItem.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @since 1.70
 	 * @constructor

package/src/sap/f/IllustratedMessage.js

@@ -56,7 +56,7 @@ sap.ui.define([
 	 * @extends sap.m.IllustratedMessage
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/Illustration.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.m.Illustration
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/PlanningCalendarInCardLegend.js

@@ -22,7 +22,7 @@ sap.ui.define(['sap/m/PlanningCalendarLegend', "sap/ui/core/Lib", 'sap/ui/unifie
 		 * @extends sap.m.PlanningCalendarLegend
 		 *
 		 * @author SAP SE
-		 * @version 1.133.0
+		 * @version 1.134.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/f/ProductSwitch.js

@@ -34,7 +34,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.133.0
+		 * @version 1.134.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/f/ProductSwitchItem.js

@@ -40,7 +40,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.133.0
+		 * @version 1.134.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/f/SearchManager.js

@@ -23,7 +23,7 @@ sap.ui.define(['sap/ui/core/Element', 'sap/ui/base/ManagedObjectObserver', './sh
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.133.0
+		 * @version 1.134.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/f/ShellBar.js

@@ -58,7 +58,7 @@ function(
 	 * @implements sap.f.IShellBar, sap.m.IBar, sap.tnt.IToolHeader
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/ShellBarRenderer.js

@@ -39,6 +39,7 @@ function() {
 					.class("sapFShellBarTitleHidden")
 					.attr("role", "heading")
 					.attr("aria-level", "1")
+					.attr("aria-hidden", "true")
 					.openEnd();
 
 				oRm.text(sTitle).close("div");

package/src/sap/f/SidePanel.js

@@ -151,7 +151,7 @@ sap.ui.define([
  	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/SidePanelItem.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Item
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/cards/BaseHeader.js

@@ -53,7 +53,7 @@ sap.ui.define([
 	 * @abstract
 	 *
 	 * @author SAP SE
-	 * @version 1.133.0
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public
@@ -187,7 +187,8 @@ sap.ui.define([
 
 		this._oToolbarDelegate = {
 			onfocusin: this._onToolbarFocusin,
-			onfocusout: this._onToolbarFocusout
+			onfocusout: this._onToolbarFocusout,
+			onAfterRendering: this._addMarginToHeaderText
 		};
 	};
 
@@ -227,6 +228,8 @@ sap.ui.define([
 			oToolbar.addEventDelegate(this._oToolbarDelegate, this);
 		}
 
+		this._addMarginToHeaderText();
+
 		this.getBannerLines()?.forEach((oText) => {
 			this._enhanceText(oText);
 		});
@@ -283,7 +286,7 @@ sap.ui.define([
 	};
 
 	BaseHeader.prototype._handleTap = function (oEvent) {
-		if (!this.isInteractive() || this._isInsideToolbar(oEvent.target)) {
+		if (!oEvent.target.closest(".sapFCardSectionClickable") || !this.isInteractive() || this._isInsideToolbar(oEvent.target)) {
 			return;
 		}
 
@@ -312,6 +315,23 @@ sap.ui.define([
 		this.removeStyleClass("sapFCardHeaderToolbarFocused");
 	};
 
+	/**
+	 * Adds margin to the header text, which ensures the text will be visible under the toolbar.
+	 * @private
+	 */
+	BaseHeader.prototype._addMarginToHeaderText = function () {
+		const oToolbar = this.getToolbar();
+		const oHeaderText = this.getDomRef().getElementsByClassName("sapFCardHeaderText")[0];
+
+		if (oHeaderText && oToolbar) {
+			if (oToolbar.getVisible()) {
+				oHeaderText.style.marginInlineEnd = oToolbar.getDomRef().offsetWidth + "px";
+			} else {
+				oHeaderText.style.marginInlineEnd = 0;
+			}
+		}
+	};
+
 	/*
 	 * @override
 	 */
@@ -480,27 +500,21 @@ sap.ui.define([
 		}).join(" ");
 	};
 
-	/**
-	 * Returns if the control is inside a sap.f.GridContainer
-	 *
-	 * @private
-	 */
-	BaseHeader.prototype._isInsideGridContainer = function() {
-		var oParent = this.getParent();
-		if (!oParent) {
-			return false;
-		}
+	BaseHeader.prototype.isInteractive = function() {
+		return this.hasListeners("press");
+	};
 
-		oParent = oParent.getParent();
-		if (!oParent) {
+	BaseHeader.prototype.isFocusable = function() {
+		if (!this.getProperty("focusable")) {
 			return false;
 		}
 
-		return oParent.isA("sap.f.GridContainer");
-	};
+		const oParent = this.getParent();
+		if (oParent && oParent.isA("sap.f.CardBase") && oParent.isRoleListItem()) {
+			return this.isInteractive();
+		}
 
-	BaseHeader.prototype.isInteractive = function() {
-		return this.hasListeners("press");
+		return true;
 	};
 
 	BaseHeader.prototype._isInsideToolbar = function(oElement) {
@@ -510,7 +524,8 @@ sap.ui.define([
 	};
 
 	/**
-	 * When the option <code>useTooltips</code> is set to <code>true</code> - enhances the given text with a tooltip if the text is truncated.
+	 * When the option <code>useTooltips</code> is set to <code>true</code>,
+	 * a tooltip is added to the text in case it gets truncated.
 	 * @private
 	 * @param {sap.m.Text} oText The text control.
 	 */