feat(ui5-icon): add accessibility role (#3407)

Author: nnaydenow

packages/main/src/Icon.hbs

@@ -3,7 +3,7 @@
 	tabindex="{{tabIndex}}"
 	dir="{{_dir}}"
 	viewBox="0 0 512 512"
-	role="{{role}}"
+	role="{{effectiveAccessibleRole}}"
 	focusable="false"
 	preserveAspectRatio="xMidYMid meet"
 	aria-label="{{effectiveAccessibleName}}"

packages/main/src/Icon.js

@@ -85,6 +85,16 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the accessibility role of the component.
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		role: {
+			type: String,
+		},
+
 		/**
 		 * @private
 		 */
@@ -251,7 +261,11 @@ class Icon extends UI5Element {
 		return this.interactive ? "0" : "-1";
 	}
 
-	get role() {
+	get effectiveAccessibleRole() {
+		if (this.role) {
+			return this.role;
+		}
+
 		if (this.interactive) {
 			return "button";
 		}