@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/Icon.d.ts

@@ -1,93 +1,78 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import IconDesign from "./types/IconDesign.js";
-import type { IIcon } from "./Interfaces.js";
+import IconMode from "./types/IconMode.js";
+/**
+ * Interface for components that represent an icon, usable in numerous higher-order components
+ * @public
+ */
+interface IIcon extends HTMLElement {
+}
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * 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, <br>
+ * The `ui5-icon` component represents an SVG icon.
+ * There are two main scenarios how the `ui5-icon` component is used:
+ * as a purely decorative element,
  * or as an interactive element that can be focused and clicked.
  *
- * <h3>Usage</h3>
+ * ### Usage
+ *
+ * 1. **Get familiar with the icons collections.**
  *
- * 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">@ui5/webcomponents-icons</ui5-link> represents the "SAP-icons" collection and includes the following
- * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons">icons</ui5-link>.
- * </li>
- * <li>
- * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt">@ui5/webcomponents-icons-tnt</ui5-link> represents the "tnt" collection and includes the following
- * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT">icons</ui5-link>.
- * </li>
- * <li>
- * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite">@ui5/webcomponents-icons-icons-business-suite</ui5-link> represents the "business-suite" collection and includes the following
- * <ui5-link target="_blank" href="https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols">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>
- *
- * 3. <b>Then, import the desired icon</b>.
- * <br>
- * <code>import "@ui5/{package_name}/dist/{icon_name}.js";</code>
- * <br><br>
- *
- * <b>For Example</b>:
- * <br>
- *
- * 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 "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>
- *
- * <br><br>
- * <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>
- *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/Icon.js";</code>
- *
- * @csspart root - Used to style the outermost wrapper of the <code>ui5-icon</code>.
  *
+ * - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the "SAP-icons" collection and includes the following
+ * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).
+ * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the "tnt" collection and includes the following
+ * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).
+ * - [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the "business-suite" collection and includes the following
+ * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).
+ *
+ * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**
+ *
+ * `npm i @ui5/webcomponents-icons`
+ * `npm i @ui5/webcomponents-icons-tnt`
+ * `npm i @ui5/webcomponents-icons-business-suite`
+ *
+ * 3. **Then, import the desired icon**.
+ *
+ * `import "@ui5/\{package_name\}/dist/\{icon_name\}.js";`
+ *
+ * **For Example**:
+ *
+ * For the standard "SAP-icons" icon collection, import an icon from the `@ui5/webcomponents-icons` package:
+ *
+ * `import "@ui5/webcomponents-icons/dist/employee.js";`
+ *
+ * For the "tnt" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:
+ *
+ * `import "@ui5/webcomponents-icons-tnt/dist/antenna.js";`
+ *
+ * For the "business-suite" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:
+ *
+ * `import "@ui5/webcomponents-icons-business-suite/dist/ab-testing.js";`
+ *
+ * 4. **Display the icon using the `ui5-icon` web component.**
+ * Set the icon collection ("SAP-icons", "tnt" or "business-suite" - "SAP-icons" is the default icon collection and can be skipped)
+ * and the icon name to the `name` property.
+ *
+ * `<ui5-icon name="employee"></ui5-icon>`
+ * `<ui5-icon name="tnt/antenna"></ui5-icon>`
+ * `<ui5-icon name="business-suite/ab-testing"></ui5-icon>`
+ *
+ * ### Keyboard Handling
+ *
+ * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.
+ * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Icon.js";`
+ * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.
  * @constructor
  * @extends UI5Element
  * @implements {IIcon}
@@ -96,50 +81,33 @@ import type { IIcon } from "./Interfaces.js";
 declare class Icon extends UI5Element implements IIcon {
     /**
      * Defines the component semantic design.
-     *
      * @default "Default"
      * @public
      * @since 1.9.2
      */
     design: `${IconDesign}`;
-    /**
-     * Defines if the icon is interactive (focusable and pressable)
-     * @default false
-     * @public
-     * @since 1.0.0-rc.8
-     */
-    interactive: boolean;
     /**
      * Defines the unique identifier (icon name) of the component.
-     * <br>
      *
      * To browse all available icons, see the
-     * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">SAP Icons</ui5-link>,
-     * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT">SAP Fiori Tools</ui5-link> and
-     * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">SAP Business Suite</ui5-link> collections.
-     * <br>
+     * [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),
+     * [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and
+     * [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)
      *
      * Example:
-     * <br>
-     * <code>name='add'</code>, <code>name='delete'</code>, <code>name='employee'</code>.
-     * <br><br>
+     * `name='add'`, `name='delete'`, `name='employee'`.
      *
-     * <b>Note:</b> To use the SAP Fiori Tools icons,
-     * you need to set the <code>tnt</code> prefix in front of the icon's name.
-     * <br>
+     * **Note:** To use the SAP Fiori Tools icons,
+     * you need to set the `tnt` prefix in front of the icon's name.
      *
      * Example:
-     * <br>
-     * <code>name='tnt/antenna'</code>, <code>name='tnt/actor'</code>, <code>name='tnt/api'</code>.
-     * <br><br>
+     * `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.
      *
-     * <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>
+     * **Note:** To use the SAP Business Suite icons,
+     * you need to set the `business-suite` prefix in front of the icon's name.
      *
      * Example:
-     * <br>
-     * <code>name='business-suite/3d'</code>, <code>name='business-suite/1x2-grid-layout'</code>, <code>name='business-suite/4x4-grid-layout'</code>.
+     * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.
      * @default ""
      * @public
      */
@@ -147,37 +115,28 @@ declare class Icon extends UI5Element implements IIcon {
     /**
      * Defines the text alternative of the component.
      * If not provided a default text alternative will be set, if present.
-     * <br><br>
-     * <b>Note:</b> Every icon should have a text alternative in order to
-     * calculate its accessible name.
      *
+     * **Note:** Every icon should have a text alternative in order to
+     * calculate its accessible name.
      * @default ""
      * @public
      */
     accessibleName: string;
     /**
      * Defines whether the component should have a tooltip.
-     * <br><br>
-     * <b>Note:</b> The tooltip text should be provided via the <code>accessible-name</code> property.
      *
+     * **Note:** The tooltip text should be provided via the `accessible-name` property.
      * @default false
      * @public
      */
     showTooltip: boolean;
     /**
-     * Defines the accessibility role of the component.
-     * @default ""
+     * Defines the mode of the component.
+     * @default "Image"
      * @public
-     * @since 1.1.0
+     * @since 2.0.0
      */
-    accessibleRole: string;
-    /**
-     * Defines the ARIA hidden state of the component.
-     * Note: If the role is presentation the default value of aria-hidden will be true.
-     * @private
-     * @since 1.0.0-rc.15
-     */
-    ariaHidden: string;
+    mode: `${IconMode}`;
     /**
      * @private
      */
@@ -186,10 +145,6 @@ declare class Icon extends UI5Element implements IIcon {
      * @private
      */
     accData?: I18nText;
-    /**
-     * @private
-     */
-    focused: boolean;
     /**
     * @private
     */
@@ -202,21 +157,18 @@ declare class Icon extends UI5Element implements IIcon {
     packageName?: string;
     viewBox?: string;
     customSvg?: object;
-    _onfocusout?: ((event: FocusEvent) => void);
-    _onfocusin?: ((event: FocusEvent) => void);
-    _onFocusInHandler(): void;
-    _onFocusOutHandler(): void;
     _onkeydown(e: KeyboardEvent): void;
     _onkeyup(e: KeyboardEvent): void;
     /**
     * Enforce "ltr" direction, based on the icons collection metadata.
     */
     get _dir(): "ltr" | undefined;
-    get effectiveAriaHidden(): string | true | undefined;
+    get effectiveAriaHidden(): "true" | undefined;
     get _tabIndex(): "0" | undefined;
-    get isDecorative(): boolean;
-    get effectiveAccessibleRole(): string;
+    get effectiveAccessibleRole(): "button" | "presentation" | "img";
+    onEnterDOM(): void;
     onBeforeRendering(): Promise<void>;
     get hasIconTooltip(): string | false | undefined;
 }
 export default Icon;
+export type { IIcon, };

package/dist/Icon.js

@@ -11,116 +11,88 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import IconTemplate from "./generated/templates/IconTemplate.lit.js";
 import IconDesign from "./types/IconDesign.js";
+import IconMode from "./types/IconMode.js";
 // Styles
 import iconCss from "./generated/themes/Icon.css.js";
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const PRESENTATION_ROLE = "presentation";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * 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, <br>
+ * The `ui5-icon` component represents an SVG icon.
+ * There are two main scenarios how the `ui5-icon` component is used:
+ * as a purely decorative element,
  * or as an interactive element that can be focused and clicked.
  *
- * <h3>Usage</h3>
+ * ### Usage
+ *
+ * 1. **Get familiar with the icons collections.**
  *
- * 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">@ui5/webcomponents-icons</ui5-link> represents the "SAP-icons" collection and includes the following
- * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons">icons</ui5-link>.
- * </li>
- * <li>
- * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt">@ui5/webcomponents-icons-tnt</ui5-link> represents the "tnt" collection and includes the following
- * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT">icons</ui5-link>.
- * </li>
- * <li>
- * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite">@ui5/webcomponents-icons-icons-business-suite</ui5-link> represents the "business-suite" collection and includes the following
- * <ui5-link target="_blank" href="https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols">icons</ui5-link>.
- * </li>
- * </ul>
+ * - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the "SAP-icons" collection and includes the following
+ * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).
+ * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the "tnt" collection and includes the following
+ * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).
+ * - [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the "business-suite" collection and includes the following
+ * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).
+ *
+ * 2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**
+ *
+ * `npm i @ui5/webcomponents-icons`
+ * `npm i @ui5/webcomponents-icons-tnt`
+ * `npm i @ui5/webcomponents-icons-business-suite`
+ *
+ * 3. **Then, import the desired icon**.
  *
- * 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>
+ * `import "@ui5/\{package_name\}/dist/\{icon_name\}.js";`
  *
- * 3. <b>Then, import the desired icon</b>.
- * <br>
- * <code>import "@ui5/{package_name}/dist/{icon_name}.js";</code>
- * <br><br>
+ * **For Example**:
  *
- * <b>For Example</b>:
- * <br>
+ * For the standard "SAP-icons" icon collection, import an icon from the `@ui5/webcomponents-icons` package:
  *
- * 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>
+ * `import "@ui5/webcomponents-icons/dist/employee.js";`
  *
- * 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 "tnt" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:
  *
- * 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>
+ * `import "@ui5/webcomponents-icons-tnt/dist/antenna.js";`
  *
- * 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>
+ * For the "business-suite" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:
  *
- * <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>
+ * `import "@ui5/webcomponents-icons-business-suite/dist/ab-testing.js";`
  *
- * <br><br>
- * <h3>Keyboard Handling</h3>
+ * 4. **Display the icon using the `ui5-icon` web component.**
+ * Set the icon collection ("SAP-icons", "tnt" or "business-suite" - "SAP-icons" is the default icon collection and can be skipped)
+ * and the icon name to the `name` property.
  *
- * <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>
+ * `<ui5-icon name="employee"></ui5-icon>`
+ * `<ui5-icon name="tnt/antenna"></ui5-icon>`
+ * `<ui5-icon name="business-suite/ab-testing"></ui5-icon>`
  *
- * <h3>ES6 Module Import</h3>
+ * ### Keyboard Handling
  *
- * <code>import "@ui5/webcomponents/dist/Icon.js";</code>
+ * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.
+ * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.
  *
- * @csspart root - Used to style the outermost wrapper of the <code>ui5-icon</code>.
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/Icon.js";`
+ * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.
  * @constructor
  * @extends UI5Element
  * @implements {IIcon}
  * @public
  */
 let Icon = class Icon extends UI5Element {
-    _onFocusInHandler() {
-        if (this.interactive) {
-            this.focused = true;
-        }
-    }
-    _onFocusOutHandler() {
-        this.focused = false;
-    }
     _onkeydown(e) {
-        if (!this.interactive) {
+        if (this.mode !== IconMode.Interactive) {
             return;
         }
         if (isEnter(e)) {
@@ -131,7 +103,7 @@ let Icon = class Icon extends UI5Element {
         }
     }
     _onkeyup(e) {
-        if (this.interactive && isSpace(e)) {
+        if (this.mode === IconMode.Interactive && isSpace(e)) {
             this.fireEvent("click");
         }
     }
@@ -142,28 +114,25 @@ let Icon = class Icon extends UI5Element {
         return this.ltr ? "ltr" : undefined;
     }
     get effectiveAriaHidden() {
-        if (this.ariaHidden === "") {
-            if (this.isDecorative) {
-                return true;
-            }
-            return;
-        }
-        return this.ariaHidden;
+        return this.mode === IconMode.Decorative ? "true" : undefined;
     }
     get _tabIndex() {
-        return this.interactive ? "0" : undefined;
-    }
-    get isDecorative() {
-        return this.effectiveAccessibleRole === PRESENTATION_ROLE;
+        return this.mode === IconMode.Interactive ? "0" : undefined;
     }
     get effectiveAccessibleRole() {
-        if (this.accessibleRole) {
-            return this.accessibleRole;
+        switch (this.mode) {
+            case IconMode.Interactive:
+                return "button";
+            case IconMode.Decorative:
+                return "presentation";
+            default:
+                return "img";
         }
-        if (this.interactive) {
-            return "button";
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
         }
-        return this.effectiveAccessibleName ? "img" : PRESENTATION_ROLE;
     }
     async onBeforeRendering() {
         const name = this.name;
@@ -196,8 +165,6 @@ let Icon = class Icon extends UI5Element {
         this.accData = iconData.accData;
         this.ltr = iconData.ltr;
         this.packageName = iconData.packageName;
-        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;
         }
@@ -216,9 +183,6 @@ let Icon = class Icon extends UI5Element {
 __decorate([
     property({ type: IconDesign, defaultValue: IconDesign.Default })
 ], Icon.prototype, "design", void 0);
-__decorate([
-    property({ type: Boolean })
-], Icon.prototype, "interactive", void 0);
 __decorate([
     property()
 ], Icon.prototype, "name", void 0);
@@ -229,20 +193,14 @@ __decorate([
     property({ type: Boolean })
 ], Icon.prototype, "showTooltip", void 0);
 __decorate([
-    property()
-], Icon.prototype, "accessibleRole", void 0);
-__decorate([
-    property()
-], Icon.prototype, "ariaHidden", void 0);
+    property({ type: IconMode, defaultValue: IconMode.Image })
+], Icon.prototype, "mode", void 0);
 __decorate([
     property({ multiple: true })
 ], Icon.prototype, "pathData", void 0);
 __decorate([
     property({ type: Object, defaultValue: undefined, noAttribute: true })
 ], Icon.prototype, "accData", void 0);
-__decorate([
-    property({ type: Boolean })
-], Icon.prototype, "focused", void 0);
 __decorate([
     property({ type: Boolean })
 ], Icon.prototype, "invalid", void 0);
@@ -259,9 +217,9 @@ Icon = __decorate([
         styles: iconCss,
     })
     /**
-     * Fired on mouseup, <code>SPACE</code> and <code>ENTER</code>.
-     * - on mouse click, the icon fires native <code>click</code> event
-     * - on <code>SPACE</code> and <code>ENTER</code>, the icon fires custom <code>click</code> event
+     * Fired on mouseup, `SPACE` and `ENTER`.
+     * - on mouse click, the icon fires native `click` event
+     * - on `SPACE` and `ENTER`, the icon fires custom `click` event
      * @private
      * @since 1.0.0-rc.8
      */