From b8e725be5e9e6bc149b75285c41b4f333a05c1bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Vyhn=C3=A1lek?=
 <jirivyhnalek@microsoft.com>
Date: Wed, 4 Dec 2024 15:51:57 +0100
Subject: [PATCH] List: Fix HC theme in storybook (#33272)

---
 .../stories/src/List/ListActiveElement.stories.tsx     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/react-components/react-list-preview/stories/src/List/ListActiveElement.stories.tsx b/packages/react-components/react-list-preview/stories/src/List/ListActiveElement.stories.tsx
index e7acedf8348364..1ed9c1d973ac32 100644
--- a/packages/react-components/react-list-preview/stories/src/List/ListActiveElement.stories.tsx
+++ b/packages/react-components/react-list-preview/stories/src/List/ListActiveElement.stories.tsx
@@ -39,6 +39,15 @@ const useStyles = makeStyles({
   },
   itemSelected: {
     backgroundColor: tokens.colorSubtleBackgroundSelected,
+    '@media (forced-colors:active)': {
+      background: 'Highlight',
+    },
+  },
+  personaSelected: {
+    '@media (forced-colors:active)': {
+      forcedColorAdjust: 'none',
+      color: 'HighlightText',
+    },
   },
 });
 
@@ -82,6 +91,7 @@ export const ListActiveElement = () => {
               role="gridcell"
               secondaryText="Available"
               presence={{ status: 'available' }}
+              className={mergeClasses(selectedItems.includes(name) && classes.personaSelected)}
               avatar={{
                 image: {
                   src: avatar,