From dd1e6d133d9ec94764c6204ecb2ff665a9961b8a Mon Sep 17 00:00:00 2001 From: Stoyan Date: Tue, 27 Jan 2026 11:45:28 +0200 Subject: [PATCH 1/2] fix(ui5-color-palette*): resolve landmark uniqueness and missing dialog label --- packages/main/src/ColorPalette.ts | 13 ++++++++++++- packages/main/src/ColorPalettePopoverTemplate.tsx | 1 + packages/main/src/ColorPaletteTemplate.tsx | 2 +- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 3e6bed653a41..b6672b26a8a2 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -132,6 +132,15 @@ class ColorPalette extends UI5Element { @property() defaultColor?: string; + /** + * Defines the accessible name of the component. + * @default undefined + * @public + * @since 2.20.0 + */ + @property() + accessibleName?: string; + /** * Defines the selected color, only valid CSS color values accepted * @private @@ -883,7 +892,9 @@ class ColorPalette extends UI5Element { } get colorContainerLabel() { - return ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL); + return this.accessibleName + ? `${ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL)} ${this.accessibleName}` + : ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL); } get colorPaletteMoreColorsText() { diff --git a/packages/main/src/ColorPalettePopoverTemplate.tsx b/packages/main/src/ColorPalettePopoverTemplate.tsx index ff5fbc74a9cc..a2653311ede9 100644 --- a/packages/main/src/ColorPalettePopoverTemplate.tsx +++ b/packages/main/src/ColorPalettePopoverTemplate.tsx @@ -14,6 +14,7 @@ export default function ColorPalettePopoverTemplate(this: ColorPalettePopover) { open={this._open} onClose={this.onAfterClose} onOpen={this.onAfterOpen} + accessibleName={this._colorPaletteTitle} >
diff --git a/packages/main/src/ColorPaletteTemplate.tsx b/packages/main/src/ColorPaletteTemplate.tsx index 38030e8911fb..ff82563a5b46 100644 --- a/packages/main/src/ColorPaletteTemplate.tsx +++ b/packages/main/src/ColorPaletteTemplate.tsx @@ -32,7 +32,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) { </div> } <div class="ui5-cp-item-container" - role="region" + role="group" aria-label={this.colorContainerLabel} onKeyDown={this._onColorContainerKeyDown} > From ae71ecb77651ee29196cdf8190dfca991a09161c Mon Sep 17 00:00:00 2001 From: Stoyan <abvsuxhard@gmail.com> Date: Mon, 2 Feb 2026 12:51:35 +0200 Subject: [PATCH 2/2] add accessibleNameRef --- packages/main/src/ColorPalette.ts | 15 +++++++++++++-- packages/main/src/ColorPalettePopover.ts | 18 ++++++++++++++++++ .../main/src/ColorPalettePopoverTemplate.tsx | 2 ++ 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index b6672b26a8a2..2a2c96bc8631 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -7,6 +7,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js"; @@ -141,6 +142,15 @@ class ColorPalette extends UI5Element { @property() accessibleName?: string; + /** + * Receives id(or many ids) of the elements that label the component. + * @default undefined + * @public + * @since 2.20.0 + */ + @property() + accessibleNameRef?: string; + /** * Defines the selected color, only valid CSS color values accepted * @private @@ -892,8 +902,9 @@ class ColorPalette extends UI5Element { } get colorContainerLabel() { - return this.accessibleName - ? `${ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL)} ${this.accessibleName}` + const effectiveLabel = getEffectiveAriaLabelText(this); + return effectiveLabel + ? `${ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL)} ${effectiveLabel}` : ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL); } diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index 2204a1b7d92d..29accc0b049b 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -114,6 +114,24 @@ class ColorPalettePopover extends UI5Element { @property() defaultColor?: string; + /** + * Defines the accessible name of the component. + * @default undefined + * @public + * @since 2.20.0 + */ + @property() + accessibleName?: string; + + /** + * Receives id(or many ids) of the elements that label the component. + * @default undefined + * @public + * @since 2.20.0 + */ + @property() + accessibleNameRef?: string; + /** * Defines the open | closed state of the popover. * @public diff --git a/packages/main/src/ColorPalettePopoverTemplate.tsx b/packages/main/src/ColorPalettePopoverTemplate.tsx index a2653311ede9..5efa94f27729 100644 --- a/packages/main/src/ColorPalettePopoverTemplate.tsx +++ b/packages/main/src/ColorPalettePopoverTemplate.tsx @@ -28,6 +28,8 @@ export default function ColorPalettePopoverTemplate(this: ColorPalettePopover) { showRecentColors={this.showRecentColors} showDefaultColor={this.showDefaultColor} defaultColor={this.defaultColor} + accessibleName={this.accessibleName} + accessibleNameRef={this.accessibleNameRef} popupMode={true} onItemClick={this.onSelectedColor} >