From c22c8ce950fa4832f5ffa7f884023c9314e97abd Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Thu, 28 Nov 2024 19:52:13 +0100
Subject: [PATCH] refactor(tabs): resilience for tab ID values

We need to ensure that tabs only includes a valid tab value, whereas the current implementation might start with e.g. a number.
---
 packages/components/src/components/tabs/tabs.lite.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/tabs/tabs.lite.tsx b/packages/components/src/components/tabs/tabs.lite.tsx
index 3bced04c5f9..072b18338e7 100644
--- a/packages/components/src/components/tabs/tabs.lite.tsx
+++ b/packages/components/src/components/tabs/tabs.lite.tsx
@@ -91,7 +91,7 @@ export default function DBTabs(props: DBTabsProps) {
 
 					if (input && label) {
 						if (!input.id) {
-							const tabId = `${state._name}-tab-${index}`;
+							const tabId = `tabs-${state._name}-tab-${index}`;
 							label.setAttribute('for', tabId);
 							input.setAttribute(
 								'aria-controls',
@@ -128,7 +128,7 @@ export default function DBTabs(props: DBTabsProps) {
 					panel.id = `${state._name}-tab-panel-${index}`;
 					panel.setAttribute(
 						'aria-labelledby',
-						`${state._name}-tab-${index}`
+						`tabs-${state._name}-tab-${index}`
 					);
 				}
 			}