@ui5/webcomponents 0.0.0-4180fe799 → 0.0.0-453158269

package/src/DatePicker.hbs

@@ -2,7 +2,7 @@
 		class="ui5-date-picker-root"
 		style="{{styles.main}}"
 >
-	<!-- INPUT -->
+	{{! INPUT}}
 	<ui5-input
 			id="{{_id}}-inner"
 			class="ui5-date-picker-input"
@@ -35,7 +35,6 @@
 				@click="{{togglePicker}}"
 				input-icon
 				?pressed="{{_isPickerOpen}}"
-				dir="{{effectiveDir}}"
 			></ui5-icon>
 		{{/unless}}
 	</ui5-input>

package/src/DatePicker.js

@@ -14,10 +14,12 @@ import {
 	isPageDownShiftCtrl,
 	isShow,
 	isF4,
+	isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
+import HasPopup from "./types/HasPopup.js";
 import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_DESCRIPTION, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js";
 import DateComponentBase from "./DateComponentBase.js";
 import Icon from "./Icon.js";
@@ -168,7 +170,7 @@ const metadata = {
 		/**
 		 * Defines the aria-label attribute for the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -179,7 +181,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -242,8 +244,8 @@ const metadata = {
 		 * @event
 		 * @allowPreventDefault
 		 * @public
-		 * @param {String} value The submitted value.
-		 * @param {Boolean} valid Indicator if the value is in correct format pattern and in valid range.
+		 * @param {string} value The submitted value.
+		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		change: {
 			details: {
@@ -262,8 +264,8 @@ const metadata = {
 		 * @event
 		 * @allowPreventDefault
 		 * @public
-		 * @param {String} value The submitted value.
-		 * @param {Boolean} valid Indicator if the value is in correct format pattern and in valid range.
+		 * @param {string} value The submitted value.
+		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		input: {
 			details: {
@@ -319,8 +321,8 @@ const metadata = {
  * use TAB to reach the buttons for changing month and year.
  * <br>
  *
- * If the <code>ui5-date-picker</code> is focused and the picker dialog is not opened the user can
- * increment or decrement the corresponding field of the JS date object referenced by <code>dateValue</code> propery
+ * If the <code>ui5-date-picker</code> input field is focused and its corresponding picker dialog is not opened,
+ * then users can increment or decrement the date referenced by <code>dateValue</code> property
  * by using the following shortcuts:
  * <br>
  * <ul>
@@ -387,6 +389,12 @@ class DatePicker extends DateComponentBase {
 		return [ResponsivePopoverCommonCss, datePickerPopoverCss];
 	}
 
+	constructor() {
+		super();
+
+		this.FormSupport = undefined;
+	}
+
 	/**
 	 * @protected
 	 */
@@ -400,6 +408,8 @@ class DatePicker extends DateComponentBase {
 	}
 
 	onBeforeRendering() {
+		this.FormSupport = getFeature("FormSupport");
+
 		["minDate", "maxDate"].forEach(prop => {
 			if (this[prop] && !this.isValid(this[prop])) {
 				console.warn(`Invalid value for property "${prop}": ${this[prop]} is not compatible with the configured format pattern: "${this._displayFormat}"`); // eslint-disable-line
@@ -413,6 +423,7 @@ class DatePicker extends DateComponentBase {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
 
+		this.value = this.normalizeValue(this.value) || this.value;
 		this.liveValue = this.value;
 	}
 
@@ -469,7 +480,11 @@ class DatePicker extends DateComponentBase {
 			return;
 		}
 
-		if (isPageUpShiftCtrl(event)) {
+		if (isEnter(event)) {
+			if (this.FormSupport) {
+				this.FormSupport.triggerFormSubmit(this);
+			}
+		} else if (isPageUpShiftCtrl(event)) {
 			event.preventDefault();
 			this._modifyDateValue(1, "year");
 		} else if (isPageUpShift(event)) {
@@ -527,6 +542,9 @@ class DatePicker extends DateComponentBase {
 		}
 
 		if (updateValue) {
+			this._getInput().getInputDOMRef().then(innnerInput => {
+				innnerInput.value = value;
+			});
 			this.value = value;
 			this._updateValueState(); // Change the value state to Error/None, but only if needed
 		}
@@ -592,6 +610,7 @@ class DatePicker extends DateComponentBase {
 	/**
 	 * Checks if a value is valid against the current date format of the DatePicker.
 	 * @param {string} value A value to be tested against the current date format
+	 * @returns {boolean}
 	 * @public
 	 */
 	isValid(value = "") {
@@ -663,11 +682,8 @@ class DatePicker extends DateComponentBase {
 	get accInfo() {
 		return {
 			"ariaRoledescription": this.dateAriaDescription,
-			"ariaHasPopup": "true",
+			"ariaHasPopup": HasPopup.Grid,
 			"ariaAutoComplete": "none",
-			"role": "combobox",
-			"ariaControls": `${this._id}-responsive-popover`,
-			"ariaExpanded": this.isOpen(),
 			"ariaRequired": this.required,
 			"ariaLabel": getEffectiveAriaLabelText(this),
 		};

package/src/DatePickerPopover.hbs

@@ -1,12 +1,10 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
 	allow-target-overlap
-	stay-open-on-scroll
 	placement-type="Bottom"
 	horizontal-align="Left"
 	?disable-scrolling="{{_isIE}}"
 	hide-arrow
-	with-padding
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"

package/src/DateRangePicker.js

@@ -84,6 +84,33 @@ class DateRangePicker extends DatePicker {
 		return [DatePicker.styles, DateRangePickerCss];
 	}
 
+	constructor() {
+		super();
+		this._prevDelimiter = null;
+	}
+
+	/**
+	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
+	 *
+	 * @readonly
+	 * @type { Date }
+	 * @public
+	 */
+	get dateValue() {
+		return null;
+	}
+
+	/**
+	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
+	 *
+	 * @readonly
+	 * @type { Date }
+	 * @public
+	 */
+	get dateValueUTC() {
+		return null;
+	}
+
 	get _startDateTimestamp() {
 		return this._extractFirstTimestamp(this.value);
 	}
@@ -265,7 +292,7 @@ class DateRangePicker extends DatePicker {
 
 	_splitValueByDelimiter(value) {
 		const valuesArray = [];
-		const partsArray = value.split(this._effectiveDelimiter);
+		const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
 
 		valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
 		valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
@@ -308,6 +335,7 @@ class DateRangePicker extends DatePicker {
 	 * @private
 	 */
 	_buildValue(firstDateTimestamp, lastDateTimestamp) {
+		this._prevDelimiter = this._effectiveDelimiter;
 		if (firstDateTimestamp) {
 			const firstDateString = this._getStringFromTimestamp(firstDateTimestamp * 1000);
 

package/src/DateTimePicker.js

@@ -234,6 +234,9 @@ class DateTimePicker extends DatePicker {
 				"ui5-dt-cal--hidden": this.phone && this.showTimeView,
 				"ui5-dt-time--hidden": this.phone && this.showDateView,
 			},
+			footer: {
+				"ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView),
+			},
 		};
 	}
 

package/src/DateTimePickerPopover.hbs

@@ -18,6 +18,7 @@
 			class="ui5-dt-cal {{classes.dateTimeView}}"
 			id="{{_id}}-calendar"
 			primary-calendar-type="{{_primaryCalendarType}}"
+			secondary-calendar-type="{{secondaryCalendarType}}"
 			format-pattern="{{_formatPattern}}"
 			timestamp="{{_calendarTimestamp}}"
 			.selectionMode="{{_calendarSelectionMode}}"
@@ -44,6 +45,7 @@
 				value="{{_timeSelectionValue}}"
 				format-pattern="{{_formatPattern}}"
 				._currentSlider="{{_currentTimeSlider}}"
+				._calendarType="{{_primaryCalendarType}}"
 				@ui5-change="{{onTimeSelectionChange}}"
 				@ui5-slider-change="{{onTimeSliderChange}}"
 		></ui5-time-selection>
@@ -51,7 +53,7 @@
 {{/inline}}
 
 {{#*inline "footer"}}
-	<div slot="footer" class="ui5-dt-picker-footer">
+	<div slot="footer" class="ui5-dt-picker-footer {{classes.footer}}">
 		<ui5-button
 			id="ok"
 			class="ui5-dt-picker-action"

package/src/Dialog.hbs

@@ -7,7 +7,8 @@
 			id="ui5-popup-header"
 			tabindex="{{_headerTabIndex}}"
 			@keydown="{{_onDragOrResizeKeyDown}}"
-			@mousedown="{{_onDragMouseDown}}">
+			@mousedown="{{_onDragMouseDown}}"
+			part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
@@ -19,14 +20,13 @@
 
 {{#*inline "afterContent"}}
 	{{#if footer.length }}
-		<footer class="ui5-popup-footer-root">
+		<footer class="ui5-popup-footer-root" part="footer">
 			<slot name="footer"></slot>
 		</footer>
 	{{/if}}
-	{{#if resizable}}
+	{{#if _showResizeHandle }}
 		<ui5-icon
 			name="resize-corner"
-			dir="{{effectiveDir}}"
 			class="ui5-popup-resize-handle"
 			@mousedown="{{_onResizeMouseDown}}">
 		</ui5-icon>

package/src/Dialog.js

@@ -66,17 +66,6 @@ const metadata = {
 			type: String,
 		},
 
-		/**
-		 * Sets the accessible aria name of the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		accessibleName: {
-			type: String,
-		},
-
 		/**
 		 * Determines whether the component should be stretched to fullscreen.
 		 * <br><br>
@@ -162,6 +151,17 @@ const metadata = {
  * The <code>stretch</code> property can be used to stretch the
  * <code>ui5-dialog</code> on full screen.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-dialog</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the header of the component</li>
+ * <li>content - Used to style the content of the component</li>
+ * <li>footer - Used to style the footer of the component</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Dialog";</code>
@@ -237,23 +237,13 @@ class Dialog extends Popup {
 	get _ariaLabelledBy() { // Required by Popup.js
 		let ariaLabelledById;
 
-		if (this.headerText !== "" && !this.accessibleName) {
+		if (this.headerText !== "" && !this._ariaLabel) {
 			ariaLabelledById = "ui5-popup-header-text";
 		}
 
 		return ariaLabelledById;
 	}
 
-	get _ariaLabel() {
-		let ariaLabel;
-
-		if (this.header.length > 0 && !!this.accessibleName) {
-			ariaLabel = this.accessibleName;
-		}
-
-		return this.accessibleName ? this.accessibleName : ariaLabel;
-	}
-
 	get _ariaModal() { // Required by Popup.js
 		return true;
 	}
@@ -277,6 +267,10 @@ class Dialog extends Popup {
 		return this._movable ? "0" : undefined;
 	}
 
+	get _showResizeHandle() {
+		return this.resizable && this.onDesktop;
+	}
+
 	_show() {
 		super._show();
 		this._center();
@@ -286,10 +280,18 @@ class Dialog extends Popup {
 		this._isRTL = this.effectiveDir === "rtl";
 		this.onPhone = isPhone();
 		this.onDesktop = isDesktop();
-		this._detachResizeHandlers();
 	}
 
 	onAfterRendering() {
+		if (!this.isOpen() && this.open) {
+			this.show();
+		} else if (this.isOpen() && !this.open) {
+			this.close();
+		}
+	}
+
+	onEnterDOM() {
+		super.onEnterDOM();
 		this._attachResizeHandlers();
 	}
 
@@ -298,15 +300,26 @@ class Dialog extends Popup {
 		this._detachResizeHandlers();
 	}
 
+	/**
+	 * @override
+	 */
+	_resize() {
+		super._resize();
+
+		if (this._resizeHandlersAttached) {
+			this._center();
+		}
+	}
+
 	_attachResizeHandlers() {
-		ResizeHandler.register(this, this._screenResizeHandler);
-		ResizeHandler.register(document.body, this._screenResizeHandler);
-		this._resizeHandlersAttached = true;
+		if (!this._resizeHandlersAttached) {
+			ResizeHandler.register(document.body, this._screenResizeHandler);
+			this._resizeHandlersAttached = true;
+		}
 	}
 
 	_detachResizeHandlers() {
 		if (this._resizeHandlersAttached) {
-			ResizeHandler.deregister(this, this._screenResizeHandler);
 			ResizeHandler.deregister(document.body, this._screenResizeHandler);
 			this._resizeHandlersAttached = false;
 		}

package/src/FileUploader.js

@@ -15,6 +15,7 @@ import {
 
 import Input from "./Input.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 
 // Template
 import FileUploaderTemplate from "./generated/templates/FileUploaderTemplate.lit.js";
@@ -263,9 +264,7 @@ class FileUploader extends UI5Element {
 
 	constructor() {
 		super();
-		if (this._canUseNativeFormSupport) {
-			this._internals = this.attachInternals();
-		}
+		this._internals = this.attachInternals && this.attachInternals();
 	}
 
 	_onmouseover() {
@@ -427,7 +426,7 @@ class FileUploader extends UI5Element {
 	}
 
 	get _canUseNativeFormSupport() {
-		return !!this.attachInternals;
+		return this._internals && this._internals.setFormValue;
 	}
 
 	get _keepInputInShadowDOM() {
@@ -519,7 +518,7 @@ class FileUploader extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [Input, Popover];
+		return [Input, Popover, Icon];
 	}
 
 	static async onDefine() {

package/src/FileUploaderPopover.hbs

@@ -2,14 +2,15 @@
 	skip-registry-update
 	_disable-initial-focus
 	prevent-focus-restore
-	no-padding
 	hide-arrow
 	class="ui5-valuestatemessage-popover"
 	placement-type="Bottom"
 	horizontal-align="Left"
 >
 	<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
-		<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+		{{#if _valueStateMessageInputIcon}}
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+		{{/if}}
 		{{> valueStateMessage}}
 	</div>
 </ui5-popover>

package/src/Filters.js

@@ -0,0 +1,28 @@
+const escapeReg = /[[\]{}()*+?.\\^$|]/g;
+
+const escapeRegExp = str => {
+	return str.replace(escapeReg, "\\$&");
+};
+
+const StartsWithPerTerm = (value, items, propName) => {
+	const reg = new RegExp(`(^|\\s)${escapeRegExp(value.toLowerCase())}.*`, "g");
+
+	return items.filter(item => {
+		const text = item[propName];
+
+		reg.lastIndex = 0;
+
+		return reg.test(text.toLowerCase());
+	});
+};
+
+const StartsWith = (value, items, propName) => items.filter(item => item[propName].toLowerCase().startsWith(value.toLowerCase()));
+const Contains = (value, items, propName) => items.filter(item => item[propName].toLowerCase().includes(value.toLowerCase()));
+const None = (_, items) => items;
+
+export {
+	StartsWithPerTerm,
+	StartsWith,
+	Contains,
+	None,
+};

package/src/Icon.js

@@ -37,7 +37,9 @@ const metadata = {
 		 * <br>
 		 *
 		 * To browse all available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Icons</ui5-link>,
+		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">SAP Fiori Tools</ui5-link> and
+		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Business Suite</ui5-link> collections.
 		 * <br>
 		 *
 		 * Example:
@@ -52,6 +54,15 @@ const metadata = {
 		 * Example:
 		 * <br>
 		 * <code>name='tnt/antenna'</code>, <code>name='tnt/actor'</code>, <code>name='tnt/api'</code>.
+		 * <br><br>
+		 *
+		 * <b>Note:</b> To use the SAP Business Suite icons,
+		 * you need to set the <code>business-suite</code> prefix in front of the icon's name.
+		 * <br>
+		 *
+		 * Example:
+		 * <br>
+		 * <code>name='business-suite/3d'</code>, <code>name='business-suite/1x2-grid-layout'</code>, <code>name='business-suite/4x4-grid-layout'</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -88,11 +99,12 @@ const metadata = {
 
 		/**
 		 * Defines the accessibility role of the component.
+		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.15
+		 * @public
+		 * @since 1.1.0
 		 */
-		role: {
+		accessibleRole: {
 			type: String,
 		},
 
@@ -161,30 +173,78 @@ const metadata = {
  *
  * The <code>ui5-icon</code> component represents an SVG icon.
  * There are two main scenarios how the <code>ui5-icon</code> component is used:
- * as a purely decorative element; or as a visually appealing clickable area in the form of an icon button.
+ * as a purely decorative element, <br>
+ * or as an interactive element that can be focused and clicked.
+ *
+ * <h3>Usage</h3>
+ *
+ * 1. <b>Get familiar with the icons collections.</b>
+ * <br>
+ * Before displaying an icon, you need to explore the icons collections to find and import the desired icon.
+ * <br>
+ * Currently there are 3 icons collection, available as 3 npm packages:
+ * <br>
+ *
+ * <ul>
+ * <li>
+ * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons" class="api-table-content-cell-link">@ui5/webcomponents-icons</ui5-link> represents the "SAP-icons" collection and includes the following
+ * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons" class="api-table-content-cell-link">icons</ui5-link>.
+ * </li>
+ * <li>
+ * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt" class="api-table-content-cell-link">@ui5/webcomponents-icons-tnt</ui5-link> represents the "tnt" collection and includes the following
+ * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">icons</ui5-link>.
+ * </li>
+ * <li>
+ * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite" class="api-table-content-cell-link">@ui5/webcomponents-icons-icons-business-suite</ui5-link> represents the "business-suite" collection and includes the following
+ * <ui5-link target="_blank" href="https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols" class="api-table-content-cell-link">icons</ui5-link>.
+ * </li>
+ * </ul>
+ *
+ * 2. <b>After exploring the icons collections, add one or more of the packages as dependencies to your project.</b>
+ * <br>
+ * <code>npm i @ui5/webcomponents-icons</code><br>
+ * <code>npm i @ui5/webcomponents-icons-tnt</code><br>
+ * <code>npm i @ui5/webcomponents-icons-business-suite</code>
  * <br><br>
- * A large set of built-in icons is available
- * and they can be used by setting the <code>name</code> property on the <code>ui5-icon</code>.
- * But before using an icon, you need to import the desired icon.
+ *
+ * 3. <b>Then, import the desired icon</b>.
  * <br>
+ * <code>import "@ui5/{package_name}/dist/{icon_name}.js";</code>
+ * <br><br>
  *
- * For the standard icon collection, you have to import an icon from the <code>@ui5/webcomponents-icons</code> package:
+ * <b>For Example</b>:
  * <br>
- * <code>import "@ui5/webcomponents-icons/dist/employee.js";</code>
+ *
+ * For the standard "SAP-icons" icon collection, import an icon from the <code>@ui5/webcomponents-icons</code> package:
  * <br>
+ * <code>import "@ui5/webcomponents-icons/dist/employee.js";</code>
+ * <br><br>
  *
- * For the SAP Fiori Tools icon collection (supported since 1.0.0-rc.10), you have to import an icon from the <code>@ui5/webcomponents-icons-tnt</code> package:
+ * For the "tnt" (SAP Fiori Tools) icon collection, import an icon from the <code>@ui5/webcomponents-icons-tnt</code> package:
  * <br>
  * <code>import "@ui5/webcomponents-icons-tnt/dist/antenna.js";</code>
+ * <br><br>
  *
+ * For the "business-suite" (SAP Business Suite) icon collection, import an icon from the <code>@ui5/webcomponents-icons-business-suite</code> package:
+ * <br>
+ * <code>import "@ui5/webcomponents-icons-business-suite/dist/ab-testing.js";</code>
  * <br><br>
+ *
+ * 4. <b>Display the icon using the <code>ui5-icon</code> web component.</b><br>
+ * Set the icon collection ("SAP-icons", "tnt" or "business-suite" - "SAP-icons" is the default icon collection and can be skipped)<br>
+ * and the icon name to the <code>name</code> property.
+ * <br><br>
+ *
+ * <code>&lt;ui5-icon name="employee">&lt;/ui5-icon></code><br>
+ * <code>&lt;ui5-icon name="tnt/antenna">&lt;/ui5-icon></code><br>
+ * <code>&lt;ui5-icon name="business-suite/ab-testing">&lt;/ui5-icon></code>
+ *
  * <h3>Keyboard Handling</h3>
  *
  * <ul>
  * <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li>
  * <li>[SHIFT] - If [SPACE] or [ENTER],[RETURN] is pressed, pressing [SHIFT] releases the ui5-icon without triggering the click event.</li>
  * </ul>
- * <br><br>
  *
  * <h3>ES6 Module Import</h3>
  *
@@ -219,13 +279,13 @@ class Icon extends UI5Element {
 		this.createGlobalStyle(); // hide all icons until the first icon has rendered (and added the Icon.css)
 	}
 
-	_onfocusin(event) {
+	_onFocusInHandler(event) {
 		if (this.interactive) {
 			this.focused = true;
 		}
 	}
 
-	_onfocusout(event) {
+	_onFocusOutHandler(event) {
 		this.focused = false;
 	}
 
@@ -255,16 +315,11 @@ class Icon extends UI5Element {
 		this.fireEvent("click");
 	}
 
+	/**
+	* Enforce "ltr" direction, based on the icons collection metadata.
+	*/
 	get _dir() {
-		if (!this.effectiveDir) {
-			return;
-		}
-
-		if (this.ltr) {
-			return "ltr";
-		}
-
-		return this.effectiveDir;
+		return this.ltr ? "ltr" : undefined;
 	}
 
 	get effectiveAriaHidden() {
@@ -280,7 +335,7 @@ class Icon extends UI5Element {
 	}
 
 	get tabIndex() {
-		return this.interactive ? "0" : "-1";
+		return this.interactive ? "0" : undefined;
 	}
 
 	get isDecorative() {
@@ -288,8 +343,8 @@ class Icon extends UI5Element {
 	}
 
 	get effectiveAccessibleRole() {
-		if (this.role) {
-			return this.role;
+		if (this.accessibleRole) {
+			return this.accessibleRole;
 		}
 
 		if (this.interactive) {
@@ -348,6 +403,8 @@ class Icon extends UI5Element {
 		this.packageName = iconData.packageName;
 
 		this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
+		this._onfocusout = this.interactive ? this._onFocusOutHandler.bind(this) : undefined;
+		this._onfocusin = this.interactive ? this._onFocusInHandler.bind(this) : undefined;
 
 		if (this.accessibleName) {
 			this.effectiveAccessibleName = this.accessibleName;