@progress/kendo-angular-inputs 10.1.1-dev.202210121020 → 10.1.1-dev.202210241319

package/esm2015/colorpicker/color-gradient.component.js

@@ -2,8 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, ViewChild, ElementRef, Output, EventEmitter, HostBinding, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, Input, ViewChild, Output, EventEmitter, HostBinding, forwardRef, HostListener } from '@angular/core';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -13,7 +13,7 @@ import { containsFocus, isUntouched } from '../common/dom-utils';
 import { parseColor, getHSV, getColorFromHSV, getColorFromHue } from './utils';
 import { isPresent, fitIntoBounds } from '../common/utils';
 import { ColorGradientLocalizationService } from './localization/colorgradient-localization.service';
-import { DEFAULT_GRADIENT_BACKGROUND_COLOR, DEFAULT_OUTPUT_FORMAT, DRAGHANDLE_MOVE_SPEED } from './constants';
+import { DEFAULT_GRADIENT_BACKGROUND_COLOR, DEFAULT_OUTPUT_FORMAT, DRAGHANDLE_MOVE_SPEED, DRAGHANDLE_MOVE_SPEED_SMALL_STEP } from './constants';
 import { packageMetadata } from '../package-metadata';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
@@ -30,13 +30,15 @@ let serial = 0;
  * The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
 export class ColorGradientComponent {
-    constructor(host, ngZone, renderer, cdr, localizationService) {
+    constructor(host, ngZone, renderer, cdr, localizationService, injector) {
         this.host = host;
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.cdr = cdr;
         this.localizationService = localizationService;
+        this.injector = injector;
         this.hostClasses = true;
+        this.ariaRole = 'textbox';
         /**
          * @hidden
          */
@@ -97,11 +99,28 @@ export class ColorGradientComponent {
          * updated on moving the drag handle or the sliders.
          */
         this.hsva = new BehaviorSubject({});
+        /**
+         * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.
+         *
+         * @default 5
+         */
+        this.gradientSliderStep = DRAGHANDLE_MOVE_SPEED;
+        /**
+         * Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.
+         *
+         * @default 2
+         */
+        this.gradientSliderSmallStep = DRAGHANDLE_MOVE_SPEED_SMALL_STEP;
+        /**
+         * @hidden
+         */
+        this.internalNavigation = false;
         this._tabindex = 0;
         this.listeners = [];
         this.hueSliderTouched = false;
         this.alphaSliderTouched = false;
         this.updateValues = new Subject();
+        this.hsvHandleCoordinates = { x: 0, y: 0 };
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
         validatePackage(packageMetadata);
@@ -119,7 +138,42 @@ export class ColorGradientComponent {
         return this.id;
     }
     get hostTabindex() {
-        return this.tabindex;
+        var _a;
+        return ((_a = this.tabindex) === null || _a === void 0 ? void 0 : _a.toString()) || '0';
+    }
+    get isControlInvalid() {
+        var _a, _b;
+        return (_b = ((_a = this.control) === null || _a === void 0 ? void 0 : _a.invalid)) === null || _b === void 0 ? void 0 : _b.toString();
+    }
+    get isDisabled() {
+        var _a;
+        return ((_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString()) || undefined;
+    }
+    /**
+     * @hidden
+     */
+    enterHandler(event) {
+        if (event.target !== this.host.nativeElement) {
+            return;
+        }
+        this.internalNavigation = true;
+        this.gradientDragHandle.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    escapeHandler(event) {
+        if (!this.host.nativeElement.matches(':focus')) {
+            event.stopImmediatePropagation();
+        }
+        this.internalNavigation = false;
+        this.host.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    focusHandler(ev) {
+        this.internalNavigation = ev.target !== this.host.nativeElement;
     }
     /**
      * Specifies the value of the initially selected color.
@@ -180,12 +234,27 @@ export class ColorGradientComponent {
     get gradientRect() {
         return this.gradientWrapper.nativeElement.getBoundingClientRect();
     }
+    /**
+     * @hidden
+     */
+    get hsvSliderValueText() {
+        return `X: ${this.hsvHandleCoordinates.x} Y: ${this.hsvHandleCoordinates.y}`;
+    }
     /**
      * @hidden
      */
     get contrastToolVisible() {
         return this.contrastTool && this.contrastTool.length > 0;
     }
+    /**
+     * @hidden
+     */
+    get innerTabIndex() {
+        return this.internalNavigation ? 0 : -1;
+    }
+    ngOnInit() {
+        this.control = this.injector.get(NgControl, null);
+    }
     ngAfterViewInit() {
         this.updateUI();
         this.cdr.detectChanges();
@@ -268,18 +337,19 @@ export class ColorGradientComponent {
             this.renderer.addClass(this.gradientWrapper.nativeElement, 'k-dragging');
             let keyboardMoveX = 0;
             let keyboardMoveY = 0;
+            const shiftKey = args.shiftKey;
             switch (args.key) {
                 case 'ArrowRight':
-                    keyboardMoveX = DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveX = shiftKey ? this.gradientSliderSmallStep : this.gradientSliderStep;
                     break;
                 case 'ArrowLeft':
-                    keyboardMoveX = -DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveX = shiftKey ? -this.gradientSliderSmallStep : -this.gradientSliderStep;
                     break;
                 case 'ArrowUp':
-                    keyboardMoveY = -DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveY = shiftKey ? -this.gradientSliderSmallStep : -this.gradientSliderStep;
                     break;
                 case 'ArrowDown':
-                    keyboardMoveY = DRAGHANDLE_MOVE_SPEED;
+                    keyboardMoveY = shiftKey ? this.gradientSliderSmallStep : this.gradientSliderStep;
                     break;
                 default: break;
             }
@@ -375,7 +445,7 @@ export class ColorGradientComponent {
      */
     get colorGradientHandleAriaLabel() {
         const parsed = parseColor(this.value, this.format, this.opacity);
-        return `${this.value ? parsed : this.localizationService.get('colorGradientHandle')}`;
+        return `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`;
     }
     /**
      * @hidden
@@ -427,6 +497,7 @@ export class ColorGradientComponent {
     }
     setDragHandleElementPosition(top, left) {
         const dragHandle = this.gradientDragHandle.nativeElement;
+        this.hsvHandleCoordinates = { x: left, y: top };
         this.renderer.setStyle(dragHandle, 'top', `${top}px`);
         this.renderer.setStyle(dragHandle, 'left', `${left}px`);
     }
@@ -499,8 +570,8 @@ export class ColorGradientComponent {
         }
     }
 }
-ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { 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" } }, providers: [
+ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
+ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", 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" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -519,7 +590,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: L10N_PREFIX,
             useValue: 'kendo.colorgradient'
         }
-    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true, read: ElementRef }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoColorGradientLocalizedMessages
             i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
             colorGradientNoColor="Colorgradient no color chosen"
@@ -538,7 +609,23 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
             contrastRatio="Contrast ratio"
             i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
-            formatButton="Change color format">
+            formatButton="Change color format"
+            i18n-redChannelLabel="kendo.colorgradient.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorgradient.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorgradient.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorgradient.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
             <div class="k-hsv-rectangle" #hsvRectangle>
@@ -553,10 +640,16 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     <div
                         #gradientDragHandle
                         class="k-hsv-draghandle k-draghandle"
-                        tabindex="0"
+                        [tabindex]="innerTabIndex.toString()"
                         [attr.title]="colorGradientHandleTitle"
-                        [attr.aria-label]="colorGradientHandleAriaLabel"
-                    >
+                        [attr.aria-label]="colorGradientHandleTitle + ' ' + colorGradientHandleAriaLabel"
+                        role="slider"
+                        [attr.aria-valuetext]="hsvSliderValueText"
+                        [attr.aria-readonly]="readonly ? readonly : undefined"
+                        [attr.aria-disabled]="disabled ? disabled : undefined"
+                        [attr.aria-orientation]="'undefined'"
+                        [attr.aria-valuenow]="'0'"
+                        (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
                     </div>
                 </div>
                 <svg kendoColorContrastSvg
@@ -571,22 +664,24 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
                 <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
                     *ngIf="clearButton"
+                    role="button"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
-                    tabindex="0">
+                    [tabindex]="innerTabIndex.toString()">
                     <span class="k-icon k-i-droplet-slash"></span>
                 </span>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-hue-slider k-colorgradient-slider"
                     [dragHandleTitle]="hueSliderTitle"
+                    [tabindex]="innerTabIndex"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [showButtons]="false"
-                    [tickPlacement]="'none'"
+                    tickPlacement="none"
                     [vertical]="true"
                     [min]="0"
                     [max]="360"
@@ -599,13 +694,14 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 <kendo-slider
                     *ngIf="opacity"
                     #alphaSlider
+                    [tabindex]="innerTabIndex"
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-alpha-slider k-colorgradient-slider"
                     [dragHandleTitle]="opacitySliderTitle"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [showButtons]="false"
-                    [tickPlacement]="'none'"
+                    tickPlacement="none"
                     [vertical]="true"
                     [min]="0"
                     [max]="100"
@@ -618,12 +714,14 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </div>
         </div>
         <kendo-colorinput  #inputs
+            [tabindex]="innerTabIndex"
             [opacity]="opacity"
             [formatView]="format"
             [value]="value"
             [disabled]="disabled"
             [readonly]="readonly"
             (valueChange)="handleInputsValueChange($event)"
+            (tabOut)="gradientDragHandle.focus()"
         >
         </kendo-colorinput>
         <div class="k-colorgradient-color-contrast k-vbox"
@@ -632,7 +730,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, isInline: true, styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "], components: [{ type: i2.ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i3.SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: i4.ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange"] }, { type: i5.ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: i6.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i7.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "], components: [{ type: i2.ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i3.SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: i4.ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: i5.ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: i6.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i7.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
@@ -677,7 +775,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
             contrastRatio="Contrast ratio"
             i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
-            formatButton="Change color format">
+            formatButton="Change color format"
+            i18n-redChannelLabel="kendo.colorgradient.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorgradient.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorgradient.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorgradient.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
             <div class="k-hsv-rectangle" #hsvRectangle>
@@ -692,10 +806,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <div
                         #gradientDragHandle
                         class="k-hsv-draghandle k-draghandle"
-                        tabindex="0"
+                        [tabindex]="innerTabIndex.toString()"
                         [attr.title]="colorGradientHandleTitle"
-                        [attr.aria-label]="colorGradientHandleAriaLabel"
-                    >
+                        [attr.aria-label]="colorGradientHandleTitle + ' ' + colorGradientHandleAriaLabel"
+                        role="slider"
+                        [attr.aria-valuetext]="hsvSliderValueText"
+                        [attr.aria-readonly]="readonly ? readonly : undefined"
+                        [attr.aria-disabled]="disabled ? disabled : undefined"
+                        [attr.aria-orientation]="'undefined'"
+                        [attr.aria-valuenow]="'0'"
+                        (keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
                     </div>
                 </div>
                 <svg kendoColorContrastSvg
@@ -710,22 +830,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
                 <span class="k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon"
                     *ngIf="clearButton"
+                    role="button"
                     (click)="reset()"
                     (keydown.enter)="reset()"
                     (keydown.space)="reset()"
                     [attr.aria-label]="clearButtonTitle"
                     [attr.title]="clearButtonTitle"
-                    tabindex="0">
+                    [tabindex]="innerTabIndex.toString()">
                     <span class="k-icon k-i-droplet-slash"></span>
                 </span>
                 <kendo-slider
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-hue-slider k-colorgradient-slider"
                     [dragHandleTitle]="hueSliderTitle"
+                    [tabindex]="innerTabIndex"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [showButtons]="false"
-                    [tickPlacement]="'none'"
+                    tickPlacement="none"
                     [vertical]="true"
                     [min]="0"
                     [max]="360"
@@ -738,13 +860,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 <kendo-slider
                     *ngIf="opacity"
                     #alphaSlider
+                    [tabindex]="innerTabIndex"
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-alpha-slider k-colorgradient-slider"
                     [dragHandleTitle]="opacitySliderTitle"
                     [disabled]="disabled"
                     [readonly]="readonly"
                     [showButtons]="false"
-                    [tickPlacement]="'none'"
+                    tickPlacement="none"
                     [vertical]="true"
                     [min]="0"
                     [max]="100"
@@ -757,12 +880,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </div>
         </div>
         <kendo-colorinput  #inputs
+            [tabindex]="innerTabIndex"
             [opacity]="opacity"
             [formatView]="format"
             [value]="value"
             [disabled]="disabled"
             [readonly]="readonly"
             (valueChange)="handleInputsValueChange($event)"
+            (tabOut)="gradientDragHandle.focus()"
         >
         </kendo-colorinput>
         <div class="k-colorgradient-color-contrast k-vbox"
@@ -792,7 +917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
     `]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorgradient']
             }], readonlyAttribute: [{
@@ -810,6 +935,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], hostTabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
+            }], ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isControlInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], enterHandler: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }], escapeHandler: [{
+                type: HostListener,
+                args: ['keydown.escape', ['$event']]
+            }], focusHandler: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
             }], id: [{
                 type: Input
             }], opacity: [{
@@ -832,19 +975,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], gradientSliderStep: [{
+                type: Input
+            }], gradientSliderSmallStep: [{
+                type: Input
             }], gradientDragHandle: [{
                 type: ViewChild,
-                args: ['gradientDragHandle', { read: ElementRef, static: false }]
+                args: ['gradientDragHandle']
             }], inputs: [{
                 type: ViewChild,
-                args: ['inputs', { static: false }]
+                args: ['inputs']
             }], alphaSlider: [{
                 type: ViewChild,
-                args: ['alphaSlider', { static: false }]
+                args: ['alphaSlider']
             }], gradientWrapper: [{
                 type: ViewChild,
-                args: ['gradientWrapper', { static: false }]
+                args: ['gradientWrapper']
             }], hsvRectangle: [{
                 type: ViewChild,
-                args: ['hsvRectangle', { static: false }]
+                args: ['hsvRectangle']
             }] } });