@openui5/sap.m 1.107.1 → 1.108.1

package/src/sap/m/RadioButtonGroup.js

@@ -10,6 +10,7 @@ sap.ui.define([
 	'sap/ui/core/Control',
 	'sap/ui/core/delegate/ItemNavigation',
 	'sap/ui/core/library',
+	'sap/ui/base/ManagedObjectObserver',
 	'./RadioButton',
 	'./RadioButtonGroupRenderer',
 	"sap/base/Log"
@@ -19,6 +20,7 @@ sap.ui.define([
 		Control,
 		ItemNavigation,
 		coreLibrary,
+		ManagedObjectObserver,
 		RadioButton,
 		RadioButtonGroupRenderer,
 		Log
@@ -59,7 +61,7 @@ sap.ui.define([
 			 * @implements sap.ui.core.IFormContent
 			 *
 			 * @author SAP SE
-			 * @version 1.107.1
+			 * @version 1.108.1
 			 *
 			 * @constructor
 			 * @public
@@ -159,6 +161,10 @@ sap.ui.define([
 
 			RadioButtonGroup.prototype.init = function() {
 				this._iSelectionNumber = -1;
+				this._oObserver = new ManagedObjectObserver(this._observeChanges.bind(this));
+				this._oObserver.observe(this, {
+					aggregations: ["buttons"]
+				});
 			};
 
 			/**
@@ -175,6 +181,11 @@ sap.ui.define([
 					this._oItemNavigation.destroy();
 					delete this._oItemNavigation;
 				}
+
+				if (this._oObserver) {
+					this._oObserver.disconnect();
+					this._oObserver = null;
+				}
 			};
 
 			/**
@@ -225,16 +236,16 @@ sap.ui.define([
 			 * @private
 			 */
 			RadioButtonGroup.prototype._initItemNavigation = function() {
-
 				// Collect buttons for ItemNavigation
+				var aRBs = this._getVisibleButtons();
 				var aDomRefs = [];
 				var bHasEnabledRadios = false;
 				var bRadioGroupEnabled = this.getEnabled();
-				for (var i = 0; i < this.aRBs.length; i++) {
-					aDomRefs.push(this.aRBs[i].getDomRef());
+				for (var i = 0; i < aRBs.length; i++) {
+					aDomRefs.push(aRBs[i].getDomRef());
 
 					// if the i-th radio button is enabled - set the flag to true
-					bHasEnabledRadios = bHasEnabledRadios || this.aRBs[i].getEnabled();
+					bHasEnabledRadios = bHasEnabledRadios || aRBs[i].getEnabled();
 				}
 
 				// if no radio buttons are enabled or the whole group is disabled
@@ -266,6 +277,41 @@ sap.ui.define([
 				});
 			};
 
+			RadioButtonGroup.prototype._getVisibleButtons = function() {
+				return this.getButtons().filter(function (oRB) {
+					return oRB.getVisible();
+				});
+			};
+
+			RadioButtonGroup.prototype._observeChanges = function (oChanges) {
+				var oObject = oChanges.object,
+					sChangeName = oChanges.name,
+					sMutationName = oChanges.mutation,
+					oChild = oChanges.child;
+
+				if (oObject === this) {
+					if (sMutationName === "insert") {
+						this._observeVisibility(oChild);
+					} else if (sMutationName === "remove") {
+						this._unobserveVisibility(oChild);
+					}
+				} else if (sChangeName === "visible") {
+					this._initItemNavigation();
+				}
+			};
+
+			RadioButtonGroup.prototype._observeVisibility = function (oControl) {
+				this._oObserver.observe(oControl, {
+					properties: ["visible"]
+				});
+			};
+
+			RadioButtonGroup.prototype._unobserveVisibility = function (oControl) {
+				this._oObserver.unobserve(oControl, {
+					properties: ["visible"]
+				});
+			};
+
 			/**
 			 * Sets the selected sap.m.RadioButton using index.
 			 *
@@ -274,13 +320,12 @@ sap.ui.define([
 			 * @returns {this} Pointer to the control instance for chaining.
 			 */
 			RadioButtonGroup.prototype.setSelectedIndex = function(iSelectedIndex) {
-
 				var iIndexOld = this.getSelectedIndex();
 				// if a radio button in the group is focused is true, otherwise - false
-				var hasFocusedRadioButton = document.activeElement && document.activeElement.parentNode &&
-					document.activeElement.parentNode.parentNode === this.getDomRef();
+				var hasFocusedRadioButton = this.getDomRef() && this.getDomRef().contains(document.activeElement);
 				// if radio button group has buttons and one of them is selected is true, otherwise - false
 				var isRadioGroupSelected = !!(this.aRBs && this.aRBs[iSelectedIndex]);
+				var iFocusedIndex;
 
 				if (iSelectedIndex < -1) {
 					// invalid negative index -> don't change index.
@@ -290,6 +335,7 @@ sap.ui.define([
 
 				this.setProperty("selectedIndex", iSelectedIndex, true); // no re-rendering
 				this._iSelectionNumber = RadioButton.getNextSelectionNumber();
+				iFocusedIndex = this._getSelectedIndexInRange();
 
 				// deselect old RadioButton
 				if (!isNaN(iIndexOld) && this.aRBs && this.aRBs[iIndexOld]) {
@@ -303,8 +349,8 @@ sap.ui.define([
 				}
 
 				if (this._oItemNavigation) {
-					this._oItemNavigation.setFocusedIndex(iSelectedIndex);
-					this._oItemNavigation.setSelectedIndex(iSelectedIndex);
+					this._oItemNavigation.setFocusedIndex(iFocusedIndex);
+					this._oItemNavigation.setSelectedIndex(iFocusedIndex);
 				}
 
 				// if focus is in the group - focus the selected element
@@ -597,10 +643,18 @@ sap.ui.define([
 			 * @param {sap.ui.base.Event} oControlEvent The event that gets fired by the {@link sap.ui.core.delegate.ItemNavigation} delegate.
 			 */
 			RadioButtonGroup.prototype._handleAfterFocus = function(oControlEvent) {
-
+				var aRBs = this.getButtons();
 				var iIndex = oControlEvent.getParameter("index");
 				var oEvent = oControlEvent.getParameter("event");
 
+				// buttons that are not visible are not included in the HTML
+				// adjust the index to include them
+				for (var i = 0; i <= iIndex; i++) {
+					if (!aRBs[i].getVisible()) {
+						iIndex++;
+					}
+				}
+
 				// handle only keyboard navigation here
 				if (oEvent.keyCode === undefined) {
 					return;
@@ -629,15 +683,24 @@ sap.ui.define([
 				}
 			};
 
-			RadioButtonGroup.prototype._getSelectedIndexInRange = function(oControlEvent) {
-				var iLength = this.getButtons().length,
-					iInd = this.getSelectedIndex();
+			RadioButtonGroup.prototype._getSelectedIndexInRange = function() {
+				var aRBs = this.getButtons(),
+					iLength = aRBs.length,
+					iSelectedIndex = this.getSelectedIndex(),
+					iFocusedIndex = -1;
 
-				if (iInd >= -1  && iInd < iLength) {
-					return iInd;
+				if (iSelectedIndex <= -1  || iSelectedIndex > iLength - 1) {
+					return -1;
+				}
+
+				// include only the visible buttons to the focused index
+				for (var i = 0; i <= iSelectedIndex; i++) {
+					if (aRBs[i].getVisible()) {
+						iFocusedIndex++;
+					}
 				}
 
-				return -1;
+				return iFocusedIndex;
 			};
 
 			return RadioButtonGroup;

package/src/sap/m/RangeSlider.js

@@ -51,7 +51,7 @@ sap.ui.define([
          * @extends sap.m.Slider
          *
          * @author SAP SE
-         * @version 1.107.1
+         * @version 1.108.1
          *
          * @constructor
          * @public

package/src/sap/m/RatingIndicator.js

@@ -52,7 +52,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/ResponsivePopover.js

@@ -61,7 +61,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/ResponsiveScale.js

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

package/src/sap/m/ScrollBar.js

@@ -25,7 +25,7 @@ function(Control, ScrollBarRenderer) {
 	 * care of only rendering the currently visible rows and use this <code>ScrollBar</code> control to make
 	 * the users think they are actually scrolling through a long list.
 	 * @extends sap.ui.core.Control
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @private
 	 * @alias sap.m.ScrollBar

package/src/sap/m/ScrollContainer.js

@@ -39,7 +39,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/SearchField.js

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

package/src/sap/m/SegmentedButton.js

@@ -55,7 +55,7 @@ function(
 	 * @implements sap.ui.core.IFormContent
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/SegmentedButtonItem.js

@@ -23,7 +23,7 @@ sap.ui.define(['./library', 'sap/ui/core/Item', 'sap/m/Button', 'sap/ui/core/Cus
 		 * @extends sap.ui.core.Item
 		 *
 		 * @author SAP SE
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/Select.js

@@ -103,7 +103,7 @@ function(
 		 * @implements sap.ui.core.IFormContent, sap.ui.core.ISemanticFormContent
 		 *
 		 * @author SAP SE
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/SelectDialog.js

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

package/src/sap/m/SelectDialogBase.js

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

package/src/sap/m/SelectList.js

@@ -37,7 +37,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/SelectionDetails.js

@@ -39,7 +39,7 @@ function(
 	 * <b><i>Note:</i></b>It is protected and should only be used within the framework itself.
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @extends sap.ui.core.Control
 	 * @constructor

package/src/sap/m/SelectionDetailsFacade.js

@@ -10,7 +10,7 @@
  * @since 1.48.0
  * @public
  * @author SAP SE
- * @version 1.107.1
+ * @version 1.108.1
  * @borrows sap.ui.core.Element#addCustomData as #addCustomData
  * @borrows sap.ui.core.Element#getCustomData as #getCustomData
  * @borrows sap.ui.core.Element#indexOfCustomData as #indexOfCustomData
@@ -45,7 +45,7 @@
  * @since 1.48.0
  * @public
  * @author SAP SE
- * @version 1.107.1
+ * @version 1.108.1
  * @borrows sap.ui.core.Element#addCustomData as #addCustomData
  * @borrows sap.ui.core.Element#getCustomData as #getCustomData
  * @borrows sap.ui.core.Element#indexOfCustomData as #indexOfCustomData

package/src/sap/m/SelectionDetailsItem.js

@@ -58,7 +58,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @protected

package/src/sap/m/SelectionDetailsItemLine.js

@@ -23,7 +23,7 @@ sap.ui.define(["sap/ui/core/Element", "sap/base/Log", "sap/base/util/isPlainObje
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @protected

package/src/sap/m/Shell.js

@@ -35,7 +35,7 @@ sap.ui.define([
 		 * The Shell control can be used as root element of applications. It can contain an App or a <code>SplitApp</code> control.
 		 * The Shell provides some overarching functionality for the overall application and takes care of visual adaptation, such as a frame around the App, on desktop browser platforms.
 		 * @extends sap.ui.core.Control
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/SimpleFixFlex.js

@@ -31,7 +31,7 @@ function(Control, ResizeHandler, Log, SimpleFixFlexRenderer) {
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @private

package/src/sap/m/SinglePlanningCalendar.js

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

package/src/sap/m/SinglePlanningCalendarDayView.js

@@ -25,7 +25,7 @@ function (library, SinglePlanningCalendarView) {
 	 * @extends sap.m.SinglePlanningCalendarView
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/SinglePlanningCalendarGrid.js

@@ -102,7 +102,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @constructor
 		 * @private
@@ -724,6 +724,8 @@ sap.ui.define([
 						startDate: newPos.startDate,
 						endDate: newPos.endDate
 					});
+
+					setTimeout(function() {this.invalidate();}.bind(this), 0);
 				}.bind(this)
 			});
 

package/src/sap/m/SinglePlanningCalendarMonthGrid.js

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

package/src/sap/m/SinglePlanningCalendarMonthView.js

@@ -28,7 +28,7 @@ sap.ui.define([
 		 * @extends sap.m.SinglePlanningCalendarView
 		 *
 		 * @author SAP SE
-		 * @version 1.107.1
+		 * @version 1.108.1
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/SinglePlanningCalendarView.js

@@ -26,7 +26,7 @@ function (library, Log, Element) {
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/SinglePlanningCalendarWeekView.js

@@ -29,7 +29,7 @@ function (library, SinglePlanningCalendarView, LocaleData, CalendarDate, Calenda
 	 * @extends sap.m.SinglePlanningCalendarView
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/SinglePlanningCalendarWorkWeekView.js

@@ -29,7 +29,7 @@ function (library, SinglePlanningCalendarView, CalendarDate, CalendarUtils, Loca
 	 * @extends sap.m.SinglePlanningCalendarView
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/SlideTile.js

@@ -13,7 +13,8 @@ sap.ui.define([
 	"sap/ui/events/KeyCodes",
 	"sap/ui/events/PseudoEvents",
 	"sap/ui/thirdparty/jquery",
-	"sap/ui/core/Configuration"
+	"sap/ui/core/Configuration",
+	"sap/ui/core/InvisibleText"
 ],
 	function(
 		library,
@@ -24,7 +25,8 @@ sap.ui.define([
 		KeyCodes,
 		PseudoEvents,
 		jQuery,
-		Configuration
+		Configuration,
+		InvisibleText
 	) {
 	"use strict";
 
@@ -41,7 +43,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.107.1
+	 * @version 1.108.1
 	 * @since 1.34
 	 *
 	 * @public
@@ -93,7 +95,11 @@ sap.ui.define([
 				/**
 				 * The pause/play icon that is being used to display the pause/play state of the control.
 				 */
-				_pausePlayIcon: {type: "sap.ui.core.Icon", multiple: false, visibility: "hidden"}
+				_pausePlayIcon: {type: "sap.ui.core.Icon", 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" }
 			},
 			events: {
 				/**
@@ -141,6 +147,9 @@ sap.ui.define([
 			size: "1rem",
 			noTabStop: true
 		}), true);
+
+		this._oInvisibleText = new InvisibleText(this.getId() + "-ariaText");
+		this.setAggregation("_invisibleText", this._oInvisibleText, true);
 	};
 
 	/**
@@ -216,6 +225,15 @@ sap.ui.define([
 				}.bind(this));
 			}
 		}
+		this._attachFocusEvents();
+
+		//Removing the child aria attributes becasuse its interfering with the Jaws when its in VPC mode on
+		this._removeChildAria();
+
+		//Sets the aria-describedby attribute and uses the _invisibleText id in it
+		if (this.getDomRef()) {
+			this.getDomRef().setAttribute("aria-describedby",this.getAggregation("_invisibleText").getId());
+		}
 	};
 
 	/**
@@ -314,6 +332,8 @@ sap.ui.define([
 			}
 			if (PseudoEvents.events.sapspace.fnCheck(oEvent)) {
 				this._toggleAnimation();
+				// Saving the current state in the following variable so that when the focus goes out it would remain in the present state
+				this.bIsPrevStateNormal = !this._bAnimationPause;
 			}
 			if (oEvent.which === KeyCodes.B && this._bAnimationPause) {
 				this._scrollToNextTile(true, true);
@@ -365,6 +385,7 @@ sap.ui.define([
 		if (jQuery(oEvent.target).hasClass("sapMSTIconClickTapArea")) {
 			this.addStyleClass("sapMSTIconPressed");
 		}
+		this.mouseDown = true;
 	};
 
 	/* --- Public methods --- */
@@ -402,6 +423,46 @@ sap.ui.define([
 		fnCheckMedia();
 	};
 
+	/**
+	 *Attaching focusin and foucusout event handles, and activating them when the tile is focused by tabnavigating
+	 * @private
+	 */
+
+	SlideTile.prototype._attachFocusEvents = function() {
+		var oSlideTile = this.getDomRef();
+		//These Event Listeners should be activated only when the tile gets it focus by tab navigation not by clicking on the tile
+		if (oSlideTile) {
+			oSlideTile.addEventListener('focusin', function() {
+				if (!this.mouseDown) {
+					this.bIsPrevStateNormal = this.getDomRef().classList.contains("sapMSTPauseIcon");
+					this._stopAnimation();
+					this._updatePausePlayIcon();
+				}
+			}.bind(this));
+			oSlideTile.addEventListener('focusout', function(){
+				if (!this.mouseDown) {
+					if (this.bIsPrevStateNormal) {
+						this._startAnimation();
+					}
+					this._updatePausePlayIcon();
+				}
+				this.mouseDown = false;
+			}.bind(this));
+		}
+	};
+
+	/**
+	 *Removes role and aria-roledescription attributes from the GenericTile so that these attributes are not read by Jaws when the VPC Mode is turned on
+	 * @private
+	 */
+
+	SlideTile.prototype._removeChildAria = function() {
+		this.getTiles().forEach(function(oTile){
+			oTile.getDomRef().removeAttribute("role");
+			oTile.getDomRef().removeAttribute("aria-roledescription");
+		});
+	};
+
 	/**
 	 *Checks if the tiles inside the slidetile has stretch frametype and the window size is below 600px
 	 *
@@ -495,6 +556,9 @@ sap.ui.define([
 		}.bind(this), iDisplayTime);
 		this._iStartTime = Date.now();
 		this._bAnimationPause = false;
+		if (this.getTiles()[this._iCurrentTile]) {
+			this._setAriaDescriptor();
+		}
 	};
 
 	/**
@@ -628,25 +692,28 @@ sap.ui.define([
 	 * @private
 	 */
 	SlideTile.prototype._setAriaDescriptor = function () {
-		var sText, sScope, aTiles, oCurrentTile;
-
+		var sText = "", sScope, aTiles, oCurrentTile,iTiles,sPrefixText,sState;
 		sScope = this.getScope();
 		aTiles = this.getTiles();
+		iTiles = aTiles.length;
+		sState = (this._bAnimationPause) ? this._oRb.getText("SLIDETILE_PAUSE") : this._oRb.getText("SLIDETILE_NORMAL");
+		sPrefixText = this._oRb.getText("SLIDETILE_INSTANCE_FOCUS",[this._iCurrentTile + 1,iTiles]) + " " + sState;
+		sText += sPrefixText;
 		oCurrentTile = aTiles[this._iCurrentTile];
-		sText = oCurrentTile._getAriaText().replace(/\s/g, " ");// Gets Tile's ARIA text and collapses whitespaces
+		sText += oCurrentTile._getAriaText(true).replace(/\s/g, " ");// Gets Tile's ARIA text and collapses whitespaces
 
 		if (sScope === GenericTileScope.Actions) {
 			sText = this._oRb.getText("GENERICTILE_ACTIONS_ARIA_TEXT") + "\n" + sText;
 		} else if (aTiles.length > 1 && sScope === GenericTileScope.Display) {
 			sText += "\n" + this._oRb.getText("SLIDETILE_MULTIPLE_CONTENT") + "\n" +
-				this._oRb.getText("SLIDETILE_TOGGLE_SLIDING");
+			this._oRb.getText("SLIDETILE_TOGGLE_SLIDING");
 			if (this._bAnimationPause) {
 				sText += "\n" + this._oRb.getText("SLIDETILE_SCROLL_BACK") + "\n" +
 					this._oRb.getText("SLIDETILE_SCROLL_FORWARD");
 			}
 		}
 		sText += "\n" + this._oRb.getText("SLIDETILE_ACTIVATE");
-		this.$().attr("aria-label", sText);
+		this.getAggregation("_invisibleText").setText(sText);
 	};
 
 	/**
@@ -726,12 +793,14 @@ sap.ui.define([
 	 * @private
 	 */
 	SlideTile.prototype._updatePausePlayIcon = function () {
-		if (this._bAnimationPause) {
-			this.getAggregation("_pausePlayIcon").setSrc("sap-icon://media-play");
-			this.$().removeClass("sapMSTPauseIcon");
-		} else {
-			this.getAggregation("_pausePlayIcon").setSrc("sap-icon://media-pause");
-			this.$().addClass("sapMSTPauseIcon");
+		if (this.getAggregation("_pausePlayIcon")) {
+			if (this._bAnimationPause) {
+				this.getAggregation("_pausePlayIcon").setSrc("sap-icon://media-play");
+				this.$().removeClass("sapMSTPauseIcon");
+			} else {
+				this.getAggregation("_pausePlayIcon").setSrc("sap-icon://media-pause");
+				this.$().addClass("sapMSTPauseIcon");
+			}
 		}
 	};