@progress/kendo-angular-menu 11.3.0-develop.1 → 11.3.0-develop.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/esm2020/context-menu/context-menu.component.mjs +3 -1
  2. package/esm2020/menu.component.mjs +13 -4
  3. package/esm2020/package-metadata.mjs +2 -2
  4. package/esm2020/rendering/arrow.component.mjs +4 -4
  5. package/esm2020/rendering/list.component.mjs +29 -13
  6. package/fesm2015/progress-kendo-angular-menu.mjs +51 -24
  7. package/fesm2020/progress-kendo-angular-menu.mjs +51 -24
  8. package/menu.component.d.ts +5 -1
  9. package/package.json +6 -6
  10. package/rendering/arrow.component.d.ts +1 -1
  11. package/rendering/list.component.d.ts +1 -2
package/esm2020/context-menu/context-menu.component.mjs CHANGED
@@ -358,6 +358,7 @@ ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
358
358
  <ng-template #default>
359
359
  <kendo-menu [items]="rootItems"
360
360
  [size]="size"
361
+ ariaRole="menu"
361
362
  [vertical]="vertical"
362
363
  [openOnClick]="openOnClick"
363
364
  [hoverDelay]="hoverDelay"
@@ -366,7 +367,7 @@ ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
366
367
  [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
367
368
  ></kendo-menu>
368
369
  </ng-template>
369
- `, isInline: true, components: [{ type: i3.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
370
+ `, isInline: true, components: [{ type: i3.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
370
371
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextMenuComponent, decorators: [{
371
372
  type: Component,
372
373
  args: [{
@@ -397,6 +398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
397
398
  <ng-template #default>
398
399
  <kendo-menu [items]="rootItems"
399
400
  [size]="size"
401
+ ariaRole="menu"
400
402
  [vertical]="vertical"
401
403
  [openOnClick]="openOnClick"
402
404
  [hoverDelay]="hoverDelay"
package/esm2020/menu.component.mjs CHANGED
@@ -53,6 +53,10 @@ export class MenuComponent extends MenuBase {
53
53
  this.ngZone = ngZone;
54
54
  this.renderer = renderer;
55
55
  this.contextService = contextService;
56
+ /**
57
+ * @hidden
58
+ */
59
+ this.ariaRole = 'menubar';
56
60
  /**
57
61
  * Fires when a Menu item is selected ([see example]({% slug routing_menu %})).
58
62
  */
@@ -97,10 +101,11 @@ export class MenuComponent extends MenuBase {
97
101
  */
98
102
  get menuClasses() {
99
103
  const sizeClass = getSizeClass(this.size);
104
+ const staticClasses = 'k-reset k-header k-menu';
100
105
  if (this.isContextMenu) {
101
106
  return `k-context-menu k-menu-group ${sizeClass}`;
102
107
  }
103
- return this.vertical ? 'k-widget k-reset k-header k-menu k-menu-vertical' : 'k-widget k-reset k-header k-menu k-menu-horizontal';
108
+ return `${staticClasses} k-menu-${this.vertical ? 'vertical' : 'horizontal'}`;
104
109
  }
105
110
  /**
106
111
  * Opens or closes the specified Menu items.
@@ -191,7 +196,7 @@ export class MenuComponent extends MenuBase {
191
196
  }
192
197
  }
193
198
  MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MenuComponent, deps: [{ token: i1.ItemsService }, { token: i2.HoverService }, { token: i3.ActionsService }, { token: i4.NavigationService }, { token: i5.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i6.ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
194
- MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MenuComponent, selector: "kendo-menu", inputs: { menuItemTemplate: "menuItemTemplate", menuItemLinkTemplate: "menuItemLinkTemplate" }, outputs: { select: "select", open: "open", close: "close" }, host: { properties: { "class.k-rtl": "this.direction" } }, providers: [
199
+ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MenuComponent, selector: "kendo-menu", inputs: { menuItemTemplate: "menuItemTemplate", ariaRole: "ariaRole", menuItemLinkTemplate: "menuItemLinkTemplate" }, outputs: { select: "select", open: "open", close: "close" }, host: { properties: { "class.k-rtl": "this.direction" } }, providers: [
195
200
  ItemsService,
196
201
  ActionsService,
197
202
  NavigationService,
@@ -206,7 +211,8 @@ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
206
211
  useExisting: forwardRef(() => MenuComponent)
207
212
  }
208
213
  ], exportAs: ["kendoMenu"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
209
- <ul role="menubar"
214
+ <ul
215
+ [attr.role]="ariaRole"
210
216
  [attr.aria-orientation]="ariaOrientation"
211
217
  kendoMenuList [items]="rootItems" [level]="0"
212
218
  [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
@@ -236,7 +242,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
236
242
  ],
237
243
  selector: 'kendo-menu',
238
244
  template: `
239
- <ul role="menubar"
245
+ <ul
246
+ [attr.role]="ariaRole"
240
247
  [attr.aria-orientation]="ariaOrientation"
241
248
  kendoMenuList [items]="rootItems" [level]="0"
242
249
  [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
@@ -250,6 +257,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
250
257
  type: Optional
251
258
  }] }]; }, propDecorators: { menuItemTemplate: [{
252
259
  type: Input
260
+ }], ariaRole: [{
261
+ type: Input
253
262
  }], menuItemLinkTemplate: [{
254
263
  type: Input
255
264
  }], select: [{
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-menu',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1676463583,
13
- version: '11.3.0-develop.1',
12
+ publishDate: 1677599164,
13
+ version: '11.3.0-develop.11',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/esm2020/rendering/arrow.component.mjs CHANGED
@@ -16,7 +16,7 @@ export class ExpandArrowComponent {
16
16
  constructor(itemsService) {
17
17
  this.itemsService = itemsService;
18
18
  this.hostClasses = true;
19
- this.role = 'presentation';
19
+ this.ariaHidden = 'true';
20
20
  }
21
21
  ngOnInit() {
22
22
  if (isDevMode() && !this.index) {
@@ -28,7 +28,7 @@ export class ExpandArrowComponent {
28
28
  }
29
29
  }
30
30
  ExpandArrowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpandArrowComponent, deps: [{ token: i1.ItemsService }], target: i0.ɵɵFactoryTarget.Component });
31
- ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ExpandArrowComponent, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
31
+ ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ExpandArrowComponent, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
32
32
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpandArrowComponent, decorators: [{
33
33
  type: Component,
34
34
  args: [{
@@ -41,7 +41,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
41
41
  }], hostClasses: [{
42
42
  type: HostBinding,
43
43
  args: ['class.k-menu-expand-arrow']
44
- }], role: [{
44
+ }], ariaHidden: [{
45
45
  type: HostBinding,
46
- args: ['attr.role']
46
+ args: ['attr.aria-hidden']
47
47
  }] } });
package/esm2020/rendering/list.component.mjs CHANGED
@@ -180,24 +180,40 @@ export class ListComponent {
180
180
  }
181
181
  }
182
182
  ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, deps: [{ token: i1.ItemsService }, { token: i2.HoverService }, { token: i3.ActionsService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
183
- ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "[kendoMenuList]", inputs: { items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <li *ngIf=\"!item.separator\" kendoMenuItem\n [item]=\"item\" [level]=\"level\" [size]=\"size\" [vertical]=\"vertical\" [animate]=\"animate\" [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\" [itemLinkTemplate]=\"itemLinkTemplate\" [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\" [siblingIndex]=\"idx\" [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\" [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n <li *ngIf=\"item.separator\" class=\"k-separator k-item\"\n role=\"separator\" [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n </ng-container>\n ", isInline: true, components: [{ type: i0.forwardRef(function () { return ItemComponent; }), selector: "[kendoMenuItem]", inputs: ["item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i5.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
183
+ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "[kendoMenuList]", inputs: { items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <li *ngIf=\"!item.separator\" \n kendoMenuItem\n [item]=\"item\"\n [level]=\"level\"\n [size]=\"size\"\n [vertical]=\"vertical\"\n [animate]=\"animate\"\n [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\"\n [itemLinkTemplate]=\"itemLinkTemplate\"\n [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\"\n [siblingIndex]=\"idx\"\n [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\"\n [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n <li \n *ngIf=\"item.separator\"\n class=\"k-separator k-item\"\n [ngClass]=\"item.cssClass\"\n aria-hidden=\"true\"\n [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n </ng-container>\n ", isInline: true, components: [{ type: i0.forwardRef(function () { return ItemComponent; }), selector: "[kendoMenuItem]", inputs: ["item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i5.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
184
184
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, decorators: [{
185
185
  type: Component,
186
186
  args: [{
187
187
  selector: '[kendoMenuList]',
188
188
  template: `
189
189
  <ng-container *ngFor="let item of items; let idx = index">
190
- <li *ngIf="!item.separator" kendoMenuItem
191
- [item]="item" [level]="level" [size]="size" [vertical]="vertical" [animate]="animate" [rtl]="rtl"
192
- [itemTemplate]="itemTemplate" [itemLinkTemplate]="itemLinkTemplate" [openOnClick]="openOnClick"
193
- [index]="hierarchyIndex(idx)" [siblingIndex]="idx" [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
194
- [ngClass]="item.cssClass" [ngStyle]="item.cssStyle"
190
+ <li *ngIf="!item.separator"
191
+ kendoMenuItem
192
+ [item]="item"
193
+ [level]="level"
194
+ [size]="size"
195
+ [vertical]="vertical"
196
+ [animate]="animate"
197
+ [rtl]="rtl"
198
+ [itemTemplate]="itemTemplate"
199
+ [itemLinkTemplate]="itemLinkTemplate"
200
+ [openOnClick]="openOnClick"
201
+ [index]="hierarchyIndex(idx)"
202
+ [siblingIndex]="idx"
203
+ [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
204
+ [ngClass]="item.cssClass"
205
+ [ngStyle]="item.cssStyle"
195
206
  role="menuitem"
196
207
  class="k-item k-menu-item"
197
- [class.k-first]="idx === 0" [class.k-last]="idx === items.length - 1"
208
+ [class.k-first]="idx === 0"
209
+ [class.k-last]="idx === items.length - 1"
198
210
  [class.k-disabled]="item.disabled"></li>
199
- <li *ngIf="item.separator" class="k-separator k-item"
200
- role="separator" [ngClass]="item.cssClass" [ngStyle]="item.cssStyle">
211
+ <li
212
+ *ngIf="item.separator"
213
+ class="k-separator k-item"
214
+ [ngClass]="item.cssClass"
215
+ aria-hidden="true"
216
+ [ngStyle]="item.cssStyle">
201
217
  &nbsp;
202
218
  </li>
203
219
  </ng-container>
@@ -378,7 +394,7 @@ export class ItemComponent {
378
394
  animate: animate
379
395
  });
380
396
  this.setAttribute('aria-expanded', 'true');
381
- this.setAttribute('aria-owns', this.childId);
397
+ this.setAttribute('aria-controls', this.childId);
382
398
  this.changeDetector.detectChanges();
383
399
  }
384
400
  }
@@ -391,7 +407,7 @@ export class ItemComponent {
391
407
  }
392
408
  this.changeDetector.detectChanges();
393
409
  this.setAttribute('aria-expanded', 'false');
394
- this.renderer.removeAttribute(this.element.nativeElement, 'aria-owns');
410
+ this.renderer.removeAttribute(this.element.nativeElement, 'aria-controls');
395
411
  }
396
412
  }
397
413
  navigate() {
@@ -461,7 +477,7 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
461
477
  </ng-container>
462
478
  <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
463
479
  </ng-template>
464
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
480
+ <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
465
481
  </ng-template>
466
482
  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
467
483
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemComponent, decorators: [{
@@ -517,7 +533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
517
533
  </ng-container>
518
534
  <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
519
535
  </ng-template>
520
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
536
+ <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
521
537
  </ng-template>
522
538
  `
523
539
  }]
package/fesm2015/progress-kendo-angular-menu.mjs CHANGED
@@ -23,8 +23,8 @@ const packageMetadata = {
23
23
  name: '@progress/kendo-angular-menu',
24
24
  productName: 'Kendo UI for Angular',
25
25
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
26
- publishDate: 1676463583,
27
- version: '11.3.0-develop.1',
26
+ publishDate: 1677599164,
27
+ version: '11.3.0-develop.11',
28
28
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
29
29
  };
30
30
 
@@ -1425,24 +1425,40 @@ class ListComponent {
1425
1425
  }
1426
1426
  }
1427
1427
  ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1428
- ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "[kendoMenuList]", inputs: { items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <li *ngIf=\"!item.separator\" kendoMenuItem\n [item]=\"item\" [level]=\"level\" [size]=\"size\" [vertical]=\"vertical\" [animate]=\"animate\" [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\" [itemLinkTemplate]=\"itemLinkTemplate\" [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\" [siblingIndex]=\"idx\" [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\" [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n <li *ngIf=\"item.separator\" class=\"k-separator k-item\"\n role=\"separator\" [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n </ng-container>\n ", isInline: true, components: [{ type: i0.forwardRef(function () { return ItemComponent; }), selector: "[kendoMenuItem]", inputs: ["item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i5.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1428
+ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "[kendoMenuList]", inputs: { items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <li *ngIf=\"!item.separator\" \n kendoMenuItem\n [item]=\"item\"\n [level]=\"level\"\n [size]=\"size\"\n [vertical]=\"vertical\"\n [animate]=\"animate\"\n [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\"\n [itemLinkTemplate]=\"itemLinkTemplate\"\n [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\"\n [siblingIndex]=\"idx\"\n [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\"\n [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n <li \n *ngIf=\"item.separator\"\n class=\"k-separator k-item\"\n [ngClass]=\"item.cssClass\"\n aria-hidden=\"true\"\n [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n </ng-container>\n ", isInline: true, components: [{ type: i0.forwardRef(function () { return ItemComponent; }), selector: "[kendoMenuItem]", inputs: ["item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i5.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1429
1429
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, decorators: [{
1430
1430
  type: Component,
1431
1431
  args: [{
1432
1432
  selector: '[kendoMenuList]',
1433
1433
  template: `
1434
1434
  <ng-container *ngFor="let item of items; let idx = index">
1435
- <li *ngIf="!item.separator" kendoMenuItem
1436
- [item]="item" [level]="level" [size]="size" [vertical]="vertical" [animate]="animate" [rtl]="rtl"
1437
- [itemTemplate]="itemTemplate" [itemLinkTemplate]="itemLinkTemplate" [openOnClick]="openOnClick"
1438
- [index]="hierarchyIndex(idx)" [siblingIndex]="idx" [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
1439
- [ngClass]="item.cssClass" [ngStyle]="item.cssStyle"
1435
+ <li *ngIf="!item.separator"
1436
+ kendoMenuItem
1437
+ [item]="item"
1438
+ [level]="level"
1439
+ [size]="size"
1440
+ [vertical]="vertical"
1441
+ [animate]="animate"
1442
+ [rtl]="rtl"
1443
+ [itemTemplate]="itemTemplate"
1444
+ [itemLinkTemplate]="itemLinkTemplate"
1445
+ [openOnClick]="openOnClick"
1446
+ [index]="hierarchyIndex(idx)"
1447
+ [siblingIndex]="idx"
1448
+ [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
1449
+ [ngClass]="item.cssClass"
1450
+ [ngStyle]="item.cssStyle"
1440
1451
  role="menuitem"
1441
1452
  class="k-item k-menu-item"
1442
- [class.k-first]="idx === 0" [class.k-last]="idx === items.length - 1"
1453
+ [class.k-first]="idx === 0"
1454
+ [class.k-last]="idx === items.length - 1"
1443
1455
  [class.k-disabled]="item.disabled"></li>
1444
- <li *ngIf="item.separator" class="k-separator k-item"
1445
- role="separator" [ngClass]="item.cssClass" [ngStyle]="item.cssStyle">
1456
+ <li
1457
+ *ngIf="item.separator"
1458
+ class="k-separator k-item"
1459
+ [ngClass]="item.cssClass"
1460
+ aria-hidden="true"
1461
+ [ngStyle]="item.cssStyle">
1446
1462
  &nbsp;
1447
1463
  </li>
1448
1464
  </ng-container>
@@ -1623,7 +1639,7 @@ class ItemComponent {
1623
1639
  animate: animate
1624
1640
  });
1625
1641
  this.setAttribute('aria-expanded', 'true');
1626
- this.setAttribute('aria-owns', this.childId);
1642
+ this.setAttribute('aria-controls', this.childId);
1627
1643
  this.changeDetector.detectChanges();
1628
1644
  }
1629
1645
  }
@@ -1636,7 +1652,7 @@ class ItemComponent {
1636
1652
  }
1637
1653
  this.changeDetector.detectChanges();
1638
1654
  this.setAttribute('aria-expanded', 'false');
1639
- this.renderer.removeAttribute(this.element.nativeElement, 'aria-owns');
1655
+ this.renderer.removeAttribute(this.element.nativeElement, 'aria-controls');
1640
1656
  }
1641
1657
  }
1642
1658
  navigate() {
@@ -1706,7 +1722,7 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
1706
1722
  </ng-container>
1707
1723
  <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
1708
1724
  </ng-template>
1709
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
1725
+ <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
1710
1726
  </ng-template>
1711
1727
  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1712
1728
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemComponent, decorators: [{
@@ -1762,7 +1778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1762
1778
  </ng-container>
1763
1779
  <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
1764
1780
  </ng-template>
1765
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
1781
+ <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
1766
1782
  </ng-template>
1767
1783
  `
1768
1784
  }]
@@ -1843,6 +1859,10 @@ class MenuComponent extends MenuBase {
1843
1859
  this.ngZone = ngZone;
1844
1860
  this.renderer = renderer;
1845
1861
  this.contextService = contextService;
1862
+ /**
1863
+ * @hidden
1864
+ */
1865
+ this.ariaRole = 'menubar';
1846
1866
  /**
1847
1867
  * Fires when a Menu item is selected ([see example]({% slug routing_menu %})).
1848
1868
  */
@@ -1887,10 +1907,11 @@ class MenuComponent extends MenuBase {
1887
1907
  */
1888
1908
  get menuClasses() {
1889
1909
  const sizeClass = getSizeClass(this.size);
1910
+ const staticClasses = 'k-reset k-header k-menu';
1890
1911
  if (this.isContextMenu) {
1891
1912
  return `k-context-menu k-menu-group ${sizeClass}`;
1892
1913
  }
1893
- return this.vertical ? 'k-widget k-reset k-header k-menu k-menu-vertical' : 'k-widget k-reset k-header k-menu k-menu-horizontal';
1914
+ return `${staticClasses} k-menu-${this.vertical ? 'vertical' : 'horizontal'}`;
1894
1915
  }
1895
1916
  /**
1896
1917
  * Opens or closes the specified Menu items.
@@ -1981,7 +2002,7 @@ class MenuComponent extends MenuBase {
1981
2002
  }
1982
2003
  }
1983
2004
  MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MenuComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i3.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1984
- MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MenuComponent, selector: "kendo-menu", inputs: { menuItemTemplate: "menuItemTemplate", menuItemLinkTemplate: "menuItemLinkTemplate" }, outputs: { select: "select", open: "open", close: "close" }, host: { properties: { "class.k-rtl": "this.direction" } }, providers: [
2005
+ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MenuComponent, selector: "kendo-menu", inputs: { menuItemTemplate: "menuItemTemplate", ariaRole: "ariaRole", menuItemLinkTemplate: "menuItemLinkTemplate" }, outputs: { select: "select", open: "open", close: "close" }, host: { properties: { "class.k-rtl": "this.direction" } }, providers: [
1985
2006
  ItemsService,
1986
2007
  ActionsService,
1987
2008
  NavigationService,
@@ -1996,7 +2017,8 @@ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
1996
2017
  useExisting: forwardRef(() => MenuComponent)
1997
2018
  }
1998
2019
  ], exportAs: ["kendoMenu"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
1999
- <ul role="menubar"
2020
+ <ul
2021
+ [attr.role]="ariaRole"
2000
2022
  [attr.aria-orientation]="ariaOrientation"
2001
2023
  kendoMenuList [items]="rootItems" [level]="0"
2002
2024
  [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
@@ -2026,7 +2048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2026
2048
  ],
2027
2049
  selector: 'kendo-menu',
2028
2050
  template: `
2029
- <ul role="menubar"
2051
+ <ul
2052
+ [attr.role]="ariaRole"
2030
2053
  [attr.aria-orientation]="ariaOrientation"
2031
2054
  kendoMenuList [items]="rootItems" [level]="0"
2032
2055
  [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
@@ -2042,6 +2065,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2042
2065
  }] }];
2043
2066
  }, propDecorators: { menuItemTemplate: [{
2044
2067
  type: Input
2068
+ }], ariaRole: [{
2069
+ type: Input
2045
2070
  }], menuItemLinkTemplate: [{
2046
2071
  type: Input
2047
2072
  }], select: [{
@@ -2111,7 +2136,7 @@ class ExpandArrowComponent {
2111
2136
  constructor(itemsService) {
2112
2137
  this.itemsService = itemsService;
2113
2138
  this.hostClasses = true;
2114
- this.role = 'presentation';
2139
+ this.ariaHidden = 'true';
2115
2140
  }
2116
2141
  ngOnInit() {
2117
2142
  if (isDevMode() && !this.index) {
@@ -2123,7 +2148,7 @@ class ExpandArrowComponent {
2123
2148
  }
2124
2149
  }
2125
2150
  ExpandArrowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpandArrowComponent, deps: [{ token: ItemsService }], target: i0.ɵɵFactoryTarget.Component });
2126
- ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ExpandArrowComponent, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
2151
+ ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ExpandArrowComponent, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
2127
2152
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpandArrowComponent, decorators: [{
2128
2153
  type: Component,
2129
2154
  args: [{
@@ -2136,9 +2161,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2136
2161
  }], hostClasses: [{
2137
2162
  type: HostBinding,
2138
2163
  args: ['class.k-menu-expand-arrow']
2139
- }], role: [{
2164
+ }], ariaHidden: [{
2140
2165
  type: HostBinding,
2141
- args: ['attr.role']
2166
+ args: ['attr.aria-hidden']
2142
2167
  }] } });
2143
2168
 
2144
2169
  /**
@@ -2956,6 +2981,7 @@ ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
2956
2981
  <ng-template #default>
2957
2982
  <kendo-menu [items]="rootItems"
2958
2983
  [size]="size"
2984
+ ariaRole="menu"
2959
2985
  [vertical]="vertical"
2960
2986
  [openOnClick]="openOnClick"
2961
2987
  [hoverDelay]="hoverDelay"
@@ -2964,7 +2990,7 @@ ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
2964
2990
  [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
2965
2991
  ></kendo-menu>
2966
2992
  </ng-template>
2967
- `, isInline: true, components: [{ type: MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
2993
+ `, isInline: true, components: [{ type: MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
2968
2994
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextMenuComponent, decorators: [{
2969
2995
  type: Component,
2970
2996
  args: [{
@@ -2995,6 +3021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2995
3021
  <ng-template #default>
2996
3022
  <kendo-menu [items]="rootItems"
2997
3023
  [size]="size"
3024
+ ariaRole="menu"
2998
3025
  [vertical]="vertical"
2999
3026
  [openOnClick]="openOnClick"
3000
3027
  [hoverDelay]="hoverDelay"
package/fesm2020/progress-kendo-angular-menu.mjs CHANGED
@@ -23,8 +23,8 @@ const packageMetadata = {
23
23
  name: '@progress/kendo-angular-menu',
24
24
  productName: 'Kendo UI for Angular',
25
25
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
26
- publishDate: 1676463583,
27
- version: '11.3.0-develop.1',
26
+ publishDate: 1677599164,
27
+ version: '11.3.0-develop.11',
28
28
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
29
29
  };
30
30
 
@@ -1419,24 +1419,40 @@ class ListComponent {
1419
1419
  }
1420
1420
  }
1421
1421
  ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1422
- ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "[kendoMenuList]", inputs: { items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <li *ngIf=\"!item.separator\" kendoMenuItem\n [item]=\"item\" [level]=\"level\" [size]=\"size\" [vertical]=\"vertical\" [animate]=\"animate\" [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\" [itemLinkTemplate]=\"itemLinkTemplate\" [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\" [siblingIndex]=\"idx\" [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\" [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n <li *ngIf=\"item.separator\" class=\"k-separator k-item\"\n role=\"separator\" [ngClass]=\"item.cssClass\" [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n </ng-container>\n ", isInline: true, components: [{ type: i0.forwardRef(function () { return ItemComponent; }), selector: "[kendoMenuItem]", inputs: ["item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i5.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1422
+ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "[kendoMenuList]", inputs: { items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <li *ngIf=\"!item.separator\" \n kendoMenuItem\n [item]=\"item\"\n [level]=\"level\"\n [size]=\"size\"\n [vertical]=\"vertical\"\n [animate]=\"animate\"\n [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\"\n [itemLinkTemplate]=\"itemLinkTemplate\"\n [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\"\n [siblingIndex]=\"idx\"\n [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\"\n [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n <li \n *ngIf=\"item.separator\"\n class=\"k-separator k-item\"\n [ngClass]=\"item.cssClass\"\n aria-hidden=\"true\"\n [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n </ng-container>\n ", isInline: true, components: [{ type: i0.forwardRef(function () { return ItemComponent; }), selector: "[kendoMenuItem]", inputs: ["item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i0.forwardRef(function () { return i5.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i0.forwardRef(function () { return i5.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i5.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i0.forwardRef(function () { return i5.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1423
1423
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, decorators: [{
1424
1424
  type: Component,
1425
1425
  args: [{
1426
1426
  selector: '[kendoMenuList]',
1427
1427
  template: `
1428
1428
  <ng-container *ngFor="let item of items; let idx = index">
1429
- <li *ngIf="!item.separator" kendoMenuItem
1430
- [item]="item" [level]="level" [size]="size" [vertical]="vertical" [animate]="animate" [rtl]="rtl"
1431
- [itemTemplate]="itemTemplate" [itemLinkTemplate]="itemLinkTemplate" [openOnClick]="openOnClick"
1432
- [index]="hierarchyIndex(idx)" [siblingIndex]="idx" [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
1433
- [ngClass]="item.cssClass" [ngStyle]="item.cssStyle"
1429
+ <li *ngIf="!item.separator"
1430
+ kendoMenuItem
1431
+ [item]="item"
1432
+ [level]="level"
1433
+ [size]="size"
1434
+ [vertical]="vertical"
1435
+ [animate]="animate"
1436
+ [rtl]="rtl"
1437
+ [itemTemplate]="itemTemplate"
1438
+ [itemLinkTemplate]="itemLinkTemplate"
1439
+ [openOnClick]="openOnClick"
1440
+ [index]="hierarchyIndex(idx)"
1441
+ [siblingIndex]="idx"
1442
+ [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
1443
+ [ngClass]="item.cssClass"
1444
+ [ngStyle]="item.cssStyle"
1434
1445
  role="menuitem"
1435
1446
  class="k-item k-menu-item"
1436
- [class.k-first]="idx === 0" [class.k-last]="idx === items.length - 1"
1447
+ [class.k-first]="idx === 0"
1448
+ [class.k-last]="idx === items.length - 1"
1437
1449
  [class.k-disabled]="item.disabled"></li>
1438
- <li *ngIf="item.separator" class="k-separator k-item"
1439
- role="separator" [ngClass]="item.cssClass" [ngStyle]="item.cssStyle">
1450
+ <li
1451
+ *ngIf="item.separator"
1452
+ class="k-separator k-item"
1453
+ [ngClass]="item.cssClass"
1454
+ aria-hidden="true"
1455
+ [ngStyle]="item.cssStyle">
1440
1456
  &nbsp;
1441
1457
  </li>
1442
1458
  </ng-container>
@@ -1617,7 +1633,7 @@ class ItemComponent {
1617
1633
  animate: animate
1618
1634
  });
1619
1635
  this.setAttribute('aria-expanded', 'true');
1620
- this.setAttribute('aria-owns', this.childId);
1636
+ this.setAttribute('aria-controls', this.childId);
1621
1637
  this.changeDetector.detectChanges();
1622
1638
  }
1623
1639
  }
@@ -1630,7 +1646,7 @@ class ItemComponent {
1630
1646
  }
1631
1647
  this.changeDetector.detectChanges();
1632
1648
  this.setAttribute('aria-expanded', 'false');
1633
- this.renderer.removeAttribute(this.element.nativeElement, 'aria-owns');
1649
+ this.renderer.removeAttribute(this.element.nativeElement, 'aria-controls');
1634
1650
  }
1635
1651
  }
1636
1652
  navigate() {
@@ -1700,7 +1716,7 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
1700
1716
  </ng-container>
1701
1717
  <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
1702
1718
  </ng-template>
1703
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
1719
+ <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
1704
1720
  </ng-template>
1705
1721
  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1706
1722
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemComponent, decorators: [{
@@ -1756,7 +1772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1756
1772
  </ng-container>
1757
1773
  <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
1758
1774
  </ng-template>
1759
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
1775
+ <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
1760
1776
  </ng-template>
1761
1777
  `
1762
1778
  }]
@@ -1835,6 +1851,10 @@ class MenuComponent extends MenuBase {
1835
1851
  this.ngZone = ngZone;
1836
1852
  this.renderer = renderer;
1837
1853
  this.contextService = contextService;
1854
+ /**
1855
+ * @hidden
1856
+ */
1857
+ this.ariaRole = 'menubar';
1838
1858
  /**
1839
1859
  * Fires when a Menu item is selected ([see example]({% slug routing_menu %})).
1840
1860
  */
@@ -1879,10 +1899,11 @@ class MenuComponent extends MenuBase {
1879
1899
  */
1880
1900
  get menuClasses() {
1881
1901
  const sizeClass = getSizeClass(this.size);
1902
+ const staticClasses = 'k-reset k-header k-menu';
1882
1903
  if (this.isContextMenu) {
1883
1904
  return `k-context-menu k-menu-group ${sizeClass}`;
1884
1905
  }
1885
- return this.vertical ? 'k-widget k-reset k-header k-menu k-menu-vertical' : 'k-widget k-reset k-header k-menu k-menu-horizontal';
1906
+ return `${staticClasses} k-menu-${this.vertical ? 'vertical' : 'horizontal'}`;
1886
1907
  }
1887
1908
  /**
1888
1909
  * Opens or closes the specified Menu items.
@@ -1973,7 +1994,7 @@ class MenuComponent extends MenuBase {
1973
1994
  }
1974
1995
  }
1975
1996
  MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MenuComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i3.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1976
- MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MenuComponent, selector: "kendo-menu", inputs: { menuItemTemplate: "menuItemTemplate", menuItemLinkTemplate: "menuItemLinkTemplate" }, outputs: { select: "select", open: "open", close: "close" }, host: { properties: { "class.k-rtl": "this.direction" } }, providers: [
1997
+ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MenuComponent, selector: "kendo-menu", inputs: { menuItemTemplate: "menuItemTemplate", ariaRole: "ariaRole", menuItemLinkTemplate: "menuItemLinkTemplate" }, outputs: { select: "select", open: "open", close: "close" }, host: { properties: { "class.k-rtl": "this.direction" } }, providers: [
1977
1998
  ItemsService,
1978
1999
  ActionsService,
1979
2000
  NavigationService,
@@ -1988,7 +2009,8 @@ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
1988
2009
  useExisting: forwardRef(() => MenuComponent)
1989
2010
  }
1990
2011
  ], exportAs: ["kendoMenu"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
1991
- <ul role="menubar"
2012
+ <ul
2013
+ [attr.role]="ariaRole"
1992
2014
  [attr.aria-orientation]="ariaOrientation"
1993
2015
  kendoMenuList [items]="rootItems" [level]="0"
1994
2016
  [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
@@ -2018,7 +2040,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2018
2040
  ],
2019
2041
  selector: 'kendo-menu',
2020
2042
  template: `
2021
- <ul role="menubar"
2043
+ <ul
2044
+ [attr.role]="ariaRole"
2022
2045
  [attr.aria-orientation]="ariaOrientation"
2023
2046
  kendoMenuList [items]="rootItems" [level]="0"
2024
2047
  [size]="size" [vertical]="vertical" [rtl]="rtl" [animate]="animate" [openOnClick]="openOnClick"
@@ -2032,6 +2055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2032
2055
  type: Optional
2033
2056
  }] }]; }, propDecorators: { menuItemTemplate: [{
2034
2057
  type: Input
2058
+ }], ariaRole: [{
2059
+ type: Input
2035
2060
  }], menuItemLinkTemplate: [{
2036
2061
  type: Input
2037
2062
  }], select: [{
@@ -2101,7 +2126,7 @@ class ExpandArrowComponent {
2101
2126
  constructor(itemsService) {
2102
2127
  this.itemsService = itemsService;
2103
2128
  this.hostClasses = true;
2104
- this.role = 'presentation';
2129
+ this.ariaHidden = 'true';
2105
2130
  }
2106
2131
  ngOnInit() {
2107
2132
  if (isDevMode() && !this.index) {
@@ -2113,7 +2138,7 @@ class ExpandArrowComponent {
2113
2138
  }
2114
2139
  }
2115
2140
  ExpandArrowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpandArrowComponent, deps: [{ token: ItemsService }], target: i0.ɵɵFactoryTarget.Component });
2116
- ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ExpandArrowComponent, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
2141
+ ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ExpandArrowComponent, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
2117
2142
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpandArrowComponent, decorators: [{
2118
2143
  type: Component,
2119
2144
  args: [{
@@ -2126,9 +2151,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2126
2151
  }], hostClasses: [{
2127
2152
  type: HostBinding,
2128
2153
  args: ['class.k-menu-expand-arrow']
2129
- }], role: [{
2154
+ }], ariaHidden: [{
2130
2155
  type: HostBinding,
2131
- args: ['attr.role']
2156
+ args: ['attr.aria-hidden']
2132
2157
  }] } });
2133
2158
 
2134
2159
  /**
@@ -2944,6 +2969,7 @@ ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
2944
2969
  <ng-template #default>
2945
2970
  <kendo-menu [items]="rootItems"
2946
2971
  [size]="size"
2972
+ ariaRole="menu"
2947
2973
  [vertical]="vertical"
2948
2974
  [openOnClick]="openOnClick"
2949
2975
  [hoverDelay]="hoverDelay"
@@ -2952,7 +2978,7 @@ ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
2952
2978
  [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
2953
2979
  ></kendo-menu>
2954
2980
  </ng-template>
2955
- `, isInline: true, components: [{ type: MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
2981
+ `, isInline: true, components: [{ type: MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }] });
2956
2982
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContextMenuComponent, decorators: [{
2957
2983
  type: Component,
2958
2984
  args: [{
@@ -2983,6 +3009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2983
3009
  <ng-template #default>
2984
3010
  <kendo-menu [items]="rootItems"
2985
3011
  [size]="size"
3012
+ ariaRole="menu"
2986
3013
  [vertical]="vertical"
2987
3014
  [openOnClick]="openOnClick"
2988
3015
  [hoverDelay]="hoverDelay"
package/menu.component.d.ts CHANGED
@@ -43,6 +43,10 @@ export declare class MenuComponent extends MenuBase implements OnChanges, AfterV
43
43
  * @hidden
44
44
  */
45
45
  menuItemTemplate: TemplateRef<any>;
46
+ /**
47
+ * @hidden
48
+ */
49
+ ariaRole: string;
46
50
  /**
47
51
  * @hidden
48
52
  */
@@ -94,5 +98,5 @@ export declare class MenuComponent extends MenuBase implements OnChanges, AfterV
94
98
  private unsubscribeClick;
95
99
  private contextKeyDown;
96
100
  static ɵfac: i0.ɵɵFactoryDeclaration<MenuComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
97
- static ɵcmp: i0.ɵɵComponentDeclaration<MenuComponent, "kendo-menu", ["kendoMenu"], { "menuItemTemplate": "menuItemTemplate"; "menuItemLinkTemplate": "menuItemLinkTemplate"; }, { "select": "select"; "open": "open"; "close": "close"; }, never, never>;
101
+ static ɵcmp: i0.ɵɵComponentDeclaration<MenuComponent, "kendo-menu", ["kendoMenu"], { "menuItemTemplate": "menuItemTemplate"; "ariaRole": "ariaRole"; "menuItemLinkTemplate": "menuItemLinkTemplate"; }, { "select": "select"; "open": "open"; "close": "close"; }, never, never>;
98
102
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-menu",
3
- "version": "11.3.0-develop.1",
3
+ "version": "11.3.0-develop.11",
4
4
  "description": "Kendo UI Angular Menu component",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -23,15 +23,15 @@
23
23
  "@angular/core": "13 - 15",
24
24
  "@angular/platform-browser": "13 - 15",
25
25
  "@progress/kendo-licensing": "^1.0.2",
26
- "@progress/kendo-angular-common": "11.3.0-develop.1",
27
- "@progress/kendo-angular-l10n": "11.3.0-develop.1",
28
- "@progress/kendo-angular-icons": "11.3.0-develop.1",
29
- "@progress/kendo-angular-popup": "11.3.0-develop.1",
26
+ "@progress/kendo-angular-common": "11.3.0-develop.11",
27
+ "@progress/kendo-angular-l10n": "11.3.0-develop.11",
28
+ "@progress/kendo-angular-icons": "11.3.0-develop.11",
29
+ "@progress/kendo-angular-popup": "11.3.0-develop.11",
30
30
  "rxjs": "^6.5.3 || ^7.0.0"
31
31
  },
32
32
  "dependencies": {
33
33
  "tslib": "^2.3.1",
34
- "@progress/kendo-angular-schematics": "11.3.0-develop.1"
34
+ "@progress/kendo-angular-schematics": "11.3.0-develop.11"
35
35
  },
36
36
  "schematics": "./schematics/collection.json",
37
37
  "module": "fesm2015/progress-kendo-angular-menu.mjs",
package/rendering/arrow.component.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare class ExpandArrowComponent implements OnInit {
17
17
  */
18
18
  index: string;
19
19
  hostClasses: boolean;
20
- role: string;
20
+ ariaHidden: string;
21
21
  private item;
22
22
  /**
23
23
  * @hidden
package/rendering/list.component.d.ts CHANGED
@@ -12,7 +12,6 @@ import { ActionsService } from '../services/actions.service';
12
12
  import { HoverService } from '../services/hover.service';
13
13
  import { ItemsService } from '../services/items.service';
14
14
  import { NavigationService } from '../services/navigation.service';
15
- import { SVGIcon } from '@progress/kendo-svg-icons';
16
15
  import * as i0 from "@angular/core";
17
16
  /**
18
17
  * @hidden
@@ -96,7 +95,7 @@ export declare class ItemComponent {
96
95
  /**
97
96
  * @hidden
98
97
  */
99
- SVGIcon: (horizontal: boolean, rtl: boolean) => SVGIcon;
98
+ SVGIcon: (horizontal: boolean, rtl: boolean) => import("@progress/kendo-svg-icons").SVGIcon;
100
99
  opened: boolean;
101
100
  navigating: boolean;
102
101
  childId: string;