From 30d6d1dddd5640f26cb1fdeee283eac5344745c8 Mon Sep 17 00:00:00 2001
From: Matthew Cardarelli <solutions@matthewcardarelli.com>
Date: Tue, 6 Aug 2024 19:19:52 -0700
Subject: [PATCH] Fix semantic HTML for better embedding

---
 src/AnimatedListDemo.tsx | 79 ++++++++++++++++++++--------------------
 src/index.tsx            |  2 +-
 2 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/src/AnimatedListDemo.tsx b/src/AnimatedListDemo.tsx
index 00101e8..e027962 100644
--- a/src/AnimatedListDemo.tsx
+++ b/src/AnimatedListDemo.tsx
@@ -82,44 +82,45 @@ export const AnimatedListDemo = () => {
     useAnimatedListItems({ keys: items });
 
   return (
-    <main>
-      <button
-        type="button"
-        onClick={() => {
-          updateItemPositions();
-          mutateItems('reverse');
-        }}
-      >
-        Reverse
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          updateItemPositions();
-          mutateItems('randomize');
-        }}
-      >
-        Randomize
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          updateItemPositions();
-          mutateItems('insert');
-        }}
-      >
-        Insert
-      </button>
-      <button
-        type="button"
-        onClick={() => {
-          updateItemPositions();
-          mutateItems('remove');
-        }}
-      >
-        Remove
-      </button>
-
+    <>
+      <div className="buttons">
+        <button
+          type="button"
+          onClick={() => {
+            updateItemPositions();
+            mutateItems('reverse');
+          }}
+        >
+          Reverse
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            updateItemPositions();
+            mutateItems('randomize');
+          }}
+        >
+          Randomize
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            updateItemPositions();
+            mutateItems('insert');
+          }}
+        >
+          Insert
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            updateItemPositions();
+            mutateItems('remove');
+          }}
+        >
+          Remove
+        </button>
+      </div>
       <ol>
         {items.map((item) => {
           return (
@@ -133,6 +134,6 @@ export const AnimatedListDemo = () => {
           );
         })}
       </ol>
-    </main>
+    </>
   );
 };
diff --git a/src/index.tsx b/src/index.tsx
index 2ea5269..ba1d154 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,7 +10,7 @@ class AnimatedListComponent extends HTMLElement {
   }
 
   connectedCallback() {
-    const rootNode = document.createElement('main');
+    const rootNode = document.createElement('section');
     this.appendChild(rootNode);
     this.root = createRoot(rootNode);
     this.root.render(<AnimatedListDemo />);