From 4a973105f355f6f78972d7d9003d2a55095df540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Vyhn=C3=A1lek?=
 <jirivyhnalek@microsoft.com>
Date: Thu, 14 Nov 2024 11:33:51 +0100
Subject: [PATCH] List: Fix HC theme in storybook

---
 .../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 e7acedf834836..c9f2f0e32a5d5 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)': {
+      'forced-color-adjust': '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,