From 2261659d8b2b62850c06016d278c2bb93f730bcf Mon Sep 17 00:00:00 2001
From: MichaelSun48 <michael.sun@sentry.io>
Date: Thu, 17 Oct 2024 14:13:39 -0700
Subject: [PATCH] Fix ul/li semantics

---
 .../draggableTabs/draggableTabList.tsx           | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/static/app/components/draggableTabs/draggableTabList.tsx b/static/app/components/draggableTabs/draggableTabList.tsx
index 7e16132e40deb1..e2f386f6c2df05 100644
--- a/static/app/components/draggableTabs/draggableTabList.tsx
+++ b/static/app/components/draggableTabs/draggableTabList.tsx
@@ -151,7 +151,7 @@ function Tabs({
   tabVariant?: BaseTabProps['variant'];
   value?: string | number;
 }) {
-  const tabListRef = useRef<HTMLUListElement>(null);
+  const tabListRef = useRef<HTMLDivElement>(null);
   const {tabListProps} = useTabList({orientation, ...ariaProps}, state, tabListRef);
 
   const values = useMemo(() => [...state.collection], [state.collection]);
@@ -202,13 +202,7 @@ function Tabs({
 
   return (
     <TabListWrap {...tabListProps} className={className} ref={tabListRef}>
-      <ReorderGroup
-        axis="x"
-        values={values}
-        onReorder={onReorder}
-        as="div"
-        initial={false}
-      >
+      <ReorderGroup axis="x" values={values} onReorder={onReorder} initial={false}>
         {tabs.map((item, i) => (
           <Fragment key={item.key}>
             <TabItemWrap
@@ -225,7 +219,6 @@ function Tabs({
                 })
               }
               value={item}
-              as="div"
               data-key={item.key}
               dragConstraints={dragConstraints} // dragConstraints are the bounds that the tab can be dragged within
               dragElastic={0} // Prevents the tab from being dragged outside of the dragConstraints (w/o this you can drag it outside but it'll spring back)
@@ -494,7 +487,7 @@ const AddViewTempTabWrap = styled('div')`
   align-items: center;
 `;
 
-const TabListWrap = styled('ul')`
+const TabListWrap = styled('div')`
   padding: 0;
   margin: 0;
   list-style-type: none;
@@ -507,6 +500,9 @@ const ReorderGroup = styled(Reorder.Group<Node<DraggableTabListItemProps>>)`
   overflow: hidden;
   width: max-content;
   position: relative;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
 `;
 
 const AddViewButton = styled(Button)`