Kendo UI for Angular
Build Professional-Grade Angular UI
+Progress is the leading provider of application development and digital experience technologies. Telerik and Kendo UI are part of Progress product portfolio.
+Kendo UI for Angular delivers Kendo UI components natively developed from the ground up and intended for the Angular framework.
+Angular Accessibility Overview
+Websites and applications are accessible when they provide full control over their features by enabling users with disabilities to access their content through assistive technologies or keyboard navigation. + Accessibility consists of the following aspects:
+ + -
-
-
+
+{{ customMsgService.translate('demoInfo') }}
-Accessibility Compliance
+The accessibility support available for the Kendo UI for Angular components is based on a set of approaches for adhering to and implementing the established standards and technical specifications ensuring the seamless experience of users with disabilities.
+Accessibility Approaches in Kendo UI for Angular
+The following list summarizes how the Kendo UI for Angular team approaches accessibility when developing the component library:
+-
+
- When implementing a Kendo UI for Angular component, the team follows the WAI-ARIA specification to ensure that the right foundation for the accessibility of the component is laid. +
- From there, to guarantee accessible and semantically correct rendering, the team employs both multiple automated tests and unit tests across the Kendo UI for Angular library. +
- The team also ensures the proper usage of WAI-ARIA attributes and localized messages for labels, titles, and other elements. +
- Additionally, each component also goes through manual testing, which covers its usage with various screen readers and other accessibility aspects such as keyboard navigation. +
The team sometimes runs into scenarios not covered by the WAI-ARIA specifications. In those cases, the team taps into the web development accessibility know-how of the rest of the Progress organization. This includes feedback from accessibility-minded users and the team's expertise based on 10+ years of creating web component libraries. The knowledge-sharing across internal teams and clients helps ensure that Kendo UI for Angular can reach a certain level of accessibility compliance even with its most advanced components.
+Components Used
+This demo application is available in GitHub and is built using the following Kendo UI for Angular components.
+ +
+
+ {{ customMsgService.translate('getSource') }}
+
+
+
diff --git a/examples-standalone/coffee-warehouse/src/app/components/info/info.component.ts b/examples-standalone/coffee-warehouse/src/app/components/info/info.component.ts
index 7dfef381..e7e04671 100644
--- a/examples-standalone/coffee-warehouse/src/app/components/info/info.component.ts
+++ b/examples-standalone/coffee-warehouse/src/app/components/info/info.component.ts
@@ -1,15 +1,36 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
import { MessageService } from '@progress/kendo-angular-l10n';
import { CustomMessagesService } from '../../services/custom-messages.service';
+import { SettingsService } from '../../settings.service';
+import { isPresent } from '@progress/kendo-angular-common';
@Component({
selector: 'app-info-component',
templateUrl: './info.component.html'
})
-export class InfoComponent {
+export class InfoComponent implements AfterViewInit {
public customMsgService: CustomMessagesService;
+ public set pauseAnimation(value: boolean) {
+ this._pauseAnimation = value;
- constructor(public msgService: MessageService) {
+ if (!isPresent(this.videoElement)) { return; }
+ value ? this.videoElement.pause() : this.videoElement.play();
+ }
+
+ public ngAfterViewInit(): void {
+ this.videoElement = document.getElementById('video') as HTMLVideoElement;
+ }
+
+ private _pauseAnimation = false;
+ private videoElement: HTMLVideoElement;
+
+ constructor(public msgService: MessageService, private settingsService: SettingsService) {
this.customMsgService = this.msgService as CustomMessagesService;
+
+ this.settingsService.changes.subscribe(settings => {
+ if (settings.pauseAnimations !== this._pauseAnimation) {
+ this.pauseAnimation = settings.pauseAnimations;
+ }
+ });
}
}
diff --git a/examples-standalone/coffee-warehouse/src/app/components/menu-window/menu-window.component.ts b/examples-standalone/coffee-warehouse/src/app/components/menu-window/menu-window.component.ts
new file mode 100644
index 00000000..eae06bde
--- /dev/null
+++ b/examples-standalone/coffee-warehouse/src/app/components/menu-window/menu-window.component.ts
@@ -0,0 +1,51 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { accessibilityIcon, SVGIcon } from '@progress/kendo-svg-icons';
+
+@Component({
+ selector: 'app-menu-window',
+ template: `
+
+
+ Accessibility Settings
+
+
+
+
+
+ `
+})
+export class MenuWindowComponent implements OnInit {
+ @ViewChild('button') public button: ButtonComponent;
+ public a11yIcon: SVGIcon = accessibilityIcon;
+ public show = false;
+ public left: number;
+ public top: number;
+
+ constructor() { }
+
+ ngOnInit() { }
+
+ public toggle(): void {
+ if (!this.show) {
+ const { left, width} = this.button.element.getBoundingClientRect();
+ const { bottom } = document.querySelector('.k-appbar')!.getBoundingClientRect();
+ this.top = bottom;
+ this.left = left - 400 + width;
+ }
+
+ this.show = !this.show;
+ }
+}
diff --git a/examples-standalone/coffee-warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.css b/examples-standalone/coffee-warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.css
new file mode 100644
index 00000000..6f84115b
--- /dev/null
+++ b/examples-standalone/coffee-warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.css
@@ -0,0 +1,11 @@
+kendo-numerictextbox {
+ width: 170px;
+}
+
+.numericIncrease {
+ margin-left: 5px;
+}
+
+.numericDecrease {
+ margin-right: 5px;
+}
diff --git a/examples-standalone/coffee-warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.html b/examples-standalone/coffee-warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.html
new file mode 100644
index 00000000..679f5f14
--- /dev/null
+++ b/examples-standalone/coffee-warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples-standalone/coffee-warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.ts b/examples-standalone/coffee-warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.ts
new file mode 100644
index 00000000..36a7ac76
--- /dev/null
+++ b/examples-standalone/coffee-warehouse/src/app/components/numeric-textbox-buttons/numeric-textbox-buttons.component.ts
@@ -0,0 +1,70 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { plusIcon, minusIcon, xIcon } from '@progress/kendo-svg-icons';
+
+@Component({
+ selector: 'kendo-numeric-textbox-buttons',
+ templateUrl: './numeric-textbox-buttons.component.html',
+ styleUrl: './numeric-textbox-buttons.component.css'
+})
+export class NumericTextboxButtonsComponent {
+ @Input()
+ public value = 12;
+
+ @Input()
+ public defaultValue?: number;
+
+ @Input()
+ public min?: number;
+
+ @Input()
+ public max?: number;
+
+ @Input()
+ public step = 1;
+
+ @Input()
+ public decimals = 0;
+
+ @Input()
+ public format = '#';
+
+ @Input()
+ public clearButton = false;
+
+ @Input()
+ public showBadge = false;
+
+ @Output()
+ public valueChange: EventEmitter = new EventEmitter();
+
+ public plusIcon = plusIcon;
+ public minusIcon = minusIcon;
+ public clearIcon = xIcon;
+
+ public increaseValue(): void {
+ if (this.max && this.value + this.step >= this.max) {
+ this.value = this.max;
+ this.valueChange.emit(this.value);
+ return;
+ }
+ this.value += this.step;
+ this.valueChange.emit(this.value);
+ }
+
+ public decreaseValue(): void {
+ if (this.min && this.value - this.step <= this.min) {
+ this.value = this.min;
+ this.valueChange.emit(this.value);
+ return;
+ }
+ this.value -= this.step;
+ this.valueChange.emit(this.value);
+ }
+
+ public clearValue(): void {
+ if (this.defaultValue) {
+ this.value = this.defaultValue;
+ this.valueChange.emit(this.value);
+ }
+ }
+}
diff --git a/examples-standalone/coffee-warehouse/src/app/components/profile/profile.component.html b/examples-standalone/coffee-warehouse/src/app/components/profile/profile.component.html
index 41cbb5e4..df937bc8 100644
--- a/examples-standalone/coffee-warehouse/src/app/components/profile/profile.component.html
+++ b/examples-standalone/coffee-warehouse/src/app/components/profile/profile.component.html
@@ -116,7 +116,6 @@
-