add tabpanel aria props to dashboard wrapper instead

Author: codemist

src/app/[locale]/(redesign)/(authenticated)/user/(dashboard)/dashboard/View.tsx

@@ -23,7 +23,7 @@ import {
   getDashboardSummary,
 } from "../../../../../../functions/server/dashboard";
 import { getExposureStatus } from "../../../../../../components/server/StatusPill";
-import { TabList } from "../../../../../../components/client/TabList";
+import { TabList, TabPanel } from "../../../../../../components/client/TabList";
 import { filterExposures } from "./filterExposures";
 import { SubscriberBreach } from "../../../../../../../utils/subscriberBreaches";
 import { getLocale } from "../../../../../../functions/universal/getLocale";
@@ -35,6 +35,7 @@ import { getNextGuidedStep } from "../../../../../../functions/server/getRelevan
 import { useTelemetry } from "../../../../../../hooks/useTelemetry";
 import { UserAnnouncementWithDetails } from "../../../../../../../db/tables/user_announcements";
 import { PlusShutdownBanner } from "../../../../../../components/client/PlusShutdownBanner";
+import { Item, useTabListState } from "react-stately";
 
 export type TabType = "action-needed" | "fixed";
 
@@ -89,16 +90,6 @@ export const View = (props: Props) => {
   const [activeExposureCardKey, setActiveExposureCardKey] = useState<
     string | null
   >(null);
-  const tabsData: TabData[] = [
-    {
-      name: l10n.getString("dashboard-tab-label-action-needed"),
-      key: "action-needed",
-    },
-    {
-      name: l10n.getString("dashboard-tab-label-fixed"),
-      key: "fixed",
-    },
-  ];
 
   const breachesDataArray = props.userBreaches.flat();
 
@@ -124,6 +115,33 @@ export const View = (props: Props) => {
     });
 
   const tabSpecificExposures = getTabSpecificExposures(activeTab);
+  const tabsData: TabData[] = [
+    {
+      name: l10n.getString("dashboard-tab-label-action-needed"),
+      key: "action-needed",
+    },
+    {
+      name: l10n.getString("dashboard-tab-label-fixed"),
+      key: "fixed",
+    },
+  ];
+
+  const tabListState = useTabListState({
+    selectedKey: activeTab,
+    onSelectionChange: (key) => {
+      setActiveTab(key as TabType);
+      recordTelemetry("dashboard", "view", {
+        dashboard_tab: key as TabType,
+        breach_count: breachesDataArray.length,
+      });
+    },
+    children: tabsData.map((t) => (
+      <Item key={t.key} title={t.name}>
+        <></>
+      </Item>
+    )),
+  });
+
   const filteredExposures = filterExposures(tabSpecificExposures, filters);
   const exposureCardElems = filteredExposures.map(
     (exposure: SubscriberBreach) => {
@@ -187,21 +205,15 @@ export const View = (props: Props) => {
         enabledFeatureFlags={props.enabledFeatureFlags}
         announcements={announcements}
       >
-        <TabList
-          tabs={tabsData}
-          onSelectionChange={(selectedKey) => {
-            setActiveTab(selectedKey as TabType);
-            recordTelemetry("dashboard", "view", {
-              dashboard_tab: selectedKey as TabType,
-              breach_count: breachesDataArray.length,
-            });
-          }}
-          selectedKey={activeTab}
-        />
+        <TabList tabs={tabsData} state={tabListState} />
       </Toolbar>
       <PlusShutdownBanner countryCode={props.countryCode} />
 
-      <div className={styles.dashboardContent}>
+      <TabPanel
+        className={styles.dashboardContent}
+        state={tabListState}
+        id={activeTab}
+      >
         <DashboardTopBanner
           tabType={activeTab}
           hasExposures={hasExposures}
@@ -252,7 +264,7 @@ export const View = (props: Props) => {
         ) : (
           <ul className={styles.exposureList}>{exposureCardElems}</ul>
         )}
-      </div>
+      </TabPanel>
     </div>
   );
 };

src/app/components/client/TabList.tsx

@@ -3,8 +3,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { Key, ReactNode, useRef } from "react";
-import { AriaTabListOptions, useTab, useTabList } from "react-aria";
-import { Item, useTabListState } from "react-stately";
+import {
+  AriaTabListOptions,
+  AriaTabPanelProps,
+  useTab,
+  useTabList,
+  useTabPanel,
+} from "react-aria";
+import { Item, Node } from "react-stately";
 import styles from "./TabList.module.scss";
 import { TabListState, TabListStateOptions } from "@react-stately/tabs";
 
@@ -13,6 +19,7 @@ export type TabsProps = (
   | AriaTabListOptions<object>
 ) & {
   variant?: "primary" | "secondary";
+  state: TabListState<object>;
 };
 
 export type TabListProps = TabsProps & {
@@ -24,30 +31,26 @@ export type TabListProps = TabsProps & {
 };
 
 export interface TabParams {
-  item: {
-    key: Parameters<typeof useTab>[0]["key"];
-    rendered: ReactNode;
-  };
+  item: Node<object>;
   state: TabListState<object>;
 }
 
 function Tab({ item, state }: TabParams) {
-  const { key, rendered } = item;
   const ref = useRef(null);
+  const { key } = item;
   const { tabProps } = useTab({ key }, state, ref);
 
   return (
     <div {...tabProps} ref={ref} className={styles.tab}>
-      {rendered}
+      {item.rendered}
     </div>
   );
 }
 
 function Tabs(props: TabsProps) {
-  const state = useTabListState(props);
   const ref = useRef(null);
-  const { tabListProps } = useTabList(props, state, ref);
-  const { collection, selectedItem } = state;
+  const { tabListProps } = useTabList(props, props.state, ref);
+  const { collection } = props.state;
 
   return (
     <div
@@ -56,7 +59,7 @@ function Tabs(props: TabsProps) {
     >
       <div {...tabListProps} ref={ref} className={styles.tabs}>
         {[...collection].map((item) => (
-          <Tab key={item.key} item={item} state={state} />
+          <Tab key={item.key} item={item} state={props.state} />
         ))}
       </div>
     </div>
@@ -65,7 +68,7 @@ function Tabs(props: TabsProps) {
 
 export const TabList = ({ tabs, ...props }: TabListProps) => {
   return (
-    <Tabs {...props}>
+    <Tabs id="tablist" {...props}>
       {tabs.map((tab) => (
         <Item key={tab.key} title={tab.name}>
           {tab.content}
@@ -74,3 +77,18 @@ export const TabList = ({ tabs, ...props }: TabListProps) => {
     </Tabs>
   );
 };
+export interface TabPanelProps extends AriaTabPanelProps {
+  state: TabListState<object>;
+  className?: string; // etc
+  children: ReactNode;
+}
+
+export function TabPanel({ state, ...props }: TabPanelProps) {
+  const ref = useRef(null);
+  const { tabPanelProps } = useTabPanel(props, state, ref);
+  return (
+    <div {...tabPanelProps} ref={ref} className={props.className}>
+      {props.children}
+    </div>
+  );
+}