@progress/kendo-angular-inputs 20.1.0-develop.2 → 20.1.0-develop.21

package/colorpicker/color-gradient.component.d.ts

@@ -38,7 +38,7 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
     get gradientId(): string;
     direction: string;
     get hostTabindex(): string;
-    ariaRole: string;
+    get ariaRole(): string;
     get isControlInvalid(): string;
     get isDisabled(): string | undefined;
     /**
@@ -157,6 +157,14 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
      * @default 2
      */
     gradientSliderSmallStep: number;
+    /**
+     * Controls whether ARIA attributes should be applied to the component.
+     * When used within FlatColorPicker, this should be set to false to comply with accessibility guidelines.
+     *
+     * @default true
+     * @hidden
+     */
+    ariaAttributesEnabled: boolean;
     gradientDragHandle: ElementRef;
     inputs: ColorInputComponent;
     private alphaSlider;
@@ -295,5 +303,5 @@ export declare class ColorGradientComponent implements OnInit, OnChanges, OnDest
     private unsubscribeChanges;
     private handleClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorGradientComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColorGradientComponent, "kendo-colorgradient", ["kendoColorGradient"], { "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "id": { "alias": "id"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contrastTool": { "alias": "contrastTool"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "format": { "alias": "format"; "required": false; }; "gradientSliderStep": { "alias": "gradientSliderStep"; "required": false; }; "gradientSliderSmallStep": { "alias": "gradientSliderSmallStep"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorGradientComponent, "kendo-colorgradient", ["kendoColorGradient"], { "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "id": { "alias": "id"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contrastTool": { "alias": "contrastTool"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "format": { "alias": "format"; "required": false; }; "gradientSliderStep": { "alias": "gradientSliderStep"; "required": false; }; "gradientSliderSmallStep": { "alias": "gradientSliderSmallStep"; "required": false; }; "ariaAttributesEnabled": { "alias": "ariaAttributesEnabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }

package/colorpicker/colorpicker.component.d.ts

@@ -400,6 +400,10 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
      * @hidden
      */
     handlePopupKeyDown(event: any): void;
+    /**
+     * @hidden
+     */
+    messageFor(key: string): string;
     /**
      * @hidden
      * Used by the FloatingLabel to determine if the component is empty.

package/colorpicker/localization/messages.d.ts

@@ -124,6 +124,10 @@ export declare class ColorPickerMessages extends ComponentMessages {
      * Sets the title for the ActionSheet in adaptive mode.
      */
     adaptiveTitle: string;
+    /**
+     * Sets the aria-label attribute of the ColorPicker toggle button.
+     */
+    toggleButtonLabel: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerMessages, "kendo-colorpicker-messages-base", never, { "colorPaletteNoColor": { "alias": "colorPaletteNoColor"; "required": false; }; "colorGradientNoColor": { "alias": "colorGradientNoColor"; "required": false; }; "flatColorPickerNoColor": { "alias": "flatColorPickerNoColor"; "required": false; }; "colorPickerNoColor": { "alias": "colorPickerNoColor"; "required": false; }; "colorGradientHandle": { "alias": "colorGradientHandle"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "hueSliderHandle": { "alias": "hueSliderHandle"; "required": false; }; "opacitySliderHandle": { "alias": "opacitySliderHandle"; "required": false; }; "hexInputPlaceholder": { "alias": "hexInputPlaceholder"; "required": false; }; "redInputPlaceholder": { "alias": "redInputPlaceholder"; "required": false; }; "greenInputPlaceholder": { "alias": "greenInputPlaceholder"; "required": false; }; "blueInputPlaceholder": { "alias": "blueInputPlaceholder"; "required": false; }; "alphaInputPlaceholder": { "alias": "alphaInputPlaceholder"; "required": false; }; "redChannelLabel": { "alias": "redChannelLabel"; "required": false; }; "greenChannelLabel": { "alias": "greenChannelLabel"; "required": false; }; "blueChannelLabel": { "alias": "blueChannelLabel"; "required": false; }; "alphaChannelLabel": { "alias": "alphaChannelLabel"; "required": false; }; "passContrast": { "alias": "passContrast"; "required": false; }; "failContrast": { "alias": "failContrast"; "required": false; }; "contrastRatio": { "alias": "contrastRatio"; "required": false; }; "previewColor": { "alias": "previewColor"; "required": false; }; "revertSelection": { "alias": "revertSelection"; "required": false; }; "gradientView": { "alias": "gradientView"; "required": false; }; "paletteView": { "alias": "paletteView"; "required": false; }; "formatButton": { "alias": "formatButton"; "required": false; }; "applyButton": { "alias": "applyButton"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerMessages, "kendo-colorpicker-messages-base", never, { "colorPaletteNoColor": { "alias": "colorPaletteNoColor"; "required": false; }; "colorGradientNoColor": { "alias": "colorGradientNoColor"; "required": false; }; "flatColorPickerNoColor": { "alias": "flatColorPickerNoColor"; "required": false; }; "colorPickerNoColor": { "alias": "colorPickerNoColor"; "required": false; }; "colorGradientHandle": { "alias": "colorGradientHandle"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "hueSliderHandle": { "alias": "hueSliderHandle"; "required": false; }; "opacitySliderHandle": { "alias": "opacitySliderHandle"; "required": false; }; "hexInputPlaceholder": { "alias": "hexInputPlaceholder"; "required": false; }; "redInputPlaceholder": { "alias": "redInputPlaceholder"; "required": false; }; "greenInputPlaceholder": { "alias": "greenInputPlaceholder"; "required": false; }; "blueInputPlaceholder": { "alias": "blueInputPlaceholder"; "required": false; }; "alphaInputPlaceholder": { "alias": "alphaInputPlaceholder"; "required": false; }; "redChannelLabel": { "alias": "redChannelLabel"; "required": false; }; "greenChannelLabel": { "alias": "greenChannelLabel"; "required": false; }; "blueChannelLabel": { "alias": "blueChannelLabel"; "required": false; }; "alphaChannelLabel": { "alias": "alphaChannelLabel"; "required": false; }; "passContrast": { "alias": "passContrast"; "required": false; }; "failContrast": { "alias": "failContrast"; "required": false; }; "contrastRatio": { "alias": "contrastRatio"; "required": false; }; "previewColor": { "alias": "previewColor"; "required": false; }; "revertSelection": { "alias": "revertSelection"; "required": false; }; "gradientView": { "alias": "gradientView"; "required": false; }; "paletteView": { "alias": "paletteView"; "required": false; }; "formatButton": { "alias": "formatButton"; "required": false; }; "applyButton": { "alias": "applyButton"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "toggleButtonLabel": { "alias": "toggleButtonLabel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/esm2022/colorpicker/color-gradient.component.mjs

@@ -50,7 +50,7 @@ export class ColorGradientComponent {
     injector;
     hostClasses = true;
     get readonlyAttribute() {
-        return this.readonly;
+        return this.ariaAttributesEnabled ? this.readonly : undefined;
     }
     get disabledClass() {
         return this.disabled;
@@ -62,9 +62,11 @@ export class ColorGradientComponent {
     get hostTabindex() {
         return this.tabindex?.toString() || '0';
     }
-    ariaRole = 'textbox';
+    get ariaRole() {
+        return this.ariaAttributesEnabled ? 'textbox' : undefined;
+    }
     get isControlInvalid() {
-        return (this.control?.invalid)?.toString();
+        return this.ariaAttributesEnabled ? (this.control?.invalid)?.toString() : undefined;
     }
     get isDisabled() {
         return this.disabled?.toString() || undefined;
@@ -235,6 +237,14 @@ export class ColorGradientComponent {
      * @default 2
      */
     gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
+    /**
+     * Controls whether ARIA attributes should be applied to the component.
+     * When used within FlatColorPicker, this should be set to false to comply with accessibility guidelines.
+     *
+     * @default true
+     * @hidden
+     */
+    ariaAttributesEnabled = true;
     gradientDragHandle;
     inputs;
     alphaSlider;
@@ -557,6 +567,10 @@ export class ColorGradientComponent {
         this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to ${this.adaptiveMode ? 'right' : 'top'}, transparent, ${backgroundColor})`);
     }
     setHostElementAriaLabel() {
+        if (!this.ariaAttributesEnabled) {
+            this.renderer.removeAttribute(this.host.nativeElement, 'aria-label');
+            return;
+        }
         const parsed = parseColor(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`);
     }
@@ -628,7 +642,7 @@ export class ColorGradientComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep", ariaAttributesEnabled: "ariaAttributesEnabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -1067,6 +1081,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], gradientSliderSmallStep: [{
                 type: Input
+            }], ariaAttributesEnabled: [{
+                type: Input
             }], gradientDragHandle: [{
                 type: ViewChild,
                 args: ['gradientDragHandle']

package/esm2022/colorpicker/colorpicker.component.mjs

@@ -715,6 +715,12 @@ export class ColorPickerComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localizationService.get(key);
+    }
     /**
      * @hidden
      * Used by the FloatingLabel to determine if the component is empty.
@@ -953,7 +959,9 @@ export class ColorPickerComponent {
             i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
             blueInputPlaceholder="B"
             i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
-            hexInputPlaceholder="HEX">
+            hexInputPlaceholder="HEX"
+            i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
+            toggleButtonLabel="Select color">
         </ng-container>
         <span #activeColor class="k-input-inner">
             <span
@@ -981,8 +989,8 @@ export class ColorPickerComponent {
             [fillMode]="fillMode"
             [disabled]="disabled"
             rounded="none"
-            aria-hidden="true"
             class="k-input-button"
+            [attr.aria-label]="messageFor('toggleButtonLabel')"
         >
         </button>
         <ng-template #popupTemplate>
@@ -1098,7 +1106,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
             blueInputPlaceholder="B"
             i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
-            hexInputPlaceholder="HEX">
+            hexInputPlaceholder="HEX"
+            i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
+            toggleButtonLabel="Select color">
         </ng-container>
         <span #activeColor class="k-input-inner">
             <span
@@ -1126,8 +1136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [fillMode]="fillMode"
             [disabled]="disabled"
             rounded="none"
-            aria-hidden="true"
             class="k-input-button"
+            [attr.aria-label]="messageFor('toggleButtonLabel')"
         >
         </button>
         <ng-template #popupTemplate>

package/esm2022/colorpicker/flatcolorpicker.component.mjs

@@ -649,6 +649,7 @@ export class FlatColorPickerComponent {
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                [ariaAttributesEnabled]="false"
                 (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>
@@ -674,7 +675,7 @@ export class FlatColorPickerComponent {
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()">
         </div>
-`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep", "ariaAttributesEnabled"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
@@ -780,6 +781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                [ariaAttributesEnabled]="false"
                 (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>

package/esm2022/colorpicker/localization/messages.mjs

@@ -125,8 +125,12 @@ export class ColorPickerMessages extends ComponentMessages {
      * Sets the title for the ActionSheet in adaptive mode.
      */
     adaptiveTitle;
+    /**
+     * Sets the aria-label attribute of the ColorPicker toggle button.
+     */
+    toggleButtonLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
             type: Directive,
@@ -192,4 +196,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveTitle: [{
                 type: Input
+            }], toggleButtonLabel: [{
+                type: Input
             }] } });

package/esm2022/common/radio-checkbox.base.mjs

@@ -179,7 +179,7 @@ export class RadioCheckBoxBase {
      * @hidden
      */
     get isControlInvalid() {
-        return this.control && this.control.touched && !this.control.valid;
+        return this.control?.touched && this.control?.invalid;
     }
     /**
      * Represents the visible `input` element.

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1758187423,
-    version: '20.1.0-develop.2',
+    publishDate: 1760027319,
+    version: '20.1.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/slider/slider.component.mjs

@@ -484,7 +484,6 @@ export class SliderComponent extends SliderBase {
             [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
-            aria-hidden="true"
             [attr.tabindex]="-1"
         ></button>
         <div
@@ -542,7 +541,6 @@ export class SliderComponent extends SliderBase {
             class="k-button-increase"
             [title]="incrementMessage"
             [attr.tabindex]="-1"
-            aria-hidden="true"
         ></button>
         <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
@@ -577,7 +575,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
-            aria-hidden="true"
             [attr.tabindex]="-1"
         ></button>
         <div
@@ -635,7 +632,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             class="k-button-increase"
             [title]="incrementMessage"
             [attr.tabindex]="-1"
-            aria-hidden="true"
         ></button>
         <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
   `,

package/fesm2022/progress-kendo-angular-inputs.mjs

@@ -550,8 +550,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1758187423,
-    version: '20.1.0-develop.2',
+    publishDate: 1760027319,
+    version: '20.1.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1528,7 +1528,6 @@ class SliderComponent extends SliderBase {
             [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
-            aria-hidden="true"
             [attr.tabindex]="-1"
         ></button>
         <div
@@ -1586,7 +1585,6 @@ class SliderComponent extends SliderBase {
             class="k-button-increase"
             [title]="incrementMessage"
             [attr.tabindex]="-1"
-            aria-hidden="true"
         ></button>
         <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
   `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
@@ -1621,7 +1619,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [svgIcon]="decreaseButtonArrowSVGIcon"
             class="k-button-decrease"
             [title]="decrementMessage"
-            aria-hidden="true"
             [attr.tabindex]="-1"
         ></button>
         <div
@@ -1679,7 +1676,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             class="k-button-increase"
             [title]="incrementMessage"
             [attr.tabindex]="-1"
-            aria-hidden="true"
         ></button>
         <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
   `,
@@ -6546,7 +6542,7 @@ class RadioCheckBoxBase {
      * @hidden
      */
     get isControlInvalid() {
-        return this.control && this.control.touched && !this.control.valid;
+        return this.control?.touched && this.control?.invalid;
     }
     /**
      * Represents the visible `input` element.
@@ -9283,8 +9279,12 @@ class ColorPickerMessages extends ComponentMessages {
      * Sets the title for the ActionSheet in adaptive mode.
      */
     adaptiveTitle;
+    /**
+     * Sets the aria-label attribute of the ColorPicker toggle button.
+     */
+    toggleButtonLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
             type: Directive,
@@ -9350,6 +9350,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveTitle: [{
                 type: Input
+            }], toggleButtonLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -9408,7 +9410,7 @@ class ColorGradientComponent {
     injector;
     hostClasses = true;
     get readonlyAttribute() {
-        return this.readonly;
+        return this.ariaAttributesEnabled ? this.readonly : undefined;
     }
     get disabledClass() {
         return this.disabled;
@@ -9420,9 +9422,11 @@ class ColorGradientComponent {
     get hostTabindex() {
         return this.tabindex?.toString() || '0';
     }
-    ariaRole = 'textbox';
+    get ariaRole() {
+        return this.ariaAttributesEnabled ? 'textbox' : undefined;
+    }
     get isControlInvalid() {
-        return (this.control?.invalid)?.toString();
+        return this.ariaAttributesEnabled ? (this.control?.invalid)?.toString() : undefined;
     }
     get isDisabled() {
         return this.disabled?.toString() || undefined;
@@ -9593,6 +9597,14 @@ class ColorGradientComponent {
      * @default 2
      */
     gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
+    /**
+     * Controls whether ARIA attributes should be applied to the component.
+     * When used within FlatColorPicker, this should be set to false to comply with accessibility guidelines.
+     *
+     * @default true
+     * @hidden
+     */
+    ariaAttributesEnabled = true;
     gradientDragHandle;
     inputs;
     alphaSlider;
@@ -9915,6 +9927,10 @@ class ColorGradientComponent {
         this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to ${this.adaptiveMode ? 'right' : 'top'}, transparent, ${backgroundColor})`);
     }
     setHostElementAriaLabel() {
+        if (!this.ariaAttributesEnabled) {
+            this.renderer.removeAttribute(this.host.nativeElement, 'aria-label');
+            return;
+        }
         const parsed = parseColor(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`);
     }
@@ -9986,7 +10002,7 @@ class ColorGradientComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep", ariaAttributesEnabled: "ariaAttributesEnabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
@@ -10425,6 +10441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], gradientSliderSmallStep: [{
                 type: Input
+            }], ariaAttributesEnabled: [{
+                type: Input
             }], gradientDragHandle: [{
                 type: ViewChild,
                 args: ['gradientDragHandle']
@@ -12258,6 +12276,7 @@ class FlatColorPickerComponent {
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                [ariaAttributesEnabled]="false"
                 (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>
@@ -12283,7 +12302,7 @@ class FlatColorPickerComponent {
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()">
         </div>
-`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep", "ariaAttributesEnabled"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
@@ -12389,6 +12408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
                 [gradientSliderStep]="gradientSettings.gradientSliderStep"
                 [readonly]="readonly"
+                [ariaAttributesEnabled]="false"
                 (keydown.tab)="focusFirstHeaderButton()"
                 (valueChange)="handleValueChange($event)"
             ></kendo-colorgradient>
@@ -13459,6 +13479,12 @@ class ColorPickerComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localizationService.get(key);
+    }
     /**
      * @hidden
      * Used by the FloatingLabel to determine if the component is empty.
@@ -13697,7 +13723,9 @@ class ColorPickerComponent {
             i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
             blueInputPlaceholder="B"
             i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
-            hexInputPlaceholder="HEX">
+            hexInputPlaceholder="HEX"
+            i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
+            toggleButtonLabel="Select color">
         </ng-container>
         <span #activeColor class="k-input-inner">
             <span
@@ -13725,8 +13753,8 @@ class ColorPickerComponent {
             [fillMode]="fillMode"
             [disabled]="disabled"
             rounded="none"
-            aria-hidden="true"
             class="k-input-button"
+            [attr.aria-label]="messageFor('toggleButtonLabel')"
         >
         </button>
         <ng-template #popupTemplate>
@@ -13842,7 +13870,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
             blueInputPlaceholder="B"
             i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
-            hexInputPlaceholder="HEX">
+            hexInputPlaceholder="HEX"
+            i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
+            toggleButtonLabel="Select color">
         </ng-container>
         <span #activeColor class="k-input-inner">
             <span
@@ -13870,8 +13900,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [fillMode]="fillMode"
             [disabled]="disabled"
             rounded="none"
-            aria-hidden="true"
             class="k-input-button"
+            [attr.aria-label]="messageFor('toggleButtonLabel')"
         >
         </button>
         <ng-template #popupTemplate>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "20.1.0-develop.2",
+  "version": "20.1.0-develop.21",
   "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -28,7 +28,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1758187423,
+      "publishDate": 1760027319,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -40,20 +40,20 @@
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "20.1.0-develop.2",
-    "@progress/kendo-angular-common": "20.1.0-develop.2",
-    "@progress/kendo-angular-utils": "20.1.0-develop.2",
-    "@progress/kendo-angular-navigation": "20.1.0-develop.2",
-    "@progress/kendo-angular-dialog": "20.1.0-develop.2",
-    "@progress/kendo-angular-intl": "20.1.0-develop.2",
-    "@progress/kendo-angular-l10n": "20.1.0-develop.2",
-    "@progress/kendo-angular-popup": "20.1.0-develop.2",
-    "@progress/kendo-angular-icons": "20.1.0-develop.2",
+    "@progress/kendo-angular-buttons": "20.1.0-develop.21",
+    "@progress/kendo-angular-common": "20.1.0-develop.21",
+    "@progress/kendo-angular-utils": "20.1.0-develop.21",
+    "@progress/kendo-angular-navigation": "20.1.0-develop.21",
+    "@progress/kendo-angular-dialog": "20.1.0-develop.21",
+    "@progress/kendo-angular-intl": "20.1.0-develop.21",
+    "@progress/kendo-angular-l10n": "20.1.0-develop.21",
+    "@progress/kendo-angular-popup": "20.1.0-develop.21",
+    "@progress/kendo-angular-icons": "20.1.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "20.1.0-develop.2",
+    "@progress/kendo-angular-schematics": "20.1.0-develop.21",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.0",
     "@progress/kendo-inputs-common": "^3.1.0"