db-ux-design-system · Copilot · Dec 10, 2025 · Dec 10, 2025 · Dec 11, 2025 · Dec 11, 2025
diff --git a/.changeset/dry-icons-juggle.md b/.changeset/dry-icons-juggle.md
@@ -0,0 +1,9 @@
+---
+"@db-ux/core-components": major
+"@db-ux/ngx-core-components": major
+"@db-ux/react-core-components": major
+"@db-ux/wc-core-components": major
+"@db-ux/v-core-components": major
+---
+
+**BREAKING CHANGE:** fix: rename `id` prop to `id-{tagname}` format for all affected components to fix screenreader issue
diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -53,7 +53,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'accordion-item-' + uuid();
+		state._id = props.idLi || 'accordion-item-' + uuid();
 		if (props.defaultOpen) {
 			state._open = props.defaultOpen;
 		}

diff --git a/packages/components/src/components/accordion-item/model.ts b/packages/components/src/components/accordion-item/model.ts
@@ -10,6 +10,10 @@ import {
 } from '../../shared/model';
 
 export type DBAccordionItemDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the li element, generated automatically as a fallback if unset.
+	 */
+	idLi?: string;
 	/**
 	 * Initial state for the accordion item
 	 */
@@ -29,7 +33,7 @@ export type DBAccordionItemDefaultProps = {
 } & TextProps;
 
 export type DBAccordionItemProps = DBAccordionItemDefaultProps &
-	GlobalProps &
+	Omit<GlobalProps, 'id'> &
 	ToggleEventProps &
 	NameProps;
 

diff --git a/packages/components/src/components/accordion/accordion.lite.tsx b/packages/components/src/components/accordion/accordion.lite.tsx
@@ -42,7 +42,7 @@ export default function DBAccordion(props: DBAccordionProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'accordion-' + uuid();
+		state._id = props.idUl || 'accordion-' + uuid();
 		state.initialized = true;
 		state._initOpenIndexDone = true;
 	});

diff --git a/packages/components/src/components/accordion/model.ts b/packages/components/src/components/accordion/model.ts
@@ -8,6 +8,10 @@ export const AccordionBehaviorList = ['multiple', 'single'] as const;
 export type AccordionBehaviorType = (typeof AccordionBehaviorList)[number];
 
 export type DBAccordionDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the ul element, generated automatically as a fallback if unset.
+	 */
+	idUl?: string;
 	/**
 	 * To allow multiple items open at the same time or only 1 item
 	 */
@@ -40,7 +44,8 @@ export type DBAccordionDefaultProps = {
 	variant?: AccordionVariantType;
 };
 
-export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;
+export type DBAccordionProps = DBAccordionDefaultProps &
+	Omit<GlobalProps, 'id'>;
 
 export type DBAccordionDefaultState = {
 	_initOpenIndexDone: boolean;

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -131,7 +131,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 
 	onMount(() => {
 		state.initialized = true;
-		const mId = props.id ?? `checkbox-${uuid()}`;
+		const mId = props.idInput ?? `checkbox-${uuid()}`;
 		state._id = mId;
 		state._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
 		state._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;

diff --git a/packages/components/src/components/checkbox/model.ts b/packages/components/src/components/checkbox/model.ts
@@ -15,14 +15,18 @@ import {
 } from '../../shared/model';
 
 export type DBCheckboxDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the input element, generated automatically as a fallback if unset.
+	 */
+	idInput?: string;
 	/**
 	 * Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox
 	 */
 	indeterminate?: boolean | string;
 };
 
 export type DBCheckboxProps = DBCheckboxDefaultProps &
-	GlobalProps &
+	Omit<GlobalProps, 'id'> &
 	ChangeEventProps<HTMLInputElement> &
 	FocusEventProps<HTMLInputElement> &
 	FormProps &

diff --git a/packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx b/packages/components/src/components/custom-select-list-item/custom-select-list-item.lite.tsx
@@ -67,7 +67,7 @@ export default function DBCustomSelectListItem(
 	// jscpd:ignore-end
 
 	onMount(() => {
-		state._id = props.id ?? `custom-select-list-item-${uuid()}`;
+		state._id = props.idLi ?? `custom-select-list-item-${uuid()}`;
 	});
 
 	onUpdate(() => {

diff --git a/packages/components/src/components/custom-select-list-item/model.ts b/packages/components/src/components/custom-select-list-item/model.ts
@@ -27,6 +27,10 @@ export type DBCustomSelectListItemExtraProps = {
 	ShowIconProps;
 
 export type DBCustomSelectListItemDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the li element, generated automatically as a fallback if unset.
+	 */
+	idLi?: string;
 	/**
 	 * Set the title of a group of items - disables radio/checkbox behavior
 	 */
@@ -38,7 +42,7 @@ export type DBCustomSelectListItemDefaultProps = {
 };
 
 export type DBCustomSelectListItemProps = DBCustomSelectListItemDefaultProps &
-	GlobalProps &
+	Omit<GlobalProps, 'id'> &
 	BaseFormProps &
 	ValueProps &
 	FormCheckProps &

diff --git a/packages/components/src/components/custom-select/custom-select.lite.tsx b/packages/components/src/components/custom-select/custom-select.lite.tsx
@@ -649,7 +649,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 	// jscpd:ignore-end
 
 	onMount(() => {
-		const mId = props.id ?? `custom-select-${uuid()}`;
+		const mId = props.idDiv ?? `custom-select-${uuid()}`;
 		state._id = mId;
 		state._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
 		state._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;

diff --git a/packages/components/src/components/custom-select/model.ts b/packages/components/src/components/custom-select/model.ts
@@ -92,6 +92,10 @@ export type DBCustomSelectEvents = {
 };
 
 export type DBCustomSelectDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the div element, generated automatically as a fallback if unset.
+	 */
+	idDiv?: string;
 	/**
 	 * Optional: if select-type="amount" change the shown text
 	 */
@@ -239,7 +243,7 @@ export type DBCustomSelectDefaultProps = {
 	values?: string[];
 };
 
-export type DBCustomSelectProps = GlobalProps &
+export type DBCustomSelectProps = Omit<GlobalProps, 'id'> &
 	CustomFormProps &
 	BaseFormProps &
 	RequiredProps &

diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
@@ -189,7 +189,7 @@ export default function DBInput(props: DBInputProps) {
 	});
 
 	onMount(() => {
-		const mId = props.id ?? `input-${uuid()}`;
+		const mId = props.idInput ?? `input-${uuid()}`;
 		state._id = mId;
 		state._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
 		state._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;

diff --git a/packages/components/src/components/input/model.ts b/packages/components/src/components/input/model.ts
@@ -44,6 +44,10 @@ export const InputTypeList = [
 export type InputTypeType = (typeof InputTypeList)[number];
 
 export type DBInputDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the input element, generated automatically as a fallback if unset.
+	 */
+	idInput?: string;
 	/**
 	 * Set a [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) via attribute instead of children.
 	 */
@@ -115,7 +119,7 @@ export type DBInputDefaultProps = {
 };
 
 export type DBInputProps = DBInputDefaultProps &
-	GlobalProps &
+	Omit<GlobalProps, 'id'> &
 	FormTextProps &
 	InputEventProps<HTMLInputElement> &
 	ChangeEventProps<HTMLInputElement> &

diff --git a/packages/components/src/components/navigation/model.ts b/packages/components/src/components/navigation/model.ts
@@ -1,8 +1,14 @@
 import { GlobalProps, GlobalState } from '../../shared/model';
 
-export type DBNavigationDefaultProps = {};
-
-export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;
+export type DBNavigationDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the nav element, generated automatically as a fallback if unset.
+	 */
+	idNav?: string;
+};
+
+export type DBNavigationProps = DBNavigationDefaultProps &
+	Omit<GlobalProps, 'id'>;
 
 export type DBNavigationDefaultState = {};
 

diff --git a/packages/components/src/components/navigation/navigation.lite.tsx b/packages/components/src/components/navigation/navigation.lite.tsx
@@ -21,7 +21,7 @@ export default function DBNavigation(props: DBNavigationProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'navigation-' + uuid();
+		state._id = props.idNav || 'navigation-' + uuid();
 	});
 
 	// jscpd:ignore-end

diff --git a/packages/components/src/components/radio/model.ts b/packages/components/src/components/radio/model.ts
@@ -14,10 +14,15 @@ import {
 	SizeProps
 } from '../../shared/model';
 
-export type DBRadioDefaultProps = {};
+export type DBRadioDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the input element, generated automatically as a fallback if unset.
+	 */
+	idInput?: string;
+};
 
 export type DBRadioProps = DBRadioDefaultProps &
-	GlobalProps &
+	Omit<GlobalProps, 'id'> &
 	InputEventProps<HTMLInputElement> &
 	ChangeEventProps<HTMLInputElement> &
 	FocusEventProps<HTMLInputElement> &

diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
@@ -106,7 +106,7 @@ export default function DBRadio(props: DBRadioProps) {
 
 	onMount(() => {
 		state.initialized = true;
-		state._id = props.id ?? `radio-${uuid()}`;
+		state._id = props.idInput ?? `radio-${uuid()}`;
 	});
 
 	onUpdate(() => {

diff --git a/packages/components/src/components/select/model.ts b/packages/components/src/components/select/model.ts
@@ -20,6 +20,10 @@ import {
 } from '../../shared/model';
 
 export type DBSelectDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the select element, generated automatically as a fallback if unset.
+	 */
+	idSelect?: string;
 	/**
 	 * @deprecated
 	 * Enables multiple select, but it isn't styled, please use DBCustomSelect/db-custom-select instead
@@ -64,7 +68,7 @@ export type DBSelectOptionType = {
 	value: string | string[] | number;
 };
 
-export type DBSelectProps = GlobalProps &
+export type DBSelectProps = Omit<GlobalProps, 'id'> &
 	ClickEventProps<HTMLSelectElement> &
 	ChangeEventProps<HTMLSelectElement> &
 	FocusEventProps<HTMLSelectElement> &

diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
@@ -184,7 +184,7 @@ export default function DBSelect(props: DBSelectProps) {
 
 	onMount(() => {
 		state.initialized = true;
-		const mId = props.id ?? `select-${uuid()}`;
+		const mId = props.idSelect ?? `select-${uuid()}`;
 		state._id = mId;
 		state._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
 		state._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;

diff --git a/packages/components/src/components/switch/model.ts b/packages/components/src/components/switch/model.ts
@@ -19,6 +19,10 @@ import {
 } from '../../shared/model';
 
 export type DBSwitchDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the input element, generated automatically as a fallback if unset.
+	 */
+	idInput?: string;
 	/**
 	 * Add additional icons to indicate active/inactive state.
 	 */
@@ -30,7 +34,7 @@ export type DBSwitchDefaultProps = {
 	variant?: LabelVariantHorizontalType;
 };
 
-export type DBSwitchProps = GlobalProps &
+export type DBSwitchProps = Omit<GlobalProps, 'id'> &
 	ChangeEventProps<HTMLInputElement> &
 	FocusEventProps<HTMLInputElement> &
 	FormProps &

diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
@@ -156,7 +156,7 @@ export default function DBSwitch(props: DBSwitchProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id ?? `switch-${uuid()}`;
+		state._id = props.idInput ?? `switch-${uuid()}`;
 		state._messageId = `${state._id}${DEFAULT_MESSAGE_ID_SUFFIX}`;
 		state._validMessageId = `${state._id}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`;
 		state._invalidMessageId = `${state._id}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`;

diff --git a/packages/components/src/components/tab-list/model.ts b/packages/components/src/components/tab-list/model.ts
@@ -1,8 +1,13 @@
 import { GlobalProps, GlobalState } from '../../shared/model';
 
-export type DBTabListDefaultProps = {};
-
-export type DBTabListProps = DBTabListDefaultProps & GlobalProps;
+export type DBTabListDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the div element, generated automatically as a fallback if unset.
+	 */
+	idDiv?: string;
+};
+
+export type DBTabListProps = DBTabListDefaultProps & Omit<GlobalProps, 'id'>;
 
 export type DBTabListDefaultState = {};
 

diff --git a/packages/components/src/components/tab-list/tab-list.lite.tsx b/packages/components/src/components/tab-list/tab-list.lite.tsx
@@ -21,7 +21,7 @@ export default function DBTabList(props: DBTabListProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || 'tab-list-' + uuid();
+		state._id = props.idDiv || 'tab-list-' + uuid();
 	});
 	// jscpd:ignore-end
 

diff --git a/packages/components/src/components/tabs/model.ts b/packages/components/src/components/tabs/model.ts
@@ -19,6 +19,10 @@ export type TabsInitialSelectedModeType =
 
 export type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;
 export type DBTabsDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the div element, generated automatically as a fallback if unset.
+	 */
+	idDiv?: string;
 	/**
 	 * Change amount of distance if you click on an arrow, only available with behavior="arrows"
 	 */
@@ -71,7 +75,7 @@ export type DBTabsEventProps = {
 };
 
 export type DBTabsProps = DBTabsDefaultProps &
-	GlobalProps &
+	Omit<GlobalProps, 'id'> &
 	OrientationProps &
 	WidthProps &
 	AlignmentProps &

diff --git a/packages/components/src/components/tabs/tabs.lite.tsx b/packages/components/src/components/tabs/tabs.lite.tsx
@@ -188,7 +188,7 @@ export default function DBTabs(props: DBTabsProps) {
 	});
 
 	onMount(() => {
-		state._id = props.id || state._id;
+		state._id = props.idDiv || state._id;
 
 		state._name = `tabs-${props.name || uuid()}`;
 

diff --git a/packages/components/src/components/textarea/model.ts b/packages/components/src/components/textarea/model.ts
@@ -26,6 +26,10 @@ export const TextareaWrapList = ['hard', 'soft', 'off'] as const;
 export type TextareaWrapType = (typeof TextareaWrapList)[number];
 
 export type DBTextareaDefaultProps = {
+	/**
+	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the textarea element, generated automatically as a fallback if unset.
+	 */
+	idTextarea?: string;
 	/**
 	 * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer
 	 */
@@ -60,7 +64,7 @@ export type DBTextareaProps = DBTextareaDefaultProps &
 	InputEventProps<HTMLTextAreaElement> &
 	FocusEventProps<HTMLTextAreaElement> &
 	FormProps &
-	GlobalProps &
+	Omit<GlobalProps, 'id'> &
 	FormTextProps &
 	FormMessageProps;
 

diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -165,7 +165,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 	});
 
 	onMount(() => {
-		const mId = props.id ?? `textarea-${uuid()}`;
+		const mId = props.idTextarea ?? `textarea-${uuid()}`;
 		state._id = mId;
 		state._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
 		state._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;