diff --git a/.changeset/dry-icons-juggle.md b/.changeset/dry-icons-juggle.md new file mode 100644 index 000000000000..743dec2019eb --- /dev/null +++ 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 index 47c23e92072b..09599f2ccefb 100644 --- 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 index 7f37e75bfe73..15883db3f63b 100644 --- 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 & ToggleEventProps & NameProps; diff --git a/packages/components/src/components/accordion/accordion.lite.tsx b/packages/components/src/components/accordion/accordion.lite.tsx index 45180cda328b..34df7f149633 100644 --- 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 index 02b866a56803..3f54d2af70e8 100644 --- 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; 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 index 8ae89a8d0c6f..3b4ef069f025 100644 --- 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 index 1f6de378056e..dd0d15632c79 100644 --- a/packages/components/src/components/checkbox/model.ts +++ b/packages/components/src/components/checkbox/model.ts @@ -15,6 +15,10 @@ 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 */ @@ -22,7 +26,7 @@ export type DBCheckboxDefaultProps = { }; export type DBCheckboxProps = DBCheckboxDefaultProps & - GlobalProps & + Omit & ChangeEventProps & FocusEventProps & 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 index d05c1c2887f5..189428f0044e 100644 --- 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 index 8e275e26a6d2..483ea0daa9a8 100644 --- 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 & 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 index 1de33e3016ab..50c718585203 100644 --- 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 index 45df66417cc7..ce8d32b0cf12 100644 --- 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 & CustomFormProps & BaseFormProps & RequiredProps & diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx index 0d780c6f7780..45ba061aea59 100644 --- 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 index 2d6abe0db791..1c891ca553a0 100644 --- 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 & FormTextProps & InputEventProps & ChangeEventProps & diff --git a/packages/components/src/components/navigation/model.ts b/packages/components/src/components/navigation/model.ts index f9ecc96104ae..0b410197a562 100644 --- 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; export type DBNavigationDefaultState = {}; diff --git a/packages/components/src/components/navigation/navigation.lite.tsx b/packages/components/src/components/navigation/navigation.lite.tsx index d7b75484c234..cd86572d935e 100644 --- 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 index c133cf52d6ee..ff868f0f41df 100644 --- 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 & InputEventProps & ChangeEventProps & FocusEventProps & diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx index af77762a6a4a..dca6e102af1e 100644 --- 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 index 666aec737435..20b692aad0b7 100644 --- 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 & ClickEventProps & ChangeEventProps & FocusEventProps & diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx index 6411ac6e3cff..e9573d11acce 100644 --- 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 index cab4e4b4d71b..d343ab030020 100644 --- 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 & ChangeEventProps & FocusEventProps & FormProps & diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx index 291b777cd0e7..351cd6fc05d9 100644 --- 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 index 9af7eb2a47fa..ea0a9abf4e73 100644 --- 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; 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 index f1256a2bff4d..4bfcf2289d56 100644 --- 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 index 0ff6b1a3b477..7a73ea5fd080 100644 --- 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 & OrientationProps & WidthProps & AlignmentProps & diff --git a/packages/components/src/components/tabs/tabs.lite.tsx b/packages/components/src/components/tabs/tabs.lite.tsx index e9b714d02ffc..c2254e025b10 100644 --- 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 index bb4e98dae495..06f5d820518a 100644 --- 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 & FocusEventProps & FormProps & - GlobalProps & + Omit & FormTextProps & FormMessageProps; diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx index 5295fa712a92..a6fe1be4ec49 100644 --- 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; diff --git a/packages/components/src/components/tooltip/model.ts b/packages/components/src/components/tooltip/model.ts index 3f712453a6bd..2462fee4aa85 100644 --- a/packages/components/src/components/tooltip/model.ts +++ b/packages/components/src/components/tooltip/model.ts @@ -14,6 +14,10 @@ export const TooltipVariantList = ['description', 'label'] as const; export type TooltipVariantType = (typeof TooltipVariantList)[number]; export type DBTooltipDefaultProps = { + /** + * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the i element, generated automatically as a fallback if unset. + */ + idI?: string; /** * Show/Hides arrow */ @@ -27,7 +31,7 @@ export type DBTooltipDefaultProps = { }; export type DBTooltipProps = DBTooltipDefaultProps & - GlobalProps & + Omit & EmphasisProps & PlacementProps & PopoverProps; diff --git a/packages/components/src/components/tooltip/tooltip.lite.tsx b/packages/components/src/components/tooltip/tooltip.lite.tsx index b4091bea861a..4c329b646f93 100644 --- a/packages/components/src/components/tooltip/tooltip.lite.tsx +++ b/packages/components/src/components/tooltip/tooltip.lite.tsx @@ -92,7 +92,7 @@ export default function DBTooltip(props: DBTooltipProps) { }); onMount(() => { - state._id = props.id || 'tooltip-' + uuid(); + state._id = props.idI || 'tooltip-' + uuid(); state.initialized = true; }); diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx index 402c59ff7da1..5c04d4eb929b 100644 --- a/showcases/react-showcase/src/components/form/index.tsx +++ b/showcases/react-showcase/src/components/form/index.tsx @@ -437,7 +437,7 @@ const FormComponent = () => { { @@ -495,13 +495,13 @@ const FormComponent = () => { KUZ - + Beschreibungstext KUZ - + Beschreibungstext