@openui5/sap.m 1.107.1 → 1.108.1

package/src/sap/m/DraftIndicator.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @abstract
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/DynamicDate.js

@@ -36,7 +36,7 @@ sap.ui.define([
 		 * @extends sap.ui.model.SimpleType
 		 *
 		 * @author SAP SE
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/DynamicDateOption.js

@@ -38,7 +38,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @public
 		 * @since 1.92

package/src/sap/m/DynamicDateRange.js

@@ -123,7 +123,7 @@ sap.ui.define([
 		 * is opened. The dialog is closed via a date time period value selection or by pressing the "Cancel" button.
 		 *
 		 * @author SAP SE
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @constructor
 		 * @public
@@ -355,7 +355,8 @@ sap.ui.define([
 				}
 			};
 
-			this._oInput._getValueHelpIcon().setTooltip(oResourceBundle.getText("INPUT_VALUEHELP_BUTTON"));
+			this._oInput._getValueHelpIcon().setDecorative(false);
+			this._oInput._getValueHelpIcon().resetProperty("alt");
 			this._oInput.addDelegate(this._onBeforeInputRenderingDelegate, this);
 
 			this.setAggregation("_input", this._oInput, false);

package/src/sap/m/DynamicDateValueHelpUIType.js

@@ -20,7 +20,7 @@ sap.ui.define(['sap/ui/core/Element'],
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @public
 		 * @since 1.92

package/src/sap/m/ExpandableText.js

@@ -10,6 +10,7 @@ sap.ui.define([
 	'sap/ui/core/Core',
 	'sap/ui/core/Control',
 	'sap/ui/core/library',
+	'sap/ui/core/InvisibleText',
 	'sap/ui/Device',
 	'sap/ui/base/ManagedObject',
 	'sap/m/Link',
@@ -23,6 +24,7 @@ function(library,
 		 Core,
 		 Control,
 		 coreLibrary,
+		 InvisibleText,
 		 Device,
 		 ManagedObject,
 		 Link,
@@ -61,6 +63,9 @@ function(library,
 	// shortcut for sap.m.EmptyIndicator
 	var EmptyIndicatorMode = library.EmptyIndicatorMode;
 
+	// shortcut for sap.m.LinkAccessibleRole
+	var LinkAccessibleRole = library.LinkAccessibleRole;
+
 	function reduceWhitespace(sText) {
 		return sText.replace(/ {2,}/g, ' ').replace(/\t{2,}/g, ' ');
 	}
@@ -100,7 +105,7 @@ function(library,
 	 * @implements sap.ui.core.IFormContent, sap.m.IHyphenation
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public
@@ -171,7 +176,12 @@ function(library,
 				 * The "More" link.
 				 * @private
 				 */
-				_showMoreLink: {type: 'sap.m.Link', multiple: false, visibility: "hidden"}
+				_showMoreLink: {type: 'sap.m.Link', multiple: false, visibility: "hidden"},
+
+				/**
+				 * Screen Reader ariaLabelledBy
+				 */
+				_ariaLabelledBy: {type: "sap.ui.core.InvisibleText", multiple: false, visibility: "hidden"}
 			},
 
 			designtime: "sap/m/designtime/ExpandableText.designtime"
@@ -180,6 +190,14 @@ function(library,
 		renderer: ExpandableTextRenderer
 	});
 
+	ExpandableText.prototype.init = function () {
+		this.setAggregation("_ariaLabelledBy", new InvisibleText());
+	};
+
+	ExpandableText.prototype.onBeforeRendering = function() {
+		this._updateAriaLabelledByText();
+	};
+
 	/**
 	 * Gets the text.
 	 *
@@ -266,7 +284,9 @@ function(library,
 
 		if (!showMoreLink) {
 			showMoreLink = new Link(this.getId() + '-showMoreLink', {
+				accessibleRole: LinkAccessibleRole.Button,
 				text: this.getProperty("expanded") ? TEXT_SHOW_LESS : TEXT_SHOW_MORE,
+				ariaLabelledBy: this.getAggregation("_ariaLabelledBy"),
 				press: function (oEvent) {
 					var oText,
 						bExpanded,
@@ -324,6 +344,8 @@ function(library,
 						oPopover.addContent(oText);
 
 						oPopover.openBy(oEvent.getSource());
+
+						this._updateAriaLabelledByText(true);
 					}
 				}.bind(this)
 			});
@@ -338,6 +360,24 @@ function(library,
 
 	ExpandableText.prototype._onPopoverBeforeClose = function () {
 		this._getShowMoreLink().setText(TEXT_SHOW_MORE);
+		this._updateAriaLabelledByText();
+	};
+
+	ExpandableText.prototype._updateAriaLabelledByText = function (bExpanded) {
+		var sAriaText;
+
+		bExpanded = bExpanded || this.getProperty("expanded");
+
+		switch (this.getOverflowMode()) {
+			case ExpandableTextOverflowMode.Popover:
+				sAriaText = oRb.getText(bExpanded ? "EXPANDABLE_TEXT_SHOW_LESS_POPOVER_ARIA_LABEL" : "EXPANDABLE_TEXT_SHOW_MORE_POPOVER_ARIA_LABEL");
+				break;
+			default:
+				sAriaText = oRb.getText(bExpanded ? "EXPANDABLE_TEXT_SHOW_LESS_ARIA_LABEL" : "EXPANDABLE_TEXT_SHOW_MORE_ARIA_LABEL");
+				break;
+		}
+
+		this.getAggregation("_ariaLabelledBy").setText(sAriaText);
 	};
 
 	/**

package/src/sap/m/ExpandableTextRenderer.js

@@ -58,7 +58,8 @@ sap.ui.define([
 			bRenderWhitespace = oText.getRenderWhitespace(),
 			bExpandable = oText._isExpandable(),
 			bExpanded = oText.getProperty("expanded"),
-			sEllipsisText = bExpanded ? " " : "... ";
+			sEllipsisText = bExpanded ? " " : "... ",
+			oAriaLabelledByControl = oText.getAggregation("_ariaLabelledBy");
 
 		// start writing HTML
 		oRm.openStart("div", oText);
@@ -114,6 +115,8 @@ sap.ui.define([
 			oRm.renderControl(oText._getShowMoreLink());
 		}
 
+		oRm.renderControl(oAriaLabelledByControl);
+
 		// finalize
 		oRm.close("div");
 	};

package/src/sap/m/FacetFilter.js

@@ -170,7 +170,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.core.Control
 	 * @implements sap.ui.core.IShrinkable
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/FacetFilterItem.js

@@ -20,7 +20,7 @@ sap.ui.define(['./ListItemBase', './library', './FacetFilterItemRenderer'],
 	 * @class
 	 * Represents a value for the {@link sap.m.FacetFilterList} control.
 	 * @extends sap.m.ListItemBase
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/FacetFilterList.js

@@ -52,7 +52,7 @@ sap.ui.define([
 	 * be closed.
 	 *
 	 * @extends sap.m.List
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/FeedContent.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 * @since 1.34
 	 *
 	 * @public

package/src/sap/m/FeedInput.js

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

package/src/sap/m/FeedListItem.js

@@ -56,7 +56,7 @@ function(
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/FeedListItemAction.js

@@ -19,7 +19,7 @@ sap.ui.define(["sap/ui/core/Element"],
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/Fiori20Adapter.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 *
 	 *
 	 * @class text
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 * @private
 	 * @since 1.38
 	 * @alias HeaderAdapter
@@ -227,7 +227,7 @@ sap.ui.define([
 	 * Constructor for an sap.m.Fiori20Adapter.
 	 *
 	 * @class text
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 * @private
 	 * @since 1.38
 	 * @alias sap.m.Fiori20Adapter

package/src/sap/m/FlexBox.js

@@ -62,7 +62,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @public
 	 * @alias sap.m.FlexBox

package/src/sap/m/FlexItemData.js

@@ -24,7 +24,7 @@ sap.ui.define(["./FlexBoxStylingHelper", "./library", "sap/ui/core/LayoutData"],
 	 * @class
 	 * Holds layout data for a FlexBox / HBox / VBox.
 	 * @extends sap.ui.core.LayoutData
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/FormattedText.js

@@ -46,7 +46,7 @@ function(
 		 * @class
 		 * The FormattedText control allows the usage of a limited set of tags for inline display of formatted text in HTML format.
 		 * @extends sap.ui.core.Control
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/GenericTag.js

@@ -53,7 +53,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/GenericTile.js

@@ -23,7 +23,8 @@ sap.ui.define([
 	"sap/ui/core/theming/Parameters",
 	"sap/ui/thirdparty/jquery",
 	"sap/ui/core/library",
-	"sap/ui/core/Configuration"
+	"sap/ui/core/Configuration",
+	"sap/ui/core/InvisibleText"
 ], function (
 	library,
 	Control,
@@ -43,7 +44,8 @@ sap.ui.define([
 	Parameters,
 	jQuery,
 	coreLibrary,
-	Configuration
+	Configuration,
+	InvisibleText
 ) {
 	"use strict";
 
@@ -79,7 +81,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 * @since 1.34.0
 	 *
 	 * @public
@@ -264,6 +266,10 @@ sap.ui.define([
 				 * The hidden aggregation for the message in the failed state.
 				 */
 				_failedMessageText: {type: "sap.m.Text", multiple: false, visibility: "hidden"},
+				/**
+				 * The hidden aggregation that uses this id in aria-describedby attribute.
+				 */
+				_invisibleText: {type:"sap.ui.core.InvisibleText",multiple: false, visibility: "hidden"},
 				/**
 				 * The hidden aggregation for the Tile Icon Works only in IconMode.
 				 * @experimental since 1.96
@@ -364,6 +370,9 @@ sap.ui.define([
 		this._oFailedText.addStyleClass("sapMGTFailed");
 		this.setAggregation("_failedMessageText", this._oFailedText, true);
 
+		this._oInvisibleText = new InvisibleText(this.getId() + "-ariaText");
+		this.setAggregation("_invisibleText", this._oInvisibleText, true);
+
 		this._oWarningIcon = new Icon(this.getId() + "-warn-icon", {
 			src: "sap-icon://notification",
 			size: "1.375rem"
@@ -542,6 +551,11 @@ sap.ui.define([
 			this._sParentResizeListenerId = null;
 		}
 
+		if (this._sGenericTileResizeListenerId) {
+			ResizeHandler.deregister(this._sGenericTileResizeListenerId);
+			this._sGenericTileResizeListenerId = null;
+		}
+
 		Device.media.detachHandler(this._handleMediaChange, this, DEVICE_SET);
 
 		if (this._$RootNode) {
@@ -591,6 +605,10 @@ sap.ui.define([
 			ResizeHandler.deregister(this._sResizeListenerId);
 			this._sParentResizeListenerId = null;
 		}
+		if (this._sGenericTileResizeListenerId) {
+			ResizeHandler.deregister(this._sGenericTileResizeListenerId);
+			this._sGenericTileResizeListenerId = null;
+		}
 
 		//sets the extra width of 0.5rem when the grid container has 1rem gap for the TwoByxxxx tiles
 		var oGetParent = this.getParent();
@@ -638,6 +656,8 @@ sap.ui.define([
 
 		var sMode = this.getMode();
 		var bScreenLarge = this._isScreenLarge();
+		this._sGenericTileResizeListenerId = ResizeHandler.register(this, this._handleResizeOnTile.bind(this));
+		this._handleResizeOnTile();
 		if (sMode === GenericTileMode.LineMode) {
 			var $Parent = this.$().parent();
 			if (bScreenLarge) {
@@ -683,6 +703,10 @@ sap.ui.define([
 			this._applyExtraHeight();
 		}
 
+		//Sets the aria-describedby attribute and uses the _invisibleText id in it
+		if (this.getTooltip() && this.getDomRef()) {
+			this.getDomRef().setAttribute("aria-describedby",this.getAggregation("_invisibleText").getId());
+		}
 		this.onDragComplete();
 	};
 	/**
@@ -769,6 +793,47 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 *Resize handler on the GenericTile
+	 *
+	 * @private
+	 */
+
+	 GenericTile.prototype._handleResizeOnTile = function () {
+		if (this._isIconMode() && this.getFrameType() === FrameType.OneByOne) {
+				this._handleResizeOnIconTile();
+		}
+	};
+
+	/**
+	 *Adjusts the alignment inside the IconMode tiles when its width is getting changed
+	 *
+	 * @private
+	 */
+
+	GenericTile.prototype._handleResizeOnIconTile = function () {
+		var oTitle = this._oTitle.getDomRef();
+		var bIsTabletSize =  window.matchMedia("(max-width: 600px)").matches;
+		var bIsMobileSize =  window.matchMedia("(max-width: 374px)").matches;
+		if (oTitle) {
+			var iHeight = parseInt(getComputedStyle(oTitle).height.slice(0,2));
+			var iLineHeight = parseInt(getComputedStyle(oTitle).lineHeight.slice(0,2));
+			var iNumLines = iHeight / iLineHeight;
+			if (iNumLines === 1) {
+				this.addStyleClass("sapMGTHeaderOneLine");
+			} else {
+				this.removeStyleClass("sapMGTHeaderOneLine");
+			}
+			if (!(bIsTabletSize || bIsMobileSize) && iNumLines === 3 && this._oSubTitle.getDomRef()) {
+				this._oSubTitle.setMaxLines(1);
+				this.addStyleClass("sapMGTHeaderThreeLine");
+			} else {
+				this.removeStyleClass("sapMGTHeaderThreeLine");
+				this._oSubTitle.setMaxLines(2);
+			}
+		}
+	};
+
 	/**
 	 * @private
 	 */
@@ -1269,12 +1334,16 @@ sap.ui.define([
 
 		var frameType = this.getFrameType();
 		if (this._isIconMode()) {
-			if (bSubheader) {
-				this._oTitle.setProperty("maxLines", 1, true);
-			} else {
-				this._oTitle.setProperty("maxLines", 2, true);
+			var iHeaderLines,iSubHeaderLines;
+			iSubHeaderLines = (frameType === FrameType.TwoByHalf) ? 1 : 2;
+			if (frameType === FrameType.OneByOne) {
+				iHeaderLines = 4;
+			} else if (frameType === FrameType.TwoByHalf) {
+				iHeaderLines = (bSubheader) ? 1 : 2;
 			}
-        } else if (frameType === FrameType.TwoByOne && this.getMode() === GenericTileMode.ActionMode) {
+			this._oTitle.setProperty("maxLines", iHeaderLines, true);
+			this._oSubTitle.setProperty("maxLines", iSubHeaderLines, true);
+		} else if (frameType === FrameType.TwoByOne && this.getMode() === GenericTileMode.ActionMode) {
 			this._oTitle.setProperty("maxLines", 2, true);
 		} else if (frameType === FrameType.OneByHalf || frameType === FrameType.TwoByHalf) {
 			this._oTitle.setProperty("maxLines", 2, true);
@@ -1416,14 +1485,11 @@ sap.ui.define([
 
 	/**
 	 * Returns a text for the ARIA label as combination of header and content texts
-	 * when the tooltip is empty
 	 * @private
 	 * @returns {string} The ARIA label text
 	 */
 	GenericTile.prototype._getAriaAndTooltipText = function () {
-		var sAriaText = (this.getTooltip_AsString() && !this._isTooltipSuppressed())
-			? this.getTooltip_AsString()
-			: (this._getHeaderAriaAndTooltipText() + "\n" + this._getContentAriaAndTooltipText());
+		var sAriaText = this._getHeaderAriaAndTooltipText() + "\n" + this._getContentAriaAndTooltipText();
 		switch (this.getState()) {
 			case LoadState.Disabled:
 				return "";
@@ -1442,15 +1508,13 @@ sap.ui.define([
 
 	/**
 	 * Returns text for ARIA label.
-	 * If the application provides a specific tooltip, the ARIA label is equal to the tooltip text.
-	 * If the application doesn't provide a tooltip or the provided tooltip contains only white spaces,
-	 * calls _getAriaAndTooltipText to get text.
 	 *
 	 * @private
+	 * @param {boolean} bHideSizeAnnouncement if set to true it hides the size announcement of the tile while read by a screen reader
 	 * @returns {string} Text for ARIA label.
 	 */
-	GenericTile.prototype._getAriaText = function () {
-		var sAriaText = this.getTooltip_Text();
+	GenericTile.prototype._getAriaText = function (bHideSizeAnnouncement) {
+		var sAriaText = this._getAriaAndTooltipText();
 		var sAriaLabel = this.getAriaLabel();
 		if (!sAriaText || this._isTooltipSuppressed()) {
 			sAriaText = this._getAriaAndTooltipText(); // ARIA label set by the control
@@ -1461,7 +1525,40 @@ sap.ui.define([
 		if (sAriaLabel) {
 			sAriaText = sAriaLabel + " " + sAriaText;
 		}
-		return sAriaText; // ARIA label set by the app, equal to tooltip
+		if (!bHideSizeAnnouncement) {
+			sAriaText = sAriaText.trim();
+			sAriaText += ("\n" + this._getSizeDescription());
+		}
+		return sAriaText.trim();  // ARIA label set by the app, equal to tooltip
+	};
+
+	/**
+	 * Returns the size description of a tile according to its frame type, that is announced by the screen reader
+	 *
+	 * @returns {string} Text for the size description
+	 * @private
+	 */
+	 GenericTile.prototype._getSizeDescription = function () {
+		var sText = "",
+			frameType = this.getFrameType();
+		if (this.getMode() === GenericTileMode.LineMode) {
+			var bIsLink = this.getUrl() && !this._isInActionScope() && this.getState() !== LoadState.Disabled;
+			var bHasPress = this.hasListeners("press");
+			if (bIsLink || bHasPress) {
+				sText = "GENERIC_TILE_LINK";
+			} else {
+				sText = "GENERIC_TILE_LINE_SIZE";
+			}
+		} else if (frameType === FrameType.OneByHalf) {
+			sText = "GENERIC_TILE_FLAT_SIZE";
+		} else if (frameType === FrameType.TwoByHalf) {
+			sText = "GENERIC_TILE_FLAT_WIDE_SIZE";
+		} else if (frameType === FrameType.TwoByOne) {
+			sText = "GENERIC_TILE_WIDE_SIZE";
+		} else if (frameType === FrameType.OneByOne) {
+			sText = "GENERIC_TILE_ROLE_DESCRIPTION";
+		}
+		return this._oRb.getText(sText);
 	};
 
 	/**

package/src/sap/m/GenericTileLineModeRenderer.js

@@ -14,8 +14,6 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/thirdpart
 	// shortcut for sap.m.LoadState
 	var LoadState = library.LoadState;
 
-	var oRb = sap.ui.getCore().getLibraryResourceBundle("sap.m");
-
 	/**
 	 * GenericTileLineMode renderer.
 	 * @namespace
@@ -74,8 +72,6 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/thirdpart
 		oRm.attr("aria-label", sAriaText);
 		if (sAriaRoleDescription) {
 			oRm.attr("aria-roledescription", sAriaRoleDescription );
-		} else {
-			oRm.attr("aria-roledescription", oRb.getText("GENERIC_TILE_ROLE_DESCRIPTION"));
 		}
 		if (sAriaRole) {
 			oRm.attr("role", sAriaRole);
@@ -117,6 +113,10 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/thirdpart
 			oRm.class("sapMGTFailed");
 		}
 		oRm.openEnd();
+		if (sTooltipText) {
+			oControl.getAggregation("_invisibleText").setText(sTooltipText);
+			oRm.renderControl(oControl.getAggregation("_invisibleText"));
+		}
 		// focus div was only getting rendered when screen size was small
 		// which in turn was not rendering active state when screen size was large and thus default browser active state would suffice
 		// in the new line tile visualisation we need active state same as other generic tiles

package/src/sap/m/GenericTileRenderer.js

@@ -19,8 +19,6 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/core/Conf
 
 	var ValueColor = library.ValueColor;
 
-	var oRb = sap.ui.getCore().getLibraryResourceBundle("sap.m");
-
 	/**
 	 * GenericTile renderer.
 	 * @namespace
@@ -49,6 +47,7 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/core/Conf
 		var sAriaRole = oControl.getAriaRole();
 		var isHalfFrame = frameType === frameTypes.OneByHalf || frameType === frameTypes.TwoByHalf;
 		var sBGColor = oControl._sBGColor;
+		var bIsIconModeOneByOne = oControl._isIconMode() && frameType === frameTypes.OneByOne;
 
 		// Render a link when URL is provided, not in action scope and the state is enabled
 		var bRenderLink = oControl.getUrl() && (!oControl._isInActionScope() || oControl.getMode() === GenericTileMode.IconMode) && sState !== LoadState.Disabled && !oControl._isNavigateActionEnabled() && !oControl._isActionMode();
@@ -132,11 +131,9 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/core/Conf
 		}
 		if (sState === LoadState.Loaded) {
 			oRm.attr("aria-label", sAriaText);
-				}
+		}
 		if (sAriaRoleDescription) {
 			oRm.attr("aria-roledescription", sAriaRoleDescription );
-		} else {
-			oRm.attr("aria-roledescription", oRb.getText("GENERIC_TILE_ROLE_DESCRIPTION"));
 		}
 		if (sState !== LoadState.Disabled) {
 			if (!oControl.isInActionRemoveScope() && oControl.getPressEnabled()) {
@@ -163,6 +160,10 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/core/Conf
 			oRm.class("sapMGTNewsContent");
 		}
 		oRm.openEnd();
+		if (sTooltipText) {
+			oControl.getAggregation("_invisibleText").setText(sTooltipText);
+			oRm.renderControl(oControl.getAggregation("_invisibleText"));
+		}
 		var isFooterPresent = false;
 		var isContentPresent = false;
 		function renderLoadingShimmerIconMode(oRm, bIsLoading) {
@@ -253,6 +254,14 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/core/Conf
 				if (!oControl.getIconLoaded()) {
 					renderLoadingShimmerIconMode(oRm, false);
 				} else {
+					if (frameType === frameTypes.OneByOne) {
+						oRm.openStart("div");
+						oRm.class("sapMGTHideOverflow");
+						oRm.openEnd();
+						oRm.openStart("div");
+						oRm.class("sapMGTIconWrapper");
+						oRm.openEnd();
+					}
 					oRm.openStart("div");
 					if (frameType === frameTypes.OneByOne) {
 						oRm.class("sapMGTOneByOneIcon");
@@ -317,6 +326,10 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/core/Conf
 			}
 
 			this._renderHeader(oRm, oControl);
+			if (bIsIconModeOneByOne) {
+				oRm.close("div");
+				oRm.close("div");
+			}
 			for (var i = 0; i < iLength; i++) {
 				isFooterPresent = oControl._checkFooter(aTileContent[i], oControl) && (aTileContent[i].getFooter() ||  aTileContent[i].getUnit());
 				var oAggregationContent = aTileContent[i].getContent();
@@ -330,16 +343,10 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/core/Conf
 				}
 			}
 
-			if (!(isHalfFrame && isContentPresent)) {
-				if (oControl.getSubheader()) {
-					//Restrict creation of SubHeader for IconMode & OneByOne frameType
-					if (!(oControl._isIconMode() && oControl.getFrameType() == frameTypes.OneByOne)) {
-						this._renderSubheader(oRm, oControl);
-					}
-				}
+			if (!(isHalfFrame && isContentPresent) && oControl.getSubheader()) {
+				this._renderSubheader(oRm, oControl);
 			}
-
-			oRm.close("div");
+				oRm.close("div");
 
 			if ( !oControl._isIconMode() ) { //Restrict creation of Footer for IconMode
 				oRm.openStart("div", oControl.getId() + "-content");

package/src/sap/m/GroupHeaderListItem.js

@@ -30,7 +30,7 @@ sap.ui.define(["sap/ui/core/library", "./library", "./ListItemBase", "./GroupHea
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public