From 672e2d7a4121107b9bd40dfe24fd9b0be95186b3 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 16 Aug 2023 11:08:11 +0300 Subject: [PATCH] Fix #13413 - Knob | Accessibility --- src/app/components/knob/knob.ts | 84 ++++++++++++++++++++++++++++++++- 1 file changed, 82 insertions(+), 2 deletions(-) diff --git a/src/app/components/knob/knob.ts b/src/app/components/knob/knob.ts index 3cf07b3230d..de9100c1647 100755 --- a/src/app/components/knob/knob.ts +++ b/src/app/components/knob/knob.ts @@ -1,5 +1,5 @@ -import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, forwardRef, ChangeDetectorRef, ElementRef, Output, EventEmitter, Renderer2, Inject } from '@angular/core'; import { CommonModule, DOCUMENT } from '@angular/common'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, NgModule, Output, Renderer2, ViewEncapsulation, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { VoidListener } from 'primeng/ts-helpers'; @@ -15,16 +15,25 @@ export const KNOB_VALUE_ACCESSOR: any = { @Component({ selector: 'p-knob', template: ` -
+
@@ -51,6 +60,21 @@ export class Knob { * @group Props */ @Input() style: { [klass: string]: any } | null | undefined; + /** + * Defines a string that labels the input for accessibility. + * @group Props + */ + @Input() ariaLabel: string | undefined; + /** + * Specifies one or more IDs in the DOM that labels the input field. + * @group Props + */ + @Input() ariaLabelledBy: string | undefined; + /** + * Index of the element in tabbing order. + * @group Props + */ + @Input() tabindex: number = 0; /** * Background of the value. * @group Props @@ -245,6 +269,62 @@ export class Knob { } } + updateModelValue(newValue) { + if (newValue > this.max) this.value = this.max; + else if (newValue < this.min) this.value = this.min; + else this.value = newValue; + + this.onModelChange(this.value); + this.onChange.emit(this.value); + } + + onKeyDown(event: KeyboardEvent) { + if (!this.disabled && !this.readonly) { + switch (event.code) { + case 'ArrowRight': + + case 'ArrowUp': { + event.preventDefault(); + this.updateModelValue(this._value + 1); + break; + } + + case 'ArrowLeft': + + case 'ArrowDown': { + event.preventDefault(); + this.updateModelValue(this._value - 1); + break; + } + + case 'Home': { + event.preventDefault(); + this.updateModelValue(this.min); + + break; + } + + case 'End': { + event.preventDefault(); + this.updateModelValue(this.max); + break; + } + + case 'PageUp': { + event.preventDefault(); + this.updateModelValue(this._value + 10); + break; + } + + case 'PageDown': { + event.preventDefault(); + this.updateModelValue(this._value - 10); + break; + } + } + } + } + writeValue(value: any): void { this.value = value; this.cd.markForCheck();