From 4add8d107846c37258a861dacc4a83827eec716e Mon Sep 17 00:00:00 2001 From: Danny Koppenhagen Date: Wed, 29 Oct 2025 14:53:52 +0100 Subject: [PATCH 1/4] fix(DBCustomSelect): ensure selected items are properly announced --- .../components/custom-select/custom-select.lite.tsx | 13 +++++++++---- .../src/components/custom-select/custom-select.scss | 4 ++++ .../src/components/custom-select/model.ts | 6 ++++++ .../custom-select/custom-select.component.html | 1 + .../src/components/custom-select/index.tsx | 1 + .../src/components/custom-select/CustomSelect.vue | 1 + 6 files changed, 22 insertions(+), 4 deletions(-) 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 f287129c888f..3a7f84f630cb 100644 --- a/packages/components/src/components/custom-select/custom-select.lite.tsx +++ b/packages/components/src/components/custom-select/custom-select.lite.tsx @@ -137,7 +137,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) { } /* For a11y reasons we need to map the correct message with the select */ if (!selectRef?.validity.valid || props.validation === 'invalid') { - state._descByIds = state._invalidMessageId; + state.setDescById(state._invalidMessageId); state._invalidMessage = props.invalidMessage || selectRef?.validationMessage || @@ -154,7 +154,7 @@ export default function DBCustomSelect(props: DBCustomSelectProps) { selectRef?.validity.valid && props.required ) { - state._descByIds = state._validMessageId; + state.setDescById(state._validMessageId); if (hasVoiceOver()) { state._voiceOverFallback = props.validMessage ?? DEFAULT_VALID_MESSAGE; @@ -162,10 +162,10 @@ export default function DBCustomSelect(props: DBCustomSelectProps) { } state._validity = props.validation ?? 'valid'; } else if (stringPropVisible(props.message, props.showMessage)) { - state._descByIds = state._messageId; + state.setDescById(state._messageId); state._validity = props.validation ?? 'no-validation'; } else { - state._descByIds = state._placeholderId; + state.setDescById(state._placeholderId); state._validity = props.validation ?? 'no-validation'; } }, @@ -935,6 +935,11 @@ export default function DBCustomSelect(props: DBCustomSelectProps) { props.selectedType === 'tag' )} id={state._selectedLabelsId}> + + + {props.selectedPrefix} + + {state._selectedLabels} diff --git a/packages/components/src/components/custom-select/custom-select.scss b/packages/components/src/components/custom-select/custom-select.scss index ccadbc52a4c0..4863fcfe95f6 100644 --- a/packages/components/src/components/custom-select/custom-select.scss +++ b/packages/components/src/components/custom-select/custom-select.scss @@ -120,6 +120,10 @@ opacity: variables.$db-opacity-lg; } } + + > span > span::after { + content: ": "; + } } } diff --git a/packages/components/src/components/custom-select/model.ts b/packages/components/src/components/custom-select/model.ts index 643936620f6c..45df66417cc7 100644 --- a/packages/components/src/components/custom-select/model.ts +++ b/packages/components/src/components/custom-select/model.ts @@ -191,6 +191,12 @@ export type DBCustomSelectDefaultProps = { */ selectedLabels?: string; + /** + * Optional: Prefix text announced by screen readers before the selection + * (e.g., "Ausgewählt" or "Selected"). + */ + selectedPrefix?: string; + /** * Change the selected type for values shown in multi select */ diff --git a/showcases/angular-showcase/src/app/components/custom-select/custom-select.component.html b/showcases/angular-showcase/src/app/components/custom-select/custom-select.component.html index ab9dbad5b45a..9cc8f7ab512e 100644 --- a/showcases/angular-showcase/src/app/components/custom-select/custom-select.component.html +++ b/showcases/angular-showcase/src/app/components/custom-select/custom-select.component.html @@ -47,6 +47,7 @@ [searchLabel]="'Search'" [searchValue]="exampleProps?.searchValue" [selectedLabels]="exampleProps?.selectedLabels" + selectedPrefix="Selected" [transformSelectedLabels]=" exampleProps?.transformSelectedLabels ? getTransformSelectedLabels diff --git a/showcases/react-showcase/src/components/custom-select/index.tsx b/showcases/react-showcase/src/components/custom-select/index.tsx index 4239f92a5467..ea57769fca2a 100644 --- a/showcases/react-showcase/src/components/custom-select/index.tsx +++ b/showcases/react-showcase/src/components/custom-select/index.tsx @@ -105,6 +105,7 @@ const getCustomSelect = ({ values={mValue} searchValue={searchValue} selectedLabels={selectedLabels} + selectedPrefix="Selected" invalidMessage={invalidMessage} validMessage={validMessage} validation={validation} diff --git a/showcases/vue-showcase/src/components/custom-select/CustomSelect.vue b/showcases/vue-showcase/src/components/custom-select/CustomSelect.vue index 9ff321aaa827..944b9ec1c39a 100644 --- a/showcases/vue-showcase/src/components/custom-select/CustomSelect.vue +++ b/showcases/vue-showcase/src/components/custom-select/CustomSelect.vue @@ -75,6 +75,7 @@ const getSearchFilter = (option: CustomSelectOptionType, _: string): boolean => searchLabel="Search" :searchValue="exampleProps?.searchValue" :selectedLabels="exampleProps?.selectedLabels" + selectedPrefix="Selected" :transformSelectedLabels=" exampleProps?.transformSelectedLabels ? getTransformSelectedLabels From 560704574399f8c9fa14093721599470ef2b4a3a Mon Sep 17 00:00:00 2001 From: Danny Koppenhagen Date: Wed, 29 Oct 2025 15:01:46 +0100 Subject: [PATCH 2/4] docs: add changeset --- .changeset/slow-buttons-stay.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .changeset/slow-buttons-stay.md diff --git a/.changeset/slow-buttons-stay.md b/.changeset/slow-buttons-stay.md new file mode 100644 index 000000000000..887990629907 --- /dev/null +++ b/.changeset/slow-buttons-stay.md @@ -0,0 +1,10 @@ +--- +"@db-ux/core-components": minor +"@db-ux/ngx-core-components": minor +"@db-ux/react-core-components": minor +"@db-ux/wc-core-components": minor +"@db-ux/v-core-components": minor +--- + +fix(DBCustomSelect): properly announce selected options +feat(DBCustomSelect): introduce new property `selectedPrefix` From 4c8566adb01e45902413cb7e1f45c536ccd3dd3d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 29 Oct 2025 14:56:10 +0000 Subject: [PATCH 3/4] auto update snapshots (#5393) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../DBCustomSelect-should-have-same-aria-snapshot.yaml | 2 +- .../DBCustomSelect-should-have-same-aria-snapshot.yaml | 2 +- .../DBCustomSelect-should-have-same-aria-snapshot.yaml | 2 +- .../DBCustomSelect-should-have-same-aria-snapshot.yaml | 2 +- .../DBCustomSelect-should-have-same-aria-snapshot.yaml | 2 +- .../DBCustomSelect-should-have-same-aria-snapshot.yaml | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/__snapshots__/custom-select/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/__snapshots__/custom-select/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml index a5716369a5d7..62d2797a9853 100644 --- a/__snapshots__/custom-select/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/custom-select/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml @@ -1377,7 +1377,7 @@ - status - text: Custom Selected Label - group: - - text: Label controlled + - text: "Selected: Label controlled" - article: - radiogroup "id-10aasds4-Custom Selected Label": - list: diff --git a/__snapshots__/custom-select/showcase/chromium/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/__snapshots__/custom-select/showcase/chromium/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml index a5716369a5d7..62d2797a9853 100644 --- a/__snapshots__/custom-select/showcase/chromium/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/custom-select/showcase/chromium/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml @@ -1377,7 +1377,7 @@ - status - text: Custom Selected Label - group: - - text: Label controlled + - text: "Selected: Label controlled" - article: - radiogroup "id-10aasds4-Custom Selected Label": - list: diff --git a/__snapshots__/custom-select/showcase/firefox/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/__snapshots__/custom-select/showcase/firefox/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml index a5716369a5d7..62d2797a9853 100644 --- a/__snapshots__/custom-select/showcase/firefox/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/custom-select/showcase/firefox/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml @@ -1377,7 +1377,7 @@ - status - text: Custom Selected Label - group: - - text: Label controlled + - text: "Selected: Label controlled" - article: - radiogroup "id-10aasds4-Custom Selected Label": - list: diff --git a/__snapshots__/custom-select/showcase/mobile-chrome/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/__snapshots__/custom-select/showcase/mobile-chrome/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml index 559b0e02b90c..97a3f1a229a3 100644 --- a/__snapshots__/custom-select/showcase/mobile-chrome/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/custom-select/showcase/mobile-chrome/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml @@ -1442,7 +1442,7 @@ - status - text: Custom Selected Label - group: - - text: Label controlled + - text: "Selected: Label controlled" - article: - radiogroup "id-10aasds4-Custom Selected Label": - list: diff --git a/__snapshots__/custom-select/showcase/mobile-safari/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/__snapshots__/custom-select/showcase/mobile-safari/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml index 559b0e02b90c..97a3f1a229a3 100644 --- a/__snapshots__/custom-select/showcase/mobile-safari/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/custom-select/showcase/mobile-safari/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml @@ -1442,7 +1442,7 @@ - status - text: Custom Selected Label - group: - - text: Label controlled + - text: "Selected: Label controlled" - article: - radiogroup "id-10aasds4-Custom Selected Label": - list: diff --git a/__snapshots__/custom-select/showcase/webkit/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/__snapshots__/custom-select/showcase/webkit/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml index a5716369a5d7..62d2797a9853 100644 --- a/__snapshots__/custom-select/showcase/webkit/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml +++ b/__snapshots__/custom-select/showcase/webkit/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml @@ -1377,7 +1377,7 @@ - status - text: Custom Selected Label - group: - - text: Label controlled + - text: "Selected: Label controlled" - article: - radiogroup "id-10aasds4-Custom Selected Label": - list: From ef1638be037a2abd265564a1903b5fa0a0f1c922 Mon Sep 17 00:00:00 2001 From: Danny Koppenhagen Date: Wed, 29 Oct 2025 17:02:31 +0100 Subject: [PATCH 4/4] fix: use Property Binding with static string, so satisfy stencil --- .../app/components/custom-select/custom-select.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/angular-showcase/src/app/components/custom-select/custom-select.component.html b/showcases/angular-showcase/src/app/components/custom-select/custom-select.component.html index 9cc8f7ab512e..5746e3bda1d8 100644 --- a/showcases/angular-showcase/src/app/components/custom-select/custom-select.component.html +++ b/showcases/angular-showcase/src/app/components/custom-select/custom-select.component.html @@ -47,7 +47,7 @@ [searchLabel]="'Search'" [searchValue]="exampleProps?.searchValue" [selectedLabels]="exampleProps?.selectedLabels" - selectedPrefix="Selected" + [selectedPrefix]="'Selected'" [transformSelectedLabels]=" exampleProps?.transformSelectedLabels ? getTransformSelectedLabels