@openui5/sap.m 1.103.1 → 1.106.0

package/src/sap/m/IllustratedMessage.js

@@ -82,7 +82,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.103.1
+	 * @version 1.106.0
 	 *
 	 * @constructor
 	 * @public
@@ -115,6 +115,14 @@ sap.ui.define([
 				 */
 				enableFormattedText: { type: "boolean", group: "Appearance", defaultValue: false },
 
+				/**
+				 * Defines whether the <code>IllustratedMessage</code> would resize itself according to it's height
+				 * if <code>illustrationSize</code> property is set to <code>IllustratedMessageSize.Auto</code>.
+				 *
+				 * @since 1.104
+				 */
+				enableVerticalResponsiveness: { type: "boolean", group: "Appearance", defaultValue: false },
+
 				/**
 				 * Determines which illustration breakpoint variant is used.
 				 *
@@ -194,6 +202,13 @@ sap.ui.define([
 				 */
 				_title: {type: "sap.m.Title", multiple: false, visibility: "hidden"}
 			},
+			associations : {
+				/**
+				 * Association to controls / IDs which label those controls (see WAI-ARIA attribute aria-labelledBy).
+	 			 * @since 1.106.0
+				 */
+				 illustrationAriaLabelledBy: {type : "sap.ui.core.Control", multiple : true, singularName : "illustrationAriaLabelledBy"}
+			},
 			dnd: { draggable: false, droppable: true }
 		}
 	});
@@ -258,6 +273,12 @@ sap.ui.define([
 		BASE: 259
 	};
 
+	IllustratedMessage.BREAK_POINTS_HEIGHT = {
+		DIALOG: 451,
+		SPOT: 296,
+		BASE: 154
+	};
+
 	IllustratedMessage.MEDIA = {
 		BASE: "sapMIllustratedMessage-Base",
 		SPOT: "sapMIllustratedMessage-Spot",
@@ -274,6 +295,7 @@ sap.ui.define([
 	 */
 
 	IllustratedMessage.prototype.init = function () {
+		this._sLastKnownMedia = null;
 		this._updateInternalIllustrationSetAndType(this.getIllustrationType());
 	};
 
@@ -452,7 +474,7 @@ sap.ui.define([
 	/**
 	 * Helper function which ensures that there is non-breaking space between the last two words
 	 * of a given DOM content. By adding it, we prevent one word (widow) on the last row of a text node.
-	 * @param {DOMRef} oDomRef - the DOM object which will be checked against
+	 * @param {HTMLElement} oDomRef - the DOM object which will be checked against
 	 * @private
 	 */
 	IllustratedMessage.prototype._preventWidowWords = function(oDomRef) {
@@ -477,14 +499,16 @@ sap.ui.define([
 	 */
 	IllustratedMessage.prototype._updateDomSize = function () {
 		var oDomRef = this.getDomRef(),
-			sSize;
+			sSize, sCustomSize;
 
 		if (oDomRef) {
 			sSize = this.getIllustrationSize();
 			if (sSize === IllustratedMessageSize.Auto) {
-				this._updateMedia(oDomRef.getBoundingClientRect().width);
+				this._updateMedia(oDomRef.getBoundingClientRect().width, oDomRef.getBoundingClientRect().height);
 			} else {
-				this._updateMediaStyle(IllustratedMessage.MEDIA[sSize.toUpperCase()]);
+				sCustomSize = IllustratedMessage.MEDIA[sSize.toUpperCase()];
+				this._updateMediaStyle(sCustomSize);
+				this._updateSymbol(sCustomSize);
 			}
 		}
 
@@ -507,50 +531,72 @@ sap.ui.define([
 	 * @private
 	 */
 	IllustratedMessage.prototype._onResize = function (oEvent) {
-		var iCurrentWidth = oEvent.size.width;
+		var iCurrentWidth = oEvent.size.width,
+			iCurrentHeight = oEvent.size.height;
 
-		this._updateMedia(iCurrentWidth);
+		this._updateMedia(iCurrentWidth, iCurrentHeight);
 	};
 
 	/**
-	 * Updates the media size of the control based on its own width, not on the entire screen size (which media query does).
+	 * Updates the media size of the control based on its own width and height, not on the entire screen size (which media query does).
 	 * @param {number} iWidth - the actual width of the control
+	 * @param {number} iHeight - the actual height of the control
 	 * @private
 	 */
-	IllustratedMessage.prototype._updateMedia = function (iWidth) {
-		if (!iWidth) {
+	IllustratedMessage.prototype._updateMedia = function (iWidth, iHeight) {
+		var bVertical = this.getEnableVerticalResponsiveness(),
+			sNewMedia;
+
+		if (!iWidth && !iHeight) {
 			return;
 		}
 
-		if (iWidth <= IllustratedMessage.BREAK_POINTS.BASE) {
-			this._updateMediaStyle(IllustratedMessage.MEDIA.BASE);
-		} else if (iWidth <= IllustratedMessage.BREAK_POINTS.SPOT) {
-			this._updateMediaStyle(IllustratedMessage.MEDIA.SPOT);
-		} else if (iWidth <= IllustratedMessage.BREAK_POINTS.DIALOG) {
-			this._updateMediaStyle(IllustratedMessage.MEDIA.DIALOG);
+		if (iWidth <= IllustratedMessage.BREAK_POINTS.BASE || (iHeight <= IllustratedMessage.BREAK_POINTS_HEIGHT.BASE && bVertical)) {
+			sNewMedia = IllustratedMessage.MEDIA.BASE;
+		} else if (iWidth <= IllustratedMessage.BREAK_POINTS.SPOT || (iHeight <= IllustratedMessage.BREAK_POINTS_HEIGHT.SPOT && bVertical)) {
+			sNewMedia = IllustratedMessage.MEDIA.SPOT;
+		} else if (iWidth <= IllustratedMessage.BREAK_POINTS.DIALOG || (iHeight <= IllustratedMessage.BREAK_POINTS_HEIGHT.DIALOG && bVertical)) {
+			sNewMedia = IllustratedMessage.MEDIA.DIALOG;
 		} else {
-			this._updateMediaStyle(IllustratedMessage.MEDIA.SCENE);
+			sNewMedia = IllustratedMessage.MEDIA.SCENE;
 		}
+
+		this._updateMediaStyle(sNewMedia);
+		this._updateSymbol(sNewMedia);
 	};
 
 	/**
-	 * It puts the appropriate classes on the control and updates illustration's symbol based on the current media size.
+	 * It puts the appropriate classes on the control based on the current media size.
 	 * @param {string} sCurrentMedia
 	 * @private
 	 */
 	IllustratedMessage.prototype._updateMediaStyle = function (sCurrentMedia) {
+		if (this._sLastKnownMedia !== sCurrentMedia) {
+			this._sLastKnownMedia = sCurrentMedia;
+		} else {
+			return; // No need to iterate over the media classes if the media is the same as the one previously used
+		}
 		Object.keys(IllustratedMessage.MEDIA).forEach(function (sMedia) {
-			var bEnable = sCurrentMedia === IllustratedMessage.MEDIA[sMedia],
-				sIdMedia = sMedia.charAt(0) + sMedia.slice(1).toLowerCase();
+			var bEnable = sCurrentMedia === IllustratedMessage.MEDIA[sMedia];
 			this.toggleStyleClass(IllustratedMessage.MEDIA[sMedia], bEnable);
-			if (bEnable && sCurrentMedia !== IllustratedMessage.MEDIA.BASE) { // No need to require a resource for BASE illustrationSize, since there is none
-				this._getIllustration().setSet(this._sIllustrationSet, true)
-					.setMedia(sIdMedia, true)
-					.setType(this._sIllustrationType);
-			}
 		}, this);
 	};
 
+	/**
+	 * Updates illustration's symbol based on the current media size.
+	 * @param {string} sCurrentMedia
+	 * @private
+	 */
+	IllustratedMessage.prototype._updateSymbol = function (sCurrentMedia) {
+		var sIdMedia = sCurrentMedia.substring(sCurrentMedia.indexOf('-') + 1);
+
+		if (sCurrentMedia !== IllustratedMessage.MEDIA.BASE) { // No need to require a resource for BASE illustrationSize, since there is none
+			this._getIllustration().setSet(this._sIllustrationSet, true)
+				.setMedia(sIdMedia, true)
+				.setType(this._sIllustrationType);
+		}
+	};
+
 	/**
 	 * ATTACH/DETACH HANDLERS
 	 */
@@ -634,6 +680,33 @@ sap.ui.define([
 		};
 	};
 
+	IllustratedMessage.prototype.addIllustrationAriaLabelledBy = function(sID) {
+		this.addAssociation("ariaLabelledBy", sID, true);
+
+		var oIllustratedMessageIllustration = this._getIllustration();
+		oIllustratedMessageIllustration.addAriaLabelledBy(sID);
+
+		return this;
+	};
+
+	IllustratedMessage.prototype.removeIllustrationAriaLabelledBy = function(sID) {
+		this.removeAssociation("ariaLabelledBy", sID, true);
+
+		var oIllustratedMessageIllustration = this._getIllustration();
+		oIllustratedMessageIllustration.removeAriaLabelledBy(sID);
+
+		return this;
+	};
+
+	IllustratedMessage.prototype.removeAllAriaLabelledBy = function(sID) {
+		this.removeAssociation("ariaLabelledBy", sID, true);
+
+		var oIllustratedMessageIllustration = this._getIllustration();
+		oIllustratedMessageIllustration.removeAllAriaLabelledBy(sID);
+
+		return this;
+	};
+
 
 	return IllustratedMessage;
 

package/src/sap/m/IllustratedMessageRenderer.js

@@ -23,26 +23,30 @@ sap.ui.define([], function () {
 	 */
 	IllustratedMessageRenderer.render = function (oRm, oIllustratedMessage) {
 		var oIllustratedMessageIllustration = oIllustratedMessage._getIllustration(),
-			oIllustratedMessageTitle = oIllustratedMessage._getTitle(),
-			oIllustratedMessageDescription = oIllustratedMessage._getDescription(),
-			oIllustratedMessageAdditionalContent = oIllustratedMessage.getAdditionalContent();
+			sIllustratedMessageTitle = oIllustratedMessage._getTitle(),
+			sIllustratedMessageDescription = oIllustratedMessage._getDescription(),
+			aIllustratedMessageAdditionalContent = oIllustratedMessage.getAdditionalContent(),
+			bIllustratedMessageEnableVerticalResponsiveness = oIllustratedMessage.getEnableVerticalResponsiveness();
 
 		// IllustratedMessage's Root DOM Element.
 		oRm.openStart("figure", oIllustratedMessage);
 		oRm.class("sapMIllustratedMessage");
+		if (bIllustratedMessageEnableVerticalResponsiveness) {
+			oRm.class("sapMIllustratedMessageScalable");
+		}
 		oRm.openEnd();
 
 			oRm.renderControl(oIllustratedMessageIllustration);
 
 			oRm.openStart("figcaption").openEnd();
-				oRm.renderControl(oIllustratedMessageTitle);
-				oRm.renderControl(oIllustratedMessageDescription.addStyleClass("sapMIllustratedMessageDescription"));
+				oRm.renderControl(sIllustratedMessageTitle);
+				oRm.renderControl(sIllustratedMessageDescription.addStyleClass("sapMIllustratedMessageDescription"));
 			oRm.close("figcaption");
 
 			oRm.openStart("div");
 			oRm.class("sapMIllustratedMessageAdditionalContent"); // helper class in order to hide the additional content when on Base breakpoint
 			oRm.openEnd();
-				oIllustratedMessageAdditionalContent.forEach(function (oControl) {
+				aIllustratedMessageAdditionalContent.forEach(function (oControl) {
 					oRm.renderControl(oControl);
 				});
 			oRm.close("div");

package/src/sap/m/Illustration.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.103.1
+	 * @version 1.106.0
 	 *
 	 * @constructor
 	 * @public
@@ -65,6 +65,13 @@ sap.ui.define([
 				 */
 				type: {type: "string", defaultValue: null}
 			},
+			associations : {
+				/**
+				 * Association to controls / IDs which label those controls (see WAI-ARIA attribute aria-labelledBy).
+	 			 * @since 1.106.0
+				 */
+				ariaLabelledBy: {type : "sap.ui.core.Control", multiple : true, singularName : "ariaLabelledBy"}
+			},
 			dnd: { draggable: true, droppable: false }
 		}
 	});

package/src/sap/m/IllustrationPool.js

@@ -211,6 +211,7 @@ sap.ui.define([
 			if (oDOMPool === null) {
 				oDOMPool = document.createElement("div");
 				oDOMPool.id = SAP_ILLUSTRATION_POOL_ID;
+				oDOMPool.setAttribute("aria-hidden", "true");
 
 				Core.getStaticAreaRef().appendChild(oDOMPool);
 

package/src/sap/m/IllustrationRenderer.js

@@ -4,7 +4,7 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-sap.ui.define(["sap/ui/Device"], function (Device) {
+sap.ui.define([], function () {
 	"use strict";
 
 	/**
@@ -26,6 +26,7 @@ sap.ui.define(["sap/ui/Device"], function (Device) {
 
 		oRm.openStart("svg", oIllustration);
 		oRm.class("sapMIllustration");
+		oRm.accessibilityState(oIllustration);
 		oRm.openEnd();
 
 			oRm.openStart("use");

package/src/sap/m/Image.js

@@ -9,13 +9,14 @@ sap.ui.define([
 	'./library',
 	'sap/ui/core/Control',
 	'sap/ui/base/DataType',
+	'sap/base/security/URLListValidator',
 	'./ImageRenderer',
 	"sap/ui/events/KeyCodes",
 	"sap/ui/thirdparty/jquery",
 	"sap/base/security/encodeCSS",
 	"sap/ui/core/library"
 ],
-	function(library, Control, DataType, ImageRenderer, KeyCodes, jQuery, encodeCSS, coreLibrary) {
+	function(library, Control, DataType, URLListValidator, ImageRenderer, KeyCodes, jQuery, encodeCSS, coreLibrary) {
 	"use strict";
 
 
@@ -57,7 +58,7 @@ sap.ui.define([
 	 * @implements sap.ui.core.IFormContent
 	 *
 	 * @author SAP SE
-	 * @version 1.103.1
+	 * @version 1.106.0
 	 *
 	 * @public
 	 * @alias sap.m.Image
@@ -282,6 +283,10 @@ sap.ui.define([
 		return ratio;
 	}());
 
+	Image.prototype.init = function () {
+		this._oSvgCachedData = {};
+	};
+
 	/**
 	 * Function is called when image is loaded successfully.
 	 *
@@ -388,7 +393,7 @@ sap.ui.define([
 	/**
 	 * Sets the <code>detailBox</code> aggregation.
 	 * @param {sap.m.LightBox|undefined} oLightBox - Instance of the <code>LightBox</code> control or undefined
-	 * @returns {object} <code>this</code> for chaining
+	 * @returns {this} <code>this</code> for chaining
 	 * @override
 	 * @public
 	 */
@@ -418,6 +423,17 @@ sap.ui.define([
 		return this.setAggregation("detailBox", oLightBox);
 	};
 
+	Image.prototype.setSrc = function (sSrc) {
+		var oPreviousSrc = this.getSrc(),
+			oResult = this.setProperty("src", sSrc);
+
+		if (sSrc && oPreviousSrc !== this.getSrc() && this.getMode() === ImageMode.InlineSvg) {
+			sSrc.endsWith("svg") && this._loadSvg();
+		}
+
+		return oResult;
+	};
+
 	/*
 	 * @override
 	 */
@@ -450,6 +466,10 @@ sap.ui.define([
 			var $DomNode = this.getDetailBox() ? this.$().find(".sapMImg") : this.$();
 			$DomNode.off("load").off("error");
 		}
+
+		if (this.getMode() === ImageMode.InlineSvg) {
+			this._loadSvg();
+		}
 	};
 
 	/**
@@ -501,6 +521,8 @@ sap.ui.define([
 		if (this._fnLightBoxOpen) {
 			this._fnLightBoxOpen = null;
 		}
+
+		this._oSvgCachedData = null;
 	};
 
 	/**
@@ -600,6 +622,54 @@ sap.ui.define([
 		oEvent.preventDefault();
 	};
 
+	/**
+	* Loads "svg"
+	* @private
+	*/
+	Image.prototype._loadSvg = function() {
+		var that = this,
+			sSrc = this.getSrc(),
+			oSvg;
+
+		if (!this._oSvgCachedData[sSrc]) {
+			that._oSvgCachedData[sSrc] = {};
+			jQuery.get(this.getSrc(), function(data) {
+				oSvg = jQuery(data).find('svg')[0];
+
+				if (oSvg) {
+					sap.ui.require(["sap/m/_thirdparty/purify"],
+					function(DOMPurify) {
+							that._oSvgCachedData[sSrc].oSvgDomRef = DOMPurify.sanitize(oSvg, {RETURN_DOM: true});
+							that.invalidate();
+					});
+				}
+			})
+			.done(function() {
+				that.fireLoad();
+			})
+			.fail(function() {
+				that.fireError();
+			});
+		}
+	};
+
+	Image.prototype._getSvgCachedData = function () {
+		var sSrc = this.getSrc();
+
+		if (this._oSvgCachedData[sSrc]
+			&& typeof this._oSvgCachedData[sSrc].oSvgDomRef === "object") {
+				return this._oSvgCachedData[sSrc].oSvgDomRef;
+		}
+	};
+
+	/**
+	* Checks if href is valid
+	* @private
+	*/
+	Image.prototype._isHrefValid = function (sURL) {
+		return URLListValidator.validate(sURL);
+	};
+
 	/**
 	* Update the source image either on the output DOM element (when in sap.m.ImageMode.Image mode) or on the window.Image object (when in sap.m.ImageMode.Background mode)
 	* @private

package/src/sap/m/ImageContent.js

@@ -33,7 +33,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.103.1
+	 * @version 1.106.0
 	 * @since 1.38
 	 *
 	 * @public

package/src/sap/m/ImageRenderer.js

@@ -42,6 +42,8 @@ sap.ui.define(['sap/m/library', "sap/base/security/encodeCSS", "sap/ui/core/libr
 			aDescribedBy = oImage.getAriaDescribedBy(),
 			aDetails = oImage.getAriaDetails(),
 			bIsImageMode = sMode === ImageMode.Image,
+			bIsSvgMode = sMode === ImageMode.InlineSvg,
+			bIsBackGroundMode = sMode === ImageMode.Background,
 			bLazyLoading = oImage.getLazyLoading(),
 			sAriaHasPopup = oImage.getAriaHasPopup();
 
@@ -61,6 +63,8 @@ sap.ui.define(['sap/m/library', "sap/base/security/encodeCSS", "sap/ui/core/libr
 				oRm.attr("loading", "lazy");
 			}
 
+		} else  if (bIsSvgMode) {
+			oRm.openStart("div", oImage);
 		} else {
 			oRm.openStart("span", !oLightBox ? oImage : oImage.getId() + "-inner");
 		}
@@ -84,7 +88,7 @@ sap.ui.define(['sap/m/library', "sap/base/security/encodeCSS", "sap/ui/core/libr
 
 		if (bIsImageMode) {
 			oRm.attr("src", oImage._getDensityAwareSrc());
-		} else {
+		} else if (bIsBackGroundMode) {
 			// preload the image with a window.Image instance. The source uri is set to the output DOM node via CSS style 'background-image' after the source image is loaded (in onload function)
 			oImage._preLoadImage(oImage._getDensityAwareSrc());
 			if (oImage._isValidBackgroundSizeValue(oImage.getBackgroundSize())) {
@@ -141,12 +145,72 @@ sap.ui.define(['sap/m/library', "sap/base/security/encodeCSS", "sap/ui/core/libr
 		oRm.style("width", oImage.getWidth());
 		oRm.style("height", oImage.getHeight());
 
-		bIsImageMode ? oRm.voidEnd() : oRm.openEnd().close("span"); // close the <img>/<span> element
+		if (bIsImageMode) {
+			oRm.voidEnd();
+		} else if (bIsSvgMode) {
+			oRm.openEnd();
+			this._renderSvg(oRm, oImage);
+			oRm.close("div");
+		} else {
+			oRm.openEnd().close("span");
+		}
 
 		if (oLightBox) {
 			oRm.close("span");
 		}
 	};
 
+	ImageRenderer._renderSvg = function(oRm, oImage) {
+		var oSvg = oImage._getSvgCachedData(),
+			oChildren;
+
+		if (!oSvg) {
+			return;
+		}
+
+		oChildren = oSvg.children;
+		this._renderSvgChildren(oRm, oChildren, oImage);
+	};
+
+	ImageRenderer._renderSvgAttributes = function (oRm, aAttributes, oImage) {
+		for (var i = 0; i < aAttributes.length; i++) {
+			var oAttr = aAttributes[i],
+				iNamespaceIndex = oAttr.name.indexOf(":"),
+				sAttributeName = iNamespaceIndex < 0 ? oAttr.name : oAttr.name.slice(iNamespaceIndex + 1);
+
+			if (sAttributeName === "href" && !oImage._isHrefValid(oAttr.value)) {
+				continue;
+			}
+
+			oRm.attr(sAttributeName, oAttr.value);
+		}
+	};
+
+	ImageRenderer._renderSvgChildren = function (oRm, oChildren, oImage) {
+		var aChildren = [].slice.call(oChildren).filter(function (oChild) {
+			return (oChild.nodeType !== Node.TEXT_NODE)
+				// Do not return empty textContent -> line spaces/endings
+				|| (oChild.nodeType === Node.TEXT_NODE && oChild.textContent.trim() !== "");
+		});
+
+		aChildren.forEach(function (oChild) {
+			var sTagName = oChild.tagName,
+				aAttributes = oChild.attributes,
+				oChildren = oChild.childNodes;
+
+			if (oChild.nodeType !== Node.TEXT_NODE) {
+				oRm.openStart(sTagName);
+				this._renderSvgAttributes(oRm, aAttributes, oImage);
+				oRm.openEnd();
+
+				oChildren.length && this._renderSvgChildren(oRm, oChildren, oImage);
+				oRm.close(sTagName);
+
+			} else {
+				oChild.textContent.length && oRm.text(oChild.textContent.trim());
+			}
+		}, this);
+	};
+
 	return ImageRenderer;
 }, /* bExport= */ true);

package/src/sap/m/Input.js

@@ -8,6 +8,9 @@
 sap.ui.define([
 	'./InputBase',
 	'sap/ui/core/Item',
+	'sap/ui/core/Core',
+	'sap/ui/core/LabelEnablement',
+	'sap/ui/core/AccessKeysEnablement',
 	'./ColumnListItem',
 	'./GroupHeaderListItem',
 	'sap/ui/core/SeparatorItem',
@@ -40,6 +43,9 @@ sap.ui.define([
 function(
 	InputBase,
 	Item,
+	Core,
+	LabelEnablement,
+	AccessKeysEnablement,
 	ColumnListItem,
 	GroupHeaderListItem,
 	SeparatorItem,
@@ -149,8 +155,9 @@ function(
 	 * </ul>
 	 *
 	 * @extends sap.m.InputBase
+	 * @implements sap.ui.core.IAccessKeySupport
 	 * @author SAP SE
-	 * @version 1.103.1
+	 * @version 1.106.0
 	 *
 	 * @constructor
 	 * @public
@@ -159,7 +166,9 @@ function(
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var Input = InputBase.extend("sap.m.Input", /** @lends sap.m.Input.prototype */ { metadata : {
-
+		interfaces : [
+			"sap.ui.core.IAccessKeySupport"
+		],
 		library : "sap.m",
 		properties : {
 
@@ -178,6 +187,8 @@ function(
 			 * Maximum number of characters. Value '0' means the feature is switched off.
 			 * This parameter is not compatible with the input type <code>sap.m.InputType.Number</code>.
 			 * If the input type is set to <code>Number</code>, the <code>maxLength</code> value is ignored.
+			 * If the <code>maxLength</code> is set after there is already a longer value, this value will not get truncated.
+			 * The <code>maxLength</code> property has effect only when the value is modified by user interaction.
 			 */
 			maxLength : {type : "int", group : "Behavior", defaultValue : 0},
 
@@ -326,7 +337,23 @@ function(
 			 * Specifies whether to display separators in tabular suggestions.
 			 * @private
 			 */
-			separateSuggestions: { type: "boolean", defaultValue: false, visibility: "hidden" }
+			separateSuggestions: { type: "boolean", defaultValue: false, visibility: "hidden" },
+
+			/**
+			 * Indicates whether the access keys ref of the control should be highlighted.
+			 * NOTE: this property is used only when access keys feature is turned on.
+			 *
+			 * @private
+			 */
+			highlightAccKeysRef: { type: "boolean", defaultValue: false, visibility: "hidden" },
+
+			/**
+			 * Indicates which keyboard key should be pressed to focus the access key ref
+			 * NOTE: this property is used only when access keys feature is turned on.
+			 *
+			 * @private
+			 */
+			accesskey: { type: "string", defaultValue: "", visibility: "hidden" }
 		},
 		defaultAggregation : "suggestionItems",
 		aggregations : {
@@ -398,7 +425,7 @@ function(
 			/**
 			 * Fired when the value of the input is changed by user interaction - each keystroke, delete, paste, etc.
 			 *
-			 * <b>Note:</b> Browsing autocomplete suggestions does not fires the event.
+			 * <b>Note:</b> Browsing autocomplete suggestions does not fire the event.
 			 */
 			liveChange : {
 				parameters : {
@@ -588,6 +615,28 @@ function(
 		// indicates whether input's popover has finished opening
 		// we asume that after open its content has been rendered => we don't have the power user scenario
 		this._bAfterOpenFinisihed = false;
+
+		AccessKeysEnablement.registerControl(this);
+	};
+
+	var setRefLabelsHighlightAccKeysRef = function (bHighlightAccKeysRef) {
+		var aRefLabels = LabelEnablement.getReferencingLabels(this);
+
+		aRefLabels.forEach(function(sLabelId) {
+			Core.byId(sLabelId).setProperty("highlightAccKeysRef", bHighlightAccKeysRef);
+		}, this);
+	};
+
+	Input.prototype.getAccessKeysFocusTarget = function () {
+		return this.getFocusDomRef();
+	};
+
+	Input.prototype.onAccKeysHighlightStart = function () {
+		setRefLabelsHighlightAccKeysRef.call(this, true);
+	};
+
+	Input.prototype.onAccKeysHighlightEnd = function () {
+		setRefLabelsHighlightAccKeysRef.call(this, false);
 	};
 
 	/**
@@ -1327,9 +1376,6 @@ function(
 	 * @returns {this} this Input instance for chaining.
 	 */
 	Input.prototype._doSelect = function(iStart, iEnd) {
-		if (Device.support.touch) {
-			return this;
-		}
 		var oDomRef = this._$input[0];
 		if (oDomRef) {
 			// if no Dom-Ref - no selection (Maybe popup closed)
@@ -2139,6 +2185,11 @@ function(
 	Input.prototype._handleTypeAhead = function (oInput) {
 		var sValue = this.getValue();
 
+		// check if typeahead is already performed
+		if ((oInput && oInput.getValue().toLowerCase()) === (this._sProposedItemText && this._sProposedItemText.toLowerCase())) {
+			return;
+		}
+
 		this._setTypedInValue(sValue);
 		oInput._sProposedItemText = null;
 
@@ -2860,6 +2911,10 @@ function(
 			this._updateSuggestionsPopoverValueState();
 		}, this);
 
+		oPopover.attachAfterOpen(function () {
+			this._handleTypeAhead(this);
+		}, this);
+
 		if (this.isMobileDevice()) {
 			oPopover
 				.attachBeforeClose(function () {