From 2f24d576cbf770c5df79148cec73f2efcdbd9a0c Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 20 Mar 2025 09:03:22 +0100
Subject: [PATCH 1/2] fix(ObjectStatus): use `IconMode.Decorative` instead of
 `aria-hidden`

---
 .../ObjectStatus/ObjectStatus.stories.tsx           |  5 +++--
 packages/main/src/components/ObjectStatus/index.tsx | 13 ++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
index c3dd95eadd6..f4ab7846db4 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import cancelIcon from '@ui5/webcomponents-icons/dist/sys-cancel.js';
 import { Icon, IndicationColor, Label } from '../..';
@@ -55,11 +56,11 @@ export const WithDefaultIcons: Story = {
 };
 
 export const WithCustomIcon: Story = {
-  args: { icon: <Icon name={cancelIcon} /> }
+  args: { icon: <Icon name={cancelIcon} mode={IconMode.Decorative} /> }
 };
 
 export const WithIconOnly: Story = {
-  args: { icon: <Icon name={cancelIcon} />, children: null }
+  args: { icon: <Icon name={cancelIcon} mode={IconMode.Decorative} />, children: null }
 };
 
 export const InvertedObjectStatus: Story = {
diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx
index 74c16b6c132..ed081132e0b 100644
--- a/packages/main/src/components/ObjectStatus/index.tsx
+++ b/packages/main/src/components/ObjectStatus/index.tsx
@@ -6,6 +6,7 @@ import {
   VALUE_STATE_SUCCESS,
   VALUE_STATE_WARNING
 } from '@ui5/webcomponents/dist/generated/i18n/i18n-defaults.js';
+import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import alertIcon from '@ui5/webcomponents-icons/dist/alert.js';
 import errorIcon from '@ui5/webcomponents-icons/dist/error.js';
@@ -40,7 +41,7 @@ export interface ObjectStatusPropTypes extends CommonProps {
   /**
    * Defines the icon in front of the `ObjectStatus` text.
    *
-   * __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use `Icon` in order to preserve the intended design.
+   * __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use the `Icon` component with `mode="Decorative"` in order to preserve the intended design.
    */
   icon?: ReactNode;
 
@@ -117,7 +118,7 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe
     switch (state) {
       case ValueState.Negative:
         if (renderDefaultIcon) {
-          icon = <Icon name={errorIcon} data-component-name="ObjectStatusDefaultIcon" aria-hidden />;
+          icon = <Icon name={errorIcon} data-component-name="ObjectStatusDefaultIcon" mode={IconMode.Decorative} />;
         }
         if (!invisibleText) {
           invisibleText = errorStateText;
@@ -125,7 +126,7 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe
         break;
       case ValueState.Positive:
         if (renderDefaultIcon) {
-          icon = <Icon name={successIcon} data-component-name="ObjectStatusDefaultIcon" aria-hidden />;
+          icon = <Icon name={successIcon} data-component-name="ObjectStatusDefaultIcon" mode={IconMode.Decorative} />;
         }
         if (!invisibleText) {
           invisibleText = successStateText;
@@ -133,7 +134,7 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe
         break;
       case ValueState.Critical:
         if (renderDefaultIcon) {
-          icon = <Icon name={alertIcon} data-component-name="ObjectStatusDefaultIcon" aria-hidden />;
+          icon = <Icon name={alertIcon} data-component-name="ObjectStatusDefaultIcon" mode={IconMode.Decorative} />;
         }
         if (!invisibleText) {
           invisibleText = warningStateText;
@@ -141,7 +142,9 @@ const getStateSpecifics = (state, showDefaultIcon, userIcon, stateAnnouncementTe
         break;
       case ValueState.Information:
         if (renderDefaultIcon) {
-          icon = <Icon name={informationIcon} data-component-name="ObjectStatusDefaultIcon" aria-hidden />;
+          icon = (
+            <Icon name={informationIcon} data-component-name="ObjectStatusDefaultIcon" mode={IconMode.Decorative} />
+          );
         }
         if (!invisibleText) {
           invisibleText = informationStateText;

From cc8b80f6771d1644024ac18ba8eefc7f25699524 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 20 Mar 2025 09:13:22 +0100
Subject: [PATCH 2/2] Update ObjectStatus.stories.tsx

---
 .../main/src/components/ObjectStatus/ObjectStatus.stories.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
index f4ab7846db4..224145f0baa 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.stories.tsx
@@ -60,7 +60,7 @@ export const WithCustomIcon: Story = {
 };
 
 export const WithIconOnly: Story = {
-  args: { icon: <Icon name={cancelIcon} mode={IconMode.Decorative} />, children: null }
+  args: { icon: <Icon name={cancelIcon} mode={IconMode.Decorative} />, children: null, title: 'Cancel' }
 };
 
 export const InvertedObjectStatus: Story = {