Skip to content

Commit

Permalink
Fix #13413 - Knob | Accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
gucal committed Aug 16, 2023
1 parent 5eb07df commit 672e2d7
Showing 1 changed file with 82 additions and 2 deletions.
84 changes: 82 additions & 2 deletions src/app/components/knob/knob.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -15,16 +15,25 @@ export const KNOB_VALUE_ACCESSOR: any = {
@Component({
selector: 'p-knob',
template: `
<div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
<div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style" [attr.data-pc-name]="'knob'" [attr.data-pc-section]="'root'">
<svg
viewBox="0 0 100 100"
role="slider"
[style.width]="size + 'px'"
[style.height]="size + 'px'"
(click)="onClick($event)"
(keydown)="onKeyDown($event)"
(mousedown)="onMouseDown($event)"
(mouseup)="onMouseUp($event)"
(touchstart)="onTouchStart($event)"
(touchend)="onTouchEnd($event)"
[attr.aria-valuemin]="min"
[attr.aria-valuemax]="max"
[attr.aria-valuenow]="_value"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.aria-label]="ariaLabel"
[attr.tabindex]="readonly || disabled ? -1 : tabindex"
[attr.data-pc-section]="'svg'"
>
<path [attr.d]="rangePath()" [attr.stroke-width]="strokeWidth" [attr.stroke]="rangeColor" class="p-knob-range"></path>
<path [attr.d]="valuePath()" [attr.stroke-width]="strokeWidth" [attr.stroke]="valueColor" class="p-knob-value"></path>
Expand All @@ -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
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit 672e2d7

Please sign in to comment.