From 5492e56c51c632402ddfd0665a6f848ac68d131e Mon Sep 17 00:00:00 2001
From: Dobrin Dimchev <dobrin.dimchev@sap.com>
Date: Thu, 23 Sep 2021 13:43:39 +0300
Subject: [PATCH] fix(ui5-icon): decorative icons now have aria-hidden=true

By design, decorative icons (role=presentation) should also have aria-hidden=true

Fixes: #3954
---
 packages/main/src/Icon.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js
index 80e84b517bba..f9222e84a7a9 100644
--- a/packages/main/src/Icon.js
+++ b/packages/main/src/Icon.js
@@ -12,6 +12,7 @@ import IconTemplate from "./generated/templates/IconTemplate.lit.js";
 import iconCss from "./generated/themes/Icon.css.js";
 
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
+const PRESENTATION_ROLE = "presentation";
 
 /**
  * @public
@@ -97,6 +98,7 @@ const metadata = {
 
 		/**
 		 * 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
 		 */
@@ -267,6 +269,10 @@ class Icon extends UI5Element {
 
 	get effectiveAriaHidden() {
 		if (this.ariaHidden === "") {
+			if (this.isDecorative) {
+				return true;
+			}
+
 			return;
 		}
 
@@ -277,6 +283,10 @@ class Icon extends UI5Element {
 		return this.interactive ? "0" : "-1";
 	}
 
+	get isDecorative() {
+		return this.effectiveAccessibleRole === PRESENTATION_ROLE;
+	}
+
 	get effectiveAccessibleRole() {
 		if (this.role) {
 			return this.role;
@@ -286,7 +296,7 @@ class Icon extends UI5Element {
 			return "button";
 		}
 
-		return this.effectiveAccessibleName ? "img" : "presentation";
+		return this.effectiveAccessibleName ? "img" : PRESENTATION_ROLE;
 	}
 
 	static createGlobalStyle() {