@progress/kendo-angular-toolbar 6.1.1-dev.202210141232 → 6.1.1

package/esm2015/toolbar.component.js

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, ViewChild, ContentChildren, Input, ViewChildren, HostListener, Output, EventEmitter, ViewContainerRef } from '@angular/core';
+import { guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
@@ -64,6 +65,15 @@ export class ToolBarComponent {
         this.cancelRenderedToolsSubscription$ = new Subject();
         this.subscriptions = new Subscription();
         this.popupSubs = new Subscription();
+        this.role = 'toolbar';
+        /**
+         * @hidden
+         */
+        this.overflowBtnId = guid();
+        /**
+         * @hidden
+         */
+        this.popupId = guid();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
@@ -144,9 +154,6 @@ export class ToolBarComponent {
         }
         this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
     }
-    get getRole() {
-        return 'toolbar';
-    }
     get getDir() {
         return this.direction;
     }
@@ -193,6 +200,12 @@ export class ToolBarComponent {
                     case Keys.Escape:
                         this.zone.run(() => this.toggle(false));
                         break;
+                    case Keys.Home:
+                        this.zone.run(() => this.navigationService.focusFirst(ev));
+                        break;
+                    case Keys.End:
+                        this.zone.run(() => this.navigationService.focusLast(ev));
+                        break;
                     default:
                         break;
                 }
@@ -336,6 +349,7 @@ export class ToolBarComponent {
         this.overflowRenderedTools.changes
             .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
             .subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray()));
+        this.renderer.setAttribute(this.overflowButton.nativeElement, 'aria-controls', this.popupId);
     }
     /**
      * @hidden
@@ -350,6 +364,7 @@ export class ToolBarComponent {
         if (this.overflowKeydownListener) {
             this.overflowKeydownListener();
         }
+        this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
     }
     displayAnchor() {
         const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
@@ -467,7 +482,7 @@ export class ToolBarComponent {
     }
 }
 ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.RefreshService }, { token: i4.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.getRole", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
         RefreshService,
         NavigationService,
         LocalizationService,
@@ -496,19 +511,26 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
+            [attr.aria-expanded]="popupOpen"
+            [id]="overflowBtnId"
+            aria-haspopup="menu"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-overflow-anchor k-button"
+            class="k-overflow-anchor k-button k-button-flat"
             (click)="showPopup()"
         >
             <span class="k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
-            <ul class="k-overflow-container k-list-container k-reset">
+            <ul
+                class="k-overflow-container k-list-container k-reset"
+                role="menu"
+                [id]="popupId"
+                [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of allTools; let index = index">
-                    <li class="k-item">
+                    <li class="k-item" role="menuitem">
                         <kendo-toolbar-renderer
                             #overflowRenderer
                             (rendererClick)="onRendererClick($event)"
@@ -558,19 +580,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
+            [attr.aria-expanded]="popupOpen"
+            [id]="overflowBtnId"
+            aria-haspopup="menu"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-overflow-anchor k-button"
+            class="k-overflow-anchor k-button k-button-flat"
             (click)="showPopup()"
         >
             <span class="k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
-            <ul class="k-overflow-container k-list-container k-reset">
+            <ul
+                class="k-overflow-container k-list-container k-reset"
+                role="menu"
+                [id]="popupId"
+                [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of allTools; let index = index">
-                    <li class="k-item">
+                    <li class="k-item" role="menuitem">
                         <kendo-toolbar-renderer
                             #overflowRenderer
                             (rendererClick)="onRendererClick($event)"
@@ -634,7 +663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], onFocusOut: [{
                 type: HostListener,
                 args: ['focusout', ['$event']]
-            }], getRole: [{
+            }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], getDir: [{

package/esm2015/toolbar.module.js

@@ -36,7 +36,7 @@ const TOOLBAR_COMMON = [
     LocalizedToolbarMessagesDirective
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }}) definition for the ToolBar component.
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the ToolBar component.
  *
  * The package exports:
  * - `ToolBarComponent`—The ToolBarComponent class.

package/esm2015/tools/toolbar-buttongroup.component.js

@@ -97,9 +97,10 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         return this.overflows ? this.overflowButtonGroup : this.toolbarButtonGroup;
     }
     focusButton(index, ev) {
+        var _a;
         // Guard against focusing twice on mousedown.
         if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-            this.buttonElements[index].focus();
+            (_a = this.buttonElements[index]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
 }

package/esm2015/tools/toolbar-dropdownbutton.component.js

@@ -16,11 +16,6 @@ import * as i3 from "@angular/common";
 export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
-        // showText and showIcon showIcon should be declared first
-        /**
-         * Defines the location of the button text that will be displayed.
-         */
-        this.showText = 'both';
         /**
          * Defines the location of the button icon that will be displayed.
          */
@@ -85,16 +80,21 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         };
         this._popupSettings = { animate: true, popupClass: '' };
         this.focusedIndex = -1;
+        this._showText = 'both';
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
     }
+    // showText and showIcon showIcon should be declared first
     /**
-     * Sets the text of the DropDownButton
-     * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
+     * Defines the location of the button text that will be displayed.
      */
-    set text(text) {
-        this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
-        this.overflowOptions.text = getValueForLocation(text, this.showText, true);
+    set showText(value) {
+        this._showText = value;
+        this.setTextDisplayMode();
+    }
+    ;
+    get showText() {
+        return this._showText;
     }
     /**
      * Defines an icon that will be rendered next to the button text.
@@ -159,6 +159,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
     get overflowButtons() {
         return [...this.overflowDropDownButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
     }
@@ -210,6 +213,10 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
+    setTextDisplayMode() {
+        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+    }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowDropDownButtonButtonList", first: true, predicate: ["overflowDropDownButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `

package/esm2015/tools/toolbar-splitbutton.component.js

@@ -15,11 +15,6 @@ import * as i3 from "@angular/common";
 export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
-        // showText and showIcon showIcon should be declared first
-        /**
-         * Specifies where button text should be displayed
-         */
-        this.showText = 'both';
         /**
          * Specifies where button icon should be displayed
          */
@@ -96,15 +91,21 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         };
         this._popupSettings = { animate: true, popupClass: '' };
         this.focusedIndex = -1;
+        this._showText = 'both';
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
     }
+    // showText and showIcon showIcon should be declared first
     /**
-     * Sets the text of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons).
+     * Specifies where button text should be displayed
      */
-    set text(text) {
-        this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
-        this.overflowOptions.text = getValueForLocation(text, this.showText, true);
+    set showText(value) {
+        this._showText = value;
+        this.setTextDisplayMode();
+    }
+    ;
+    get showText() {
+        return this._showText;
     }
     /**
      * Defines the icon that will be rendered next to the button text
@@ -166,6 +167,9 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
     get overflowButtons() {
         return [this.overflowSplitButton, ...this.overflowSplitButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
     }
@@ -222,6 +226,10 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
+    setTextDisplayMode() {
+        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+    }
 }
 ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowSplitButton", first: true, predicate: ["overflowSplitButton"], descendants: true, read: ElementRef }, { propertyName: "overflowSplitButtonButtonList", first: true, predicate: ["overflowSplitButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `

package/fesm2015/kendo-angular-toolbar.js

@@ -4,12 +4,12 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, Component, Input, Output, HostBinding, HostListener, Directive, forwardRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, ElementRef, NgModule } from '@angular/core';
+import * as i6 from '@progress/kendo-angular-common';
+import { Keys, guid, isDocumentAvailable, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
-import * as i6 from '@progress/kendo-angular-common';
-import { Keys, isDocumentAvailable, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
@@ -25,7 +25,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1665750746,
+    publishDate: 1667809539,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -259,7 +259,11 @@ class NavigationService {
         this.focus();
     }
     focusNext(ev) {
-        if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
+        if (this.isOverflowButtonFocused) {
+            const firstFocusableRT = this.getFocusableTools()[0];
+            this.focus(firstFocusableRT, ev);
+        }
+        else if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
             const nextRT = this.getFocusableTools().slice(this.focused.index + 1)[0];
             if (nextRT) {
                 this.focus(nextRT, ev);
@@ -268,6 +272,10 @@ class NavigationService {
                 if (this.isOverflowButtonVisible() && !this.isPopupFocused) {
                     this.focusOverflowButton();
                 }
+                else {
+                    const firstRT = this.getFocusableTools()[0];
+                    this.focus(firstRT, ev);
+                }
             }
         }
     }
@@ -276,13 +284,22 @@ class NavigationService {
             const lastFocusableRT = this.getFocusableTools().reverse()[0];
             this.focus(lastFocusableRT, ev);
         }
-        else if (this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
+        else if (!this.isOverflowButtonFocused && this.focused.renderedTool && !this.focused.renderedTool.tool.handleKey(ev)) {
             const prevRT = this.getFocusableTools()
                 .slice(0, this.focused.index)
                 .reverse()[0];
             if (prevRT) {
                 this.focus(prevRT, ev);
             }
+            else {
+                if (this.isOverflowButtonVisible() && !this.isPopupFocused) {
+                    this.focusOverflowButton();
+                }
+                else {
+                    const lastRT = this.getFocusableTools().reverse()[0];
+                    this.focus(lastRT, ev);
+                }
+            }
         }
     }
     resetNavigation() {
@@ -302,6 +319,18 @@ class NavigationService {
             overFlowButton.nativeElement.focus();
         }
     }
+    focusLast(ev) {
+        const lastTool = this.getFocusableTools().reverse()[0];
+        const overFlowButton = this.overflowButton;
+        if (lastTool) {
+            this.focused.renderedTool = lastTool;
+            this.focused.index = this.getFocusableTools().findIndex(rt => rt === lastTool);
+            this.focus(lastTool, ev);
+        }
+        else if (overFlowButton) {
+            overFlowButton.nativeElement.focus();
+        }
+    }
     getFocusableTools() {
         return this.renderedTools.filter(rt => rt.tool.overflows === this.isPopupFocused && rt.tool.canFocus());
     }
@@ -699,6 +728,15 @@ class ToolBarComponent {
         this.cancelRenderedToolsSubscription$ = new Subject();
         this.subscriptions = new Subscription();
         this.popupSubs = new Subscription();
+        this.role = 'toolbar';
+        /**
+         * @hidden
+         */
+        this.overflowBtnId = guid();
+        /**
+         * @hidden
+         */
+        this.popupId = guid();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
@@ -779,9 +817,6 @@ class ToolBarComponent {
         }
         this.element.nativeElement.setAttribute('tabindex', this.tabindex.toString());
     }
-    get getRole() {
-        return 'toolbar';
-    }
     get getDir() {
         return this.direction;
     }
@@ -828,6 +863,12 @@ class ToolBarComponent {
                     case Keys.Escape:
                         this.zone.run(() => this.toggle(false));
                         break;
+                    case Keys.Home:
+                        this.zone.run(() => this.navigationService.focusFirst(ev));
+                        break;
+                    case Keys.End:
+                        this.zone.run(() => this.navigationService.focusLast(ev));
+                        break;
                     default:
                         break;
                 }
@@ -971,6 +1012,7 @@ class ToolBarComponent {
         this.overflowRenderedTools.changes
             .pipe(takeUntil(this.cancelRenderedToolsSubscription$))
             .subscribe((rts) => this.navigationService.setRenderedTools(rts.toArray()));
+        this.renderer.setAttribute(this.overflowButton.nativeElement, 'aria-controls', this.popupId);
     }
     /**
      * @hidden
@@ -985,6 +1027,7 @@ class ToolBarComponent {
         if (this.overflowKeydownListener) {
             this.overflowKeydownListener();
         }
+        this.renderer.removeAttribute(this.overflowButton.nativeElement, 'aria-controls');
     }
     displayAnchor() {
         const visibility = this.allTools.filter(t => t.overflows && t.responsive).length > 0 ? 'visible' : 'hidden';
@@ -1102,7 +1145,7 @@ class ToolBarComponent {
     }
 }
 ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.getRole", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
+ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-widget": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
         RefreshService,
         NavigationService,
         LocalizationService,
@@ -1131,19 +1174,26 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
+            [attr.aria-expanded]="popupOpen"
+            [id]="overflowBtnId"
+            aria-haspopup="menu"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-overflow-anchor k-button"
+            class="k-overflow-anchor k-button k-button-flat"
             (click)="showPopup()"
         >
             <span class="k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
-            <ul class="k-overflow-container k-list-container k-reset">
+            <ul
+                class="k-overflow-container k-list-container k-reset"
+                role="menu"
+                [id]="popupId"
+                [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of allTools; let index = index">
-                    <li class="k-item">
+                    <li class="k-item" role="menuitem">
                         <kendo-toolbar-renderer
                             #overflowRenderer
                             (rendererClick)="onRendererClick($event)"
@@ -1193,19 +1243,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
+            [attr.aria-expanded]="popupOpen"
+            [id]="overflowBtnId"
+            aria-haspopup="menu"
             *ngIf="overflow"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-overflow-anchor k-button"
+            class="k-overflow-anchor k-button k-button-flat"
             (click)="showPopup()"
         >
             <span class="k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
-            <ul class="k-overflow-container k-list-container k-reset">
+            <ul
+                class="k-overflow-container k-list-container k-reset"
+                role="menu"
+                [id]="popupId"
+                [attr.aria-labelledby]="overflowBtnId">
                 <ng-container *ngFor="let tool of allTools; let index = index">
-                    <li class="k-item">
+                    <li class="k-item" role="menuitem">
                         <kendo-toolbar-renderer
                             #overflowRenderer
                             (rendererClick)="onRendererClick($event)"
@@ -1269,7 +1326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], onFocusOut: [{
                 type: HostListener,
                 args: ['focusout', ['$event']]
-            }], getRole: [{
+            }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], getDir: [{
@@ -1700,9 +1757,10 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         return this.overflows ? this.overflowButtonGroup : this.toolbarButtonGroup;
     }
     focusButton(index, ev) {
+        var _a;
         // Guard against focusing twice on mousedown.
         if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
-            this.buttonElements[index].focus();
+            (_a = this.buttonElements[index]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }
 }
@@ -1962,11 +2020,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
-        // showText and showIcon showIcon should be declared first
-        /**
-         * Defines the location of the button text that will be displayed.
-         */
-        this.showText = 'both';
         /**
          * Defines the location of the button icon that will be displayed.
          */
@@ -2031,16 +2084,21 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         };
         this._popupSettings = { animate: true, popupClass: '' };
         this.focusedIndex = -1;
+        this._showText = 'both';
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
     }
+    // showText and showIcon showIcon should be declared first
     /**
-     * Sets the text of the DropDownButton
-     * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
+     * Defines the location of the button text that will be displayed.
      */
-    set text(text) {
-        this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
-        this.overflowOptions.text = getValueForLocation(text, this.showText, true);
+    set showText(value) {
+        this._showText = value;
+        this.setTextDisplayMode();
+    }
+    ;
+    get showText() {
+        return this._showText;
     }
     /**
      * Defines an icon that will be rendered next to the button text.
@@ -2105,6 +2163,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
     get overflowButtons() {
         return [...this.overflowDropDownButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
     }
@@ -2156,6 +2217,10 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
+    setTextDisplayMode() {
+        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+    }
 }
 ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowDropDownButtonButtonList", first: true, predicate: ["overflowDropDownButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
@@ -2323,11 +2388,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
-        // showText and showIcon showIcon should be declared first
-        /**
-         * Specifies where button text should be displayed
-         */
-        this.showText = 'both';
         /**
          * Specifies where button icon should be displayed
          */
@@ -2404,15 +2464,21 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         };
         this._popupSettings = { animate: true, popupClass: '' };
         this.focusedIndex = -1;
+        this._showText = 'both';
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
     }
+    // showText and showIcon showIcon should be declared first
     /**
-     * Sets the text of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons).
+     * Specifies where button text should be displayed
      */
-    set text(text) {
-        this.toolbarOptions.text = getValueForLocation(text, this.showText, false);
-        this.overflowOptions.text = getValueForLocation(text, this.showText, true);
+    set showText(value) {
+        this._showText = value;
+        this.setTextDisplayMode();
+    }
+    ;
+    get showText() {
+        return this._showText;
     }
     /**
      * Defines the icon that will be rendered next to the button text
@@ -2474,6 +2540,9 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
     get overflowButtons() {
         return [this.overflowSplitButton, ...this.overflowSplitButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
     }
@@ -2530,6 +2599,10 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             this.overflowButtons[index].nativeElement.focus();
         }
     }
+    setTextDisplayMode() {
+        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+    }
 }
 ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowSplitButton", first: true, predicate: ["overflowSplitButton"], descendants: true, read: ElementRef }, { propertyName: "overflowSplitButtonButtonList", first: true, predicate: ["overflowSplitButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
@@ -2874,7 +2947,7 @@ const TOOLBAR_COMMON = [
     LocalizedToolbarMessagesDirective
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }}) definition for the ToolBar component.
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the ToolBar component.
  *
  * The package exports:
  * - `ToolBarComponent`&mdash;The ToolBarComponent class.

package/navigation.service.d.ts

@@ -25,6 +25,7 @@ export declare class NavigationService {
     focusPrev(ev: KeyboardEvent): void;
     resetNavigation(): void;
     focusFirst(ev: Event): void;
+    focusLast(ev: Event): void;
     private getFocusableTools;
     private focus;
     private blurOverflowButton;