diff --git a/src/components/tab-group/tab-group.tsx b/src/components/tab-group/tab-group.tsx
index c0228bf3c..9818a634e 100644
--- a/src/components/tab-group/tab-group.tsx
+++ b/src/components/tab-group/tab-group.tsx
@@ -53,9 +53,16 @@ export class TabGroup {
   }
 
   componentDidLoad() {
-    // Set initial tab state
-    this.setAriaLabels();
-    this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);
+    // Set initial tab state when the tabs first become visible
+    const observer = new IntersectionObserver((entries, observer) => {
+      if (entries[0].intersectionRatio > 0) {
+        this.setAriaLabels();
+        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);
+        observer.unobserve(entries[0].target);
+      }
+    });
+    observer.observe(this.host);
+
     focusVisible.observe(this.tabGroup);
 
     // Update aria labels if the DOM changes