fix/feat(DBCustomSelect): properly announce selected options and introduce selectedPrefix prop (#5392)

* fix(DBCustomSelect): ensure selected items are properly announced

* docs: add changeset

Author: d-koppenhagen

.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`

__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:

__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:

__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:

__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:

__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:

__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:

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>

packages/components/src/components/custom-select/custom-select.scss

@@ -120,6 +120,10 @@
 					opacity: variables.$db-opacity-lg;
 				}
 			}
+
+			> span > span::after {
+				content: ": ";
+			}
 		}
 	}
 

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
 	 */