@progress/kendo-angular-common 16.4.0-develop.5 → 16.4.0-develop.6

package/adornments/prefix.directive.d.ts

@@ -5,7 +5,7 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies the adornments in the prefix container of the [Inputs]({% slug adornments_textbox %}#toc-prefixadornments) and [DropDowns]({% slug adornments_multiselect %}#toc-prefixadornments).
+ * Specifies the adornments in the prefix container of the [Inputs](slug:adornments_textbox#toc-prefix-adornments) and [DropDowns](slug:adornments_multiselect#toc-prefix-adornments).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',

package/adornments/suffix.directive.d.ts

@@ -5,7 +5,7 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies the adornments in the suffix container of the [Inputs]({% slug adornments_textbox %}#toc-suffixadornments) and [DropDowns]({% slug adornments_multiselect %}#toc-suffixadornments).
+ * Specifies the adornments in the suffix container of the [Inputs](slug:adornments_textbox#toc-suffix-adornments) and [DropDowns](slug:adornments_multiselect#toc-suffix-adornments).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',

package/esm2020/adornments/prefix.directive.mjs

@@ -5,7 +5,7 @@
 import { Directive, Input, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies the adornments in the prefix container of the [Inputs]({% slug adornments_textbox %}#toc-prefixadornments) and [DropDowns]({% slug adornments_multiselect %}#toc-prefixadornments).
+ * Specifies the adornments in the prefix container of the [Inputs](slug:adornments_textbox#toc-prefix-adornments) and [DropDowns](slug:adornments_multiselect#toc-prefix-adornments).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',

package/esm2020/adornments/suffix.directive.mjs

@@ -5,7 +5,7 @@
 import { Directive, Input, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies the adornments in the suffix container of the [Inputs]({% slug adornments_textbox %}#toc-suffixadornments) and [DropDowns]({% slug adornments_multiselect %}#toc-suffixadornments).
+ * Specifies the adornments in the suffix container of the [Inputs](slug:adornments_textbox#toc-suffix-adornments) and [DropDowns](slug:adornments_multiselect#toc-suffix-adornments).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',

package/esm2020/toggle-button-tab-stop/toggle-button-tab-stop.directive.mjs

@@ -57,6 +57,13 @@ export class ToggleButtonTabStopDirective {
             const isClick = e instanceof PointerEvent;
             (splitButtonToggleEnter || isClick) && (this.focusButton = true);
         };
+        this.onKeyDown = (e) => {
+            if (e.keyCode === Keys.ArrowDown && e.altKey) {
+                e.stopImmediatePropagation();
+                this.focusButton = true;
+                this.button.click();
+            }
+        };
         if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
             console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
         }
@@ -74,23 +81,29 @@ export class ToggleButtonTabStopDirective {
         }
         if (this.hostComponent?.escape instanceof EventEmitter) {
             this.sub = this.hostComponent?.escape.subscribe(() => {
-                if (this.isSplitButton) {
+                this.returnFocusToToggleButton();
+            });
+            // Returns the focus to the toggle button when component is opened through it, and the Popup is closed
+            // while the active element is within the component or popup.
+            this.sub.add(this.hostComponent.close.subscribe((e) => {
+                if (!e.isDefaultPrevented() && this.focusButton) {
                     this.zone.onStable.pipe(take(1)).subscribe(() => {
-                        this.focusToggleButton();
+                        this.zone.runOutsideAngular(() => {
+                            setTimeout(() => this.focusButton = false);
+                        });
                     });
+                    const mainFocusableElement = this.hostEl.nativeElement.querySelector('.k-split-button > .k-button:first-child, .k-input-inner');
+                    const optionsListContainer = document.getElementById(`${mainFocusableElement.getAttribute('aria-controls')}`);
+                    const inList = !!optionsListContainer && optionsListContainer.contains(document.activeElement);
+                    const inWrapper = this.hostEl.nativeElement.contains(document.activeElement);
+                    const focusInComponent = inList || inWrapper;
+                    if (focusInComponent) {
+                        this.returnFocusToToggleButton();
+                    }
                 }
-                else {
-                    this.focusToggleButton();
-                }
-            });
-            this.sub.add(this.hostComponent.close.subscribe(() => {
-                this.zone.onStable.pipe(take(1)).subscribe(() => {
-                    this.zone.runOutsideAngular(() => {
-                        setTimeout(() => this.focusButton = false);
-                    });
-                });
             }));
         }
+        const close = this.hostComponent.close;
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -114,6 +127,9 @@ export class ToggleButtonTabStopDirective {
         this.button && this.renderer.setAttribute(this.button, 'tabindex', tabindex);
         this.button && this.renderer.setAttribute(this.button, 'aria-label', this.toggleButtonAriaLabel);
         this.button && this.renderer.removeAttribute(this.button, 'aria-hidden');
+        if (!this.observer) {
+            this.initializeObserver(el);
+        }
         this.removeListeners();
         this.addListeners();
     }
@@ -122,6 +138,8 @@ export class ToggleButtonTabStopDirective {
         this.button && this.renderer.setAttribute(this.button, 'aria-hidden', 'true');
         this.button && this.renderer.removeAttribute(this.button, 'aria-label');
         this.removeListeners();
+        this.observer && this.observer.disconnect();
+        this.observer = null;
     }
     addListeners() {
         if (this.button) {
@@ -129,6 +147,7 @@ export class ToggleButtonTabStopDirective {
             this.zone.runOutsideAngular(() => this.button.addEventListener('blur', this.onBlur));
             this.zone.runOutsideAngular(() => this.button.addEventListener('click', this.onClick));
             this.isSplitButton && this.zone.runOutsideAngular(() => this.button.addEventListener('keyup', this.onClick));
+            this.zone.runOutsideAngular(() => this.button.addEventListener('keydown', this.onKeyDown, true));
         }
     }
     removeListeners() {
@@ -137,12 +156,48 @@ export class ToggleButtonTabStopDirective {
             this.zone.runOutsideAngular(() => this.button.removeEventListener('blur', this.onBlur));
             this.zone.runOutsideAngular(() => this.button.removeEventListener('click', this.onClick));
             this.isSplitButton && this.zone.runOutsideAngular(() => this.button.removeEventListener('keyup', this.onClick));
+            this.zone.runOutsideAngular(() => this.button.removeEventListener('keydown', this.onKeyDown));
         }
     }
     focusToggleButton() {
         this.focusButton && this.zone.runOutsideAngular(() => this.button.focus());
         this.focusButton = false;
     }
+    returnFocusToToggleButton() {
+        if (this.isSplitButton) {
+            this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.focusToggleButton();
+            });
+        }
+        else {
+            this.focusToggleButton();
+        }
+    }
+    // Keeps the `aria-controls` and `aria-expanded` attributes of the main focusable element of the component
+    // and the toggle button element in sync.
+    initializeObserver(element) {
+        const mainFocusableElement = element.querySelector('.k-split-button > .k-button:first-child, .k-input-inner');
+        const initialExpanded = mainFocusableElement.getAttribute('aria-expanded');
+        const initialControls = mainFocusableElement.getAttribute('aria-controls');
+        this.button && this.renderer.setAttribute(this.button, 'aria-expanded', initialExpanded);
+        this.button && initialControls && this.renderer.setAttribute(this.button, 'aria-controls', initialControls);
+        this.zone.runOutsideAngular(() => {
+            const mutationConfig = { attributes: true };
+            const callback = (mutationList) => {
+                for (const mutation of mutationList) {
+                    if (mutation.attributeName === 'aria-expanded') {
+                        this.renderer.setAttribute(this.button, 'aria-expanded', mainFocusableElement.getAttribute('aria-expanded'));
+                    }
+                    else if (mutation.attributeName === 'aria-controls') {
+                        const controlsRef = mainFocusableElement.getAttribute('aria-controls');
+                        !this.isSplitButton && controlsRef ? this.renderer.setAttribute(this.button, 'aria-controls', controlsRef) : this.renderer.removeAttribute(this.button, 'aria-controls');
+                    }
+                }
+            };
+            this.observer = new MutationObserver(callback);
+            this.observer.observe(mainFocusableElement, mutationConfig);
+        });
+    }
 }
 ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.MultiTabStop }], target: i0.ɵɵFactoryTarget.Directive });
 ToggleButtonTabStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToggleButtonTabStopDirective, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });

package/fesm2015/progress-kendo-angular-common.mjs

@@ -1044,7 +1044,7 @@ function shouldShowValidationUI(isPackageValid) {
 }
 
 /**
- * Specifies the adornments in the prefix container of the [Inputs]({% slug adornments_textbox %}#toc-prefixadornments) and [DropDowns]({% slug adornments_multiselect %}#toc-prefixadornments).
+ * Specifies the adornments in the prefix container of the [Inputs](slug:adornments_textbox#toc-prefix-adornments) and [DropDowns](slug:adornments_multiselect#toc-prefix-adornments).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',
@@ -1098,7 +1098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * Specifies the adornments in the suffix container of the [Inputs]({% slug adornments_textbox %}#toc-suffixadornments) and [DropDowns]({% slug adornments_multiselect %}#toc-suffixadornments).
+ * Specifies the adornments in the suffix container of the [Inputs](slug:adornments_textbox#toc-suffix-adornments) and [DropDowns](slug:adornments_multiselect#toc-suffix-adornments).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',
@@ -1335,6 +1335,13 @@ class ToggleButtonTabStopDirective {
             const isClick = e instanceof PointerEvent;
             (splitButtonToggleEnter || isClick) && (this.focusButton = true);
         };
+        this.onKeyDown = (e) => {
+            if (e.keyCode === Keys.ArrowDown && e.altKey) {
+                e.stopImmediatePropagation();
+                this.focusButton = true;
+                this.button.click();
+            }
+        };
         if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
             console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
         }
@@ -1353,23 +1360,29 @@ class ToggleButtonTabStopDirective {
         }
         if (((_a = this.hostComponent) === null || _a === void 0 ? void 0 : _a.escape) instanceof EventEmitter) {
             this.sub = (_b = this.hostComponent) === null || _b === void 0 ? void 0 : _b.escape.subscribe(() => {
-                if (this.isSplitButton) {
+                this.returnFocusToToggleButton();
+            });
+            // Returns the focus to the toggle button when component is opened through it, and the Popup is closed
+            // while the active element is within the component or popup.
+            this.sub.add(this.hostComponent.close.subscribe((e) => {
+                if (!e.isDefaultPrevented() && this.focusButton) {
                     this.zone.onStable.pipe(take(1)).subscribe(() => {
-                        this.focusToggleButton();
+                        this.zone.runOutsideAngular(() => {
+                            setTimeout(() => this.focusButton = false);
+                        });
                     });
+                    const mainFocusableElement = this.hostEl.nativeElement.querySelector('.k-split-button > .k-button:first-child, .k-input-inner');
+                    const optionsListContainer = document.getElementById(`${mainFocusableElement.getAttribute('aria-controls')}`);
+                    const inList = !!optionsListContainer && optionsListContainer.contains(document.activeElement);
+                    const inWrapper = this.hostEl.nativeElement.contains(document.activeElement);
+                    const focusInComponent = inList || inWrapper;
+                    if (focusInComponent) {
+                        this.returnFocusToToggleButton();
+                    }
                 }
-                else {
-                    this.focusToggleButton();
-                }
-            });
-            this.sub.add(this.hostComponent.close.subscribe(() => {
-                this.zone.onStable.pipe(take(1)).subscribe(() => {
-                    this.zone.runOutsideAngular(() => {
-                        setTimeout(() => this.focusButton = false);
-                    });
-                });
             }));
         }
+        const close = this.hostComponent.close;
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -1394,6 +1407,9 @@ class ToggleButtonTabStopDirective {
         this.button && this.renderer.setAttribute(this.button, 'tabindex', tabindex);
         this.button && this.renderer.setAttribute(this.button, 'aria-label', this.toggleButtonAriaLabel);
         this.button && this.renderer.removeAttribute(this.button, 'aria-hidden');
+        if (!this.observer) {
+            this.initializeObserver(el);
+        }
         this.removeListeners();
         this.addListeners();
     }
@@ -1402,6 +1418,8 @@ class ToggleButtonTabStopDirective {
         this.button && this.renderer.setAttribute(this.button, 'aria-hidden', 'true');
         this.button && this.renderer.removeAttribute(this.button, 'aria-label');
         this.removeListeners();
+        this.observer && this.observer.disconnect();
+        this.observer = null;
     }
     addListeners() {
         if (this.button) {
@@ -1409,6 +1427,7 @@ class ToggleButtonTabStopDirective {
             this.zone.runOutsideAngular(() => this.button.addEventListener('blur', this.onBlur));
             this.zone.runOutsideAngular(() => this.button.addEventListener('click', this.onClick));
             this.isSplitButton && this.zone.runOutsideAngular(() => this.button.addEventListener('keyup', this.onClick));
+            this.zone.runOutsideAngular(() => this.button.addEventListener('keydown', this.onKeyDown, true));
         }
     }
     removeListeners() {
@@ -1417,12 +1436,48 @@ class ToggleButtonTabStopDirective {
             this.zone.runOutsideAngular(() => this.button.removeEventListener('blur', this.onBlur));
             this.zone.runOutsideAngular(() => this.button.removeEventListener('click', this.onClick));
             this.isSplitButton && this.zone.runOutsideAngular(() => this.button.removeEventListener('keyup', this.onClick));
+            this.zone.runOutsideAngular(() => this.button.removeEventListener('keydown', this.onKeyDown));
         }
     }
     focusToggleButton() {
         this.focusButton && this.zone.runOutsideAngular(() => this.button.focus());
         this.focusButton = false;
     }
+    returnFocusToToggleButton() {
+        if (this.isSplitButton) {
+            this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.focusToggleButton();
+            });
+        }
+        else {
+            this.focusToggleButton();
+        }
+    }
+    // Keeps the `aria-controls` and `aria-expanded` attributes of the main focusable element of the component
+    // and the toggle button element in sync.
+    initializeObserver(element) {
+        const mainFocusableElement = element.querySelector('.k-split-button > .k-button:first-child, .k-input-inner');
+        const initialExpanded = mainFocusableElement.getAttribute('aria-expanded');
+        const initialControls = mainFocusableElement.getAttribute('aria-controls');
+        this.button && this.renderer.setAttribute(this.button, 'aria-expanded', initialExpanded);
+        this.button && initialControls && this.renderer.setAttribute(this.button, 'aria-controls', initialControls);
+        this.zone.runOutsideAngular(() => {
+            const mutationConfig = { attributes: true };
+            const callback = (mutationList) => {
+                for (const mutation of mutationList) {
+                    if (mutation.attributeName === 'aria-expanded') {
+                        this.renderer.setAttribute(this.button, 'aria-expanded', mainFocusableElement.getAttribute('aria-expanded'));
+                    }
+                    else if (mutation.attributeName === 'aria-controls') {
+                        const controlsRef = mainFocusableElement.getAttribute('aria-controls');
+                        !this.isSplitButton && controlsRef ? this.renderer.setAttribute(this.button, 'aria-controls', controlsRef) : this.renderer.removeAttribute(this.button, 'aria-controls');
+                    }
+                }
+            };
+            this.observer = new MutationObserver(callback);
+            this.observer.observe(mainFocusableElement, mutationConfig);
+        });
+    }
 }
 ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: MultiTabStop }], target: i0.ɵɵFactoryTarget.Directive });
 ToggleButtonTabStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToggleButtonTabStopDirective, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });

package/fesm2020/progress-kendo-angular-common.mjs

@@ -1039,7 +1039,7 @@ function shouldShowValidationUI(isPackageValid) {
 }
 
 /**
- * Specifies the adornments in the prefix container of the [Inputs]({% slug adornments_textbox %}#toc-prefixadornments) and [DropDowns]({% slug adornments_multiselect %}#toc-prefixadornments).
+ * Specifies the adornments in the prefix container of the [Inputs](slug:adornments_textbox#toc-prefix-adornments) and [DropDowns](slug:adornments_multiselect#toc-prefix-adornments).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',
@@ -1091,7 +1091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 /**
- * Specifies the adornments in the suffix container of the [Inputs]({% slug adornments_textbox %}#toc-suffixadornments) and [DropDowns]({% slug adornments_multiselect %}#toc-suffixadornments).
+ * Specifies the adornments in the suffix container of the [Inputs](slug:adornments_textbox#toc-suffix-adornments) and [DropDowns](slug:adornments_multiselect#toc-suffix-adornments).
  * ```ts-no-run
  * _@Component({
  * selector: 'my-app',
@@ -1326,6 +1326,13 @@ class ToggleButtonTabStopDirective {
             const isClick = e instanceof PointerEvent;
             (splitButtonToggleEnter || isClick) && (this.focusButton = true);
         };
+        this.onKeyDown = (e) => {
+            if (e.keyCode === Keys.ArrowDown && e.altKey) {
+                e.stopImmediatePropagation();
+                this.focusButton = true;
+                this.button.click();
+            }
+        };
         if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
             console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
         }
@@ -1343,23 +1350,29 @@ class ToggleButtonTabStopDirective {
         }
         if (this.hostComponent?.escape instanceof EventEmitter) {
             this.sub = this.hostComponent?.escape.subscribe(() => {
-                if (this.isSplitButton) {
+                this.returnFocusToToggleButton();
+            });
+            // Returns the focus to the toggle button when component is opened through it, and the Popup is closed
+            // while the active element is within the component or popup.
+            this.sub.add(this.hostComponent.close.subscribe((e) => {
+                if (!e.isDefaultPrevented() && this.focusButton) {
                     this.zone.onStable.pipe(take(1)).subscribe(() => {
-                        this.focusToggleButton();
+                        this.zone.runOutsideAngular(() => {
+                            setTimeout(() => this.focusButton = false);
+                        });
                     });
+                    const mainFocusableElement = this.hostEl.nativeElement.querySelector('.k-split-button > .k-button:first-child, .k-input-inner');
+                    const optionsListContainer = document.getElementById(`${mainFocusableElement.getAttribute('aria-controls')}`);
+                    const inList = !!optionsListContainer && optionsListContainer.contains(document.activeElement);
+                    const inWrapper = this.hostEl.nativeElement.contains(document.activeElement);
+                    const focusInComponent = inList || inWrapper;
+                    if (focusInComponent) {
+                        this.returnFocusToToggleButton();
+                    }
                 }
-                else {
-                    this.focusToggleButton();
-                }
-            });
-            this.sub.add(this.hostComponent.close.subscribe(() => {
-                this.zone.onStable.pipe(take(1)).subscribe(() => {
-                    this.zone.runOutsideAngular(() => {
-                        setTimeout(() => this.focusButton = false);
-                    });
-                });
             }));
         }
+        const close = this.hostComponent.close;
     }
     ngOnChanges(changes) {
         if (!isDocumentAvailable()) {
@@ -1383,6 +1396,9 @@ class ToggleButtonTabStopDirective {
         this.button && this.renderer.setAttribute(this.button, 'tabindex', tabindex);
         this.button && this.renderer.setAttribute(this.button, 'aria-label', this.toggleButtonAriaLabel);
         this.button && this.renderer.removeAttribute(this.button, 'aria-hidden');
+        if (!this.observer) {
+            this.initializeObserver(el);
+        }
         this.removeListeners();
         this.addListeners();
     }
@@ -1391,6 +1407,8 @@ class ToggleButtonTabStopDirective {
         this.button && this.renderer.setAttribute(this.button, 'aria-hidden', 'true');
         this.button && this.renderer.removeAttribute(this.button, 'aria-label');
         this.removeListeners();
+        this.observer && this.observer.disconnect();
+        this.observer = null;
     }
     addListeners() {
         if (this.button) {
@@ -1398,6 +1416,7 @@ class ToggleButtonTabStopDirective {
             this.zone.runOutsideAngular(() => this.button.addEventListener('blur', this.onBlur));
             this.zone.runOutsideAngular(() => this.button.addEventListener('click', this.onClick));
             this.isSplitButton && this.zone.runOutsideAngular(() => this.button.addEventListener('keyup', this.onClick));
+            this.zone.runOutsideAngular(() => this.button.addEventListener('keydown', this.onKeyDown, true));
         }
     }
     removeListeners() {
@@ -1406,12 +1425,48 @@ class ToggleButtonTabStopDirective {
             this.zone.runOutsideAngular(() => this.button.removeEventListener('blur', this.onBlur));
             this.zone.runOutsideAngular(() => this.button.removeEventListener('click', this.onClick));
             this.isSplitButton && this.zone.runOutsideAngular(() => this.button.removeEventListener('keyup', this.onClick));
+            this.zone.runOutsideAngular(() => this.button.removeEventListener('keydown', this.onKeyDown));
         }
     }
     focusToggleButton() {
         this.focusButton && this.zone.runOutsideAngular(() => this.button.focus());
         this.focusButton = false;
     }
+    returnFocusToToggleButton() {
+        if (this.isSplitButton) {
+            this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.focusToggleButton();
+            });
+        }
+        else {
+            this.focusToggleButton();
+        }
+    }
+    // Keeps the `aria-controls` and `aria-expanded` attributes of the main focusable element of the component
+    // and the toggle button element in sync.
+    initializeObserver(element) {
+        const mainFocusableElement = element.querySelector('.k-split-button > .k-button:first-child, .k-input-inner');
+        const initialExpanded = mainFocusableElement.getAttribute('aria-expanded');
+        const initialControls = mainFocusableElement.getAttribute('aria-controls');
+        this.button && this.renderer.setAttribute(this.button, 'aria-expanded', initialExpanded);
+        this.button && initialControls && this.renderer.setAttribute(this.button, 'aria-controls', initialControls);
+        this.zone.runOutsideAngular(() => {
+            const mutationConfig = { attributes: true };
+            const callback = (mutationList) => {
+                for (const mutation of mutationList) {
+                    if (mutation.attributeName === 'aria-expanded') {
+                        this.renderer.setAttribute(this.button, 'aria-expanded', mainFocusableElement.getAttribute('aria-expanded'));
+                    }
+                    else if (mutation.attributeName === 'aria-controls') {
+                        const controlsRef = mainFocusableElement.getAttribute('aria-controls');
+                        !this.isSplitButton && controlsRef ? this.renderer.setAttribute(this.button, 'aria-controls', controlsRef) : this.renderer.removeAttribute(this.button, 'aria-controls');
+                    }
+                }
+            };
+            this.observer = new MutationObserver(callback);
+            this.observer.observe(mainFocusableElement, mutationConfig);
+        });
+    }
 }
 ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: MultiTabStop }], target: i0.ɵɵFactoryTarget.Directive });
 ToggleButtonTabStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToggleButtonTabStopDirective, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-common",
-  "version": "16.4.0-develop.5",
+  "version": "16.4.0-develop.6",
   "description": "Kendo UI for Angular - Utility Package",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,7 +23,7 @@
     "@progress/kendo-common": "^0.2.1",
     "@progress/kendo-draggable": "^3.0.2",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.4.0-develop.5"
+    "@progress/kendo-angular-schematics": "16.4.0-develop.6"
   },
   "publishConfig": {
     "access": "public"

package/toggle-button-tab-stop/toggle-button-tab-stop.directive.d.ts

@@ -47,6 +47,7 @@ export declare class ToggleButtonTabStopDirective {
     private sub;
     private focusButton;
     private isSplitButton;
+    private observer;
     /**
      * @hidden
      */
@@ -60,9 +61,12 @@ export declare class ToggleButtonTabStopDirective {
     private onFocus;
     private onBlur;
     private onClick;
+    private onKeyDown;
     private addListeners;
     private removeListeners;
     private focusToggleButton;
+    private returnFocusToToggleButton;
+    private initializeObserver;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleButtonTabStopDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ToggleButtonTabStopDirective, "[kendoToggleButtonTabStop]", never, { "active": "kendoToggleButtonTabStop"; "toggleButtonAriaLabel": "toggleButtonAriaLabel"; }, {}, never, never, false, never>;
 }