From 70c68d00fe2b068bed0930682230c1de3f81d62e Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Tue, 28 Dec 2021 16:51:36 -1000
Subject: [PATCH] Tab: fix aria-controls

When porting, I thought I was being clever by just using ids instead of refs in $api.panels
But I didn't notice that the refs let you distinguish those panels which are rendered from those which are not.
My implementation had aria-controls= set for all tabs, even when their panels were not in the DOM.
---
 src/lib/components/tabs/Tab.svelte      |  3 ++-
 src/lib/components/tabs/TabGroup.svelte | 10 +++++++---
 src/lib/components/tabs/TabPanel.svelte | 11 ++++++++---
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/tabs/Tab.svelte b/src/lib/components/tabs/Tab.svelte
index 7f49012..8f59897 100644
--- a/src/lib/components/tabs/Tab.svelte
+++ b/src/lib/components/tabs/Tab.svelte
@@ -87,11 +87,12 @@
     $api.setSelectedIndex(myIndex);
   }
 
+  $: myPanelRef = $api.panels[myIndex]?.ref;
   $: propsWeControl = {
     id,
     role: "tab",
     type: resolveButtonType({ type: $$props.type, as }, tabRef),
-    "aria-controls": $api.panels[myIndex],
+    "aria-controls": $myPanelRef ? $api.panels[myIndex]?.id : undefined,
     "aria-selected": selected,
     tabIndex: selected ? 0 : -1,
     disabled: disabled ? true : undefined,
diff --git a/src/lib/components/tabs/TabGroup.svelte b/src/lib/components/tabs/TabGroup.svelte
index 6ab0014..d91beb2 100644
--- a/src/lib/components/tabs/TabGroup.svelte
+++ b/src/lib/components/tabs/TabGroup.svelte
@@ -1,4 +1,8 @@
 <script lang="ts" context="module">
+  interface PanelData {
+    id: string;
+    ref: Readable<HTMLElement | null>;
+  }
   export type StateDefinition = {
     // State
     selectedIndex: number | null;
@@ -6,14 +10,14 @@
     activation: "auto" | "manual";
 
     tabs: (HTMLElement | null)[];
-    panels: string[];
+    panels: PanelData[];
 
     // State mutators
     setSelectedIndex(index: number): void;
     registerTab(tab: HTMLElement | null): void;
     unregisterTab(tab: HTMLElement | null): void;
-    registerPanel(panel: string): void;
-    unregisterPanel(panel: string): void;
+    registerPanel(panel: PanelData): void;
+    unregisterPanel(panel: PanelData): void;
   };
 
   const TABS_CONTEXT_NAME = "headlessui-tabs-context";
diff --git a/src/lib/components/tabs/TabPanel.svelte b/src/lib/components/tabs/TabPanel.svelte
index 7cec664..972c351 100644
--- a/src/lib/components/tabs/TabPanel.svelte
+++ b/src/lib/components/tabs/TabPanel.svelte
@@ -7,20 +7,24 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render, { Features } from "$lib/utils/Render.svelte";
+  import { writable, Writable } from "svelte/store";
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  let elementRef: Writable<HTMLElement | null> = writable(null);
   let api = useTabsContext("TabPanel");
   let id = `headlessui-tabs-panel-${useId()}`;
 
+  $: panelData = { id, ref: elementRef };
+
   onMount(() => {
-    $api.registerPanel(id);
-    return () => $api.unregisterPanel(id);
+    $api.registerPanel(panelData);
+    return () => $api.unregisterPanel(panelData);
   });
 
-  $: myIndex = $api.panels.indexOf(id);
+  $: myIndex = $api.panels.indexOf(panelData);
   $: selected = myIndex === $api.selectedIndex;
 
   $: propsWeControl = {
@@ -36,6 +40,7 @@
   {as}
   use={[...use, forwardEvents]}
   name={"TabPanel"}
+  bind:el={$elementRef}
   visible={selected}
   features={Features.RenderStrategy | Features.Static}
 >