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` 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: 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 f9f1ce254cbc..1de33e3016ab 100644 --- 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,7 +157,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; @@ -165,10 +165,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'; } }, @@ -967,6 +967,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..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,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