From 0c6ef912d4862eaba9197f81dea1f991f00f2e77 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 27 Feb 2025 09:15:08 +0100
Subject: [PATCH] chore(1-3420): wrap strategy list in an ordered list (#9377)

Improves the semantic correctness of the strategy list by wrapping it
in an `ol` tag.

Strategy order matters (due to variant resolution etc), so the order
is important (hence the `ol` instead of a `ul`).

Dragging still works and it's visually the same.
---
 .../EnvironmentAccordionBody.tsx              | 102 ++++++++++--------
 1 file changed, 60 insertions(+), 42 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody.tsx
index 2869c1723e..d2f74dcfd2 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody.tsx
@@ -60,6 +60,12 @@ const AdditionalStrategiesDiv = styled('div')(({ theme }) => ({
     marginBottom: theme.spacing(2),
 }));
 
+const StyledStrategyList = styled('ol')({
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+});
+
 export const EnvironmentAccordionBody = ({
     featureEnvironment,
     isDisabled,
@@ -257,29 +263,33 @@ export const EnvironmentAccordionBody = ({
                                     !manyStrategiesPagination
                                 }
                                 show={
-                                    <>
+                                    <StyledStrategyList>
                                         {strategies.map((strategy, index) => (
-                                            <NewStrategyDraggableItem
-                                                key={strategy.id}
-                                                strategy={strategy}
-                                                index={index}
-                                                environmentName={
-                                                    featureEnvironment.name
-                                                }
-                                                otherEnvironments={
-                                                    otherEnvironments
-                                                }
-                                                isDragging={
-                                                    dragItem?.id === strategy.id
-                                                }
-                                                onDragStartRef={onDragStartRef}
-                                                onDragOver={onDragOver(
-                                                    strategy.id,
-                                                )}
-                                                onDragEnd={onDragEnd}
-                                            />
+                                            <li key={strategy.id}>
+                                                <NewStrategyDraggableItem
+                                                    strategy={strategy}
+                                                    index={index}
+                                                    environmentName={
+                                                        featureEnvironment.name
+                                                    }
+                                                    otherEnvironments={
+                                                        otherEnvironments
+                                                    }
+                                                    isDragging={
+                                                        dragItem?.id ===
+                                                        strategy.id
+                                                    }
+                                                    onDragStartRef={
+                                                        onDragStartRef
+                                                    }
+                                                    onDragOver={onDragOver(
+                                                        strategy.id,
+                                                    )}
+                                                    onDragEnd={onDragEnd}
+                                                />
+                                            </li>
                                         ))}
-                                    </>
+                                    </StyledStrategyList>
                                 }
                                 elseShow={
                                     <>
@@ -291,27 +301,35 @@ export const EnvironmentAccordionBody = ({
                                             segments.
                                         </Alert>
                                         <br />
-                                        {page.map((strategy, index) => (
-                                            <StrategyDraggableItem
-                                                key={strategy.id}
-                                                strategy={strategy}
-                                                index={
-                                                    index + pageIndex * pageSize
-                                                }
-                                                environmentName={
-                                                    featureEnvironment.name
-                                                }
-                                                otherEnvironments={
-                                                    otherEnvironments
-                                                }
-                                                isDragging={false}
-                                                onDragStartRef={
-                                                    (() => {}) as any
-                                                }
-                                                onDragOver={(() => {}) as any}
-                                                onDragEnd={(() => {}) as any}
-                                            />
-                                        ))}
+                                        <StyledStrategyList>
+                                            {page.map((strategy, index) => (
+                                                <li key={strategy.id}>
+                                                    <StrategyDraggableItem
+                                                        strategy={strategy}
+                                                        index={
+                                                            index +
+                                                            pageIndex * pageSize
+                                                        }
+                                                        environmentName={
+                                                            featureEnvironment.name
+                                                        }
+                                                        otherEnvironments={
+                                                            otherEnvironments
+                                                        }
+                                                        isDragging={false}
+                                                        onDragStartRef={
+                                                            (() => {}) as any
+                                                        }
+                                                        onDragOver={
+                                                            (() => {}) as any
+                                                        }
+                                                        onDragEnd={
+                                                            (() => {}) as any
+                                                        }
+                                                    />
+                                                </li>
+                                            ))}
+                                        </StyledStrategyList>
                                         <br />
                                         <Pagination
                                             count={pages.length}