Fix a11y violation: no tabpanel in a tablist

mozilla · Nov 7, 2022 · fd5dd11 · fd5dd11
1 parent 17f7f1d
commit fd5dd11
Showing 1 changed file with 12 additions and 10 deletions.
diff --git a/frontend/src/components/landing/carousel/Carousel.tsx b/frontend/src/components/landing/carousel/Carousel.tsx
@@ -86,16 +86,18 @@ const Tabs = (props: TabsProps) => {
   }, []);
 
   return (
-    <div
-      {...tabListProps}
-      ref={tabsRef}
-      className={`${styles.sections} ${
-        styles["selected-tab-" + state.selectedItem.index]
-      }`}
-    >
-      {Array.from(state.collection).map((item) => (
-        <Tab key={item.key} item={item} state={state} />
-      ))}
+    <div>
+      <div
+        {...tabListProps}
+        ref={tabsRef}
+        className={`${styles.sections} ${
+          styles["selected-tab-" + state.selectedItem.index]
+        }`}
+      >
+        {Array.from(state.collection).map((item) => (
+          <Tab key={item.key} item={item} state={state} />
+        ))}
+      </div>
       <Container key={state.selectedItem.key} state={state} />
     </div>
   );