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.
db-ui · Nov 28, 2024 · c22c8ce · c22c8ce
1 parent 63391df
commit c22c8ce
Showing 1 changed file with 2 additions and 2 deletions.
diff --git 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}`
 					);
 				}
 			}