refactor(ui5-illustrated-message): aligned with ACC guidelines (#12743)

-Improved accessibility attributes for screen readers

Author: plamenivanov91

packages/fiori/cypress/specs/IllustratedMessage.cy.tsx

@@ -34,6 +34,40 @@ describe("Accessibility", () => {
 			.should("not.have.attr", "aria-label");
 
 	});
+
+	it("should have role=img and aria-label with illustration name when decorative is false", () => {
+		cy.mount(
+			<IllustratedMessage name="UnableToUpload" decorative={false}>
+			</IllustratedMessage>
+		);
+
+		cy.get("[ui5-illustrated-message]")
+			.shadow()
+			.find(".ui5-illustrated-message-illustration")
+			.should("have.attr", "role", "img");
+
+		cy.get("[ui5-illustrated-message]")
+			.shadow()
+			.find(".ui5-illustrated-message-illustration")
+			.should("have.attr", "aria-label", "UnableToUpload");
+	});
+
+	it("should have role=img and aria-label with illustration name by default (when decorative is not set)", () => {
+		cy.mount(
+			<IllustratedMessage name="NoData">
+			</IllustratedMessage>
+		);
+
+		cy.get("[ui5-illustrated-message]")
+			.shadow()
+			.find(".ui5-illustrated-message-illustration")
+			.should("have.attr", "role", "img");
+
+		cy.get("[ui5-illustrated-message]")
+			.shadow()
+			.find(".ui5-illustrated-message-illustration")
+			.should("have.attr", "aria-label", "NoData");
+	});
 });
 
 describe("design", () => {

packages/fiori/src/IllustratedMessageTemplate.tsx

@@ -5,7 +5,10 @@ export default function IllustratedMessageTemplate(this: IllustratedMessage) {
 	return (
 		<div class="ui5-illustrated-message-root">
 			<div class="ui5-illustrated-message-inner">
-				<div class="ui5-illustrated-message-illustration">
+				<div class="ui5-illustrated-message-illustration"
+					role={this.decorative ? "presentation" : "img"}
+					aria-hidden={this.decorative ? true : undefined}
+					aria-label={!this.decorative ? this.name : undefined}>
 					{renderIllustration.call(this)}
 				</div>
 				<div class="ui5-illustrated-message-text-and-actions-container">