db-ux-design-system · nmerget · Oct 30, 2025 · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025
diff --git a/.changeset/slow-buttons-stay.md 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`
diff --git a/...ontrast/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/...ontrast/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/...hromium/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/...hromium/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/...firefox/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/...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/...-chrome/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/...-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/...-safari/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/...-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/.../webkit/should-have-same-aria-snapshot/DBCustomSelect-should-have-same-aria-snapshot.yaml b/.../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:

diff --git a/packages/components/src/components/custom-select/custom-select.lite.tsx b/packages/components/src/components/custom-select/custom-select.lite.tsx
@@ -140,7 +140,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 ||
@@ -157,18 +157,18 @@ 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;
 					delay(() => (state._voiceOverFallback = ''), 1000);
 				}
 				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';
 			}
 		},
@@ -967,6 +967,11 @@ export default function DBCustomSelect(props: DBCustomSelectProps) {
 									props.selectedType === 'tag'
 								)}
 								id={state._selectedLabelsId}>
+								<Show when={props.selectedPrefix}>
+									<span data-visually-hidden="true">
+										{props.selectedPrefix}
+									</span>
+								</Show>
 								{state._selectedLabels}
 							</span>
 						</Show>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -75,6 +75,7 @@ const getSearchFilter = (option: CustomSelectOptionType, _: string): boolean =>
 				searchLabel="Search"
 				:searchValue="exampleProps?.searchValue"
 				:selectedLabels="exampleProps?.selectedLabels"
+				selectedPrefix="Selected"
 				:transformSelectedLabels="
 					exampleProps?.transformSelectedLabels
 						? getTransformSelectedLabels
-Original file line number
+Diff line change
@@ Expand Up / @@ -120,6 +120,10 @@ @@
     					opacity: variables.$db-opacity-lg;
     				}
     			}
+    			> span > span::after {
+    				content: ": ";
+    			}
     		}
     	}
@@ Expand Down @@