@progress/kendo-angular-buttons 25.1.0-develop.2 → 25.1.0-develop.20

package/fesm2022/progress-kendo-angular-buttons.mjs

@@ -49,8 +49,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1786694082,
-    version: '25.1.0-develop.2',
+    publishDate: 1787938291,
+    version: '25.1.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2651,6 +2651,12 @@ class ListButton extends MultiTabStop {
         }
         const value = open ?? !this.openState;
         this._toggle(value, false);
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => this.zone.run(() => this.focusService.focus(value ? 0 : -1)));
+        });
     }
     /**
      * @hidden
@@ -6772,6 +6778,10 @@ class SegmentedControlComponent {
      * @hidden
      */
     selectedButtonIndex = 0;
+    /**
+     * @hidden
+     */
+    isActiveTabStop = signal(true, ...(ngDevMode ? [{ debugName: "isActiveTabStop" }] : []));
     _items = [];
     _size;
     _layoutMode = 'compact';
@@ -6815,10 +6825,53 @@ class SegmentedControlComponent {
     /**
      * @hidden
      */
-    handleKeydown(event, button) {
-        if (button.disabled && (event.code === Keys.Enter || event.code === Keys.NumpadEnter || event.code === Keys.Space)) {
+    handleKeydown(event, button, index) {
+        const code = normalizeKeys(event);
+        if (button.disabled && (code === Keys.Enter || code === Keys.NumpadEnter || code === Keys.Space)) {
             event.preventDefault();
+            return;
+        }
+        if (code === Keys.ArrowLeft || code === Keys.ArrowRight) {
+            const moved = this.moveFocus(index, code === Keys.ArrowRight ? 1 : -1);
+            if (moved) {
+                event.preventDefault();
+            }
+        }
+    }
+    /**
+     * @hidden
+     * Marks whether the SegmentedControl is currently the active tab-stop item in a host
+     * toolbar's own roving tabindex (e.g. Gantt, Scheduler).
+     */
+    setIsActiveTabStop(tabbable) {
+        this.isActiveTabStop.set(tabbable);
+    }
+    /**
+     * @hidden
+     * Moves DOM focus to the currently selected button. Used by host toolbars.
+     */
+    focusSelectedButton(preventScroll = true) {
+        this.focusButtonAt(this.selectedButtonIndex, preventScroll);
+    }
+    /**
+     * Moves DOM focus to the adjacent button in the given direction. Disabled buttons are not
+     * skipped so that keyboard users are still made aware of their presence and disabled state.
+     */
+    moveFocus(currentIndex, step) {
+        const count = this._items.length;
+        const index = currentIndex + step;
+        if (index < 0 || index >= count) {
+            return false;
+        }
+        this.focusButtonAt(index, false);
+        return true;
+    }
+    focusButtonAt(index, preventScroll) {
+        if (!isDocumentAvailable()) {
+            return;
         }
+        const buttons = this.wrapper.nativeElement.querySelectorAll('.k-segmented-control-button');
+        buttons[index]?.focus({ preventScroll });
     }
     handleSizeClass(newValue, prevValue) {
         if (!this.wrapper) {
@@ -6873,8 +6926,9 @@ class SegmentedControlComponent {
                 [attr.aria-disabled]="button.disabled ? true : null"
                 [attr.title]="button.title"
                 [attr.aria-label]="button.title && !button.text ? button.title : null"
+                [attr.tabindex]="isActiveTabStop() && selectedButtonIndex === idx ? 0 : -1"
                 (click)="handleClick(button, idx)"
-                (keydown)="handleKeydown($event, button)"
+                (keydown)="handleKeydown($event, button, idx)"
                 [class.k-selected]="selectedButtonIndex === idx"
                 [attr.aria-pressed]="selectedButtonIndex === idx ? 'true' : 'false'">
                 @if (button.icon || button.svgIcon) {
@@ -6916,8 +6970,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                 [attr.aria-disabled]="button.disabled ? true : null"
                 [attr.title]="button.title"
                 [attr.aria-label]="button.title && !button.text ? button.title : null"
+                [attr.tabindex]="isActiveTabStop() && selectedButtonIndex === idx ? 0 : -1"
                 (click)="handleClick(button, idx)"
-                (keydown)="handleKeydown($event, button)"
+                (keydown)="handleKeydown($event, button, idx)"
                 [class.k-selected]="selectedButtonIndex === idx"
                 [attr.aria-pressed]="selectedButtonIndex === idx ? 'true' : 'false'">
                 @if (button.icon || button.svgIcon) {

package/index.d.ts

@@ -2866,6 +2866,10 @@ declare class SegmentedControlComponent implements AfterViewInit, OnDestroy {
      * @hidden
      */
     selectedButtonIndex: number;
+    /**
+     * @hidden
+     */
+    isActiveTabStop: i0.WritableSignal<boolean>;
     private _items;
     private _size;
     private _layoutMode;
@@ -2881,7 +2885,24 @@ declare class SegmentedControlComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden
      */
-    handleKeydown(event: KeyboardEvent, button: SegmentedItemSettings): void;
+    handleKeydown(event: KeyboardEvent, button: SegmentedItemSettings, index: number): void;
+    /**
+     * @hidden
+     * Marks whether the SegmentedControl is currently the active tab-stop item in a host
+     * toolbar's own roving tabindex (e.g. Gantt, Scheduler).
+     */
+    setIsActiveTabStop(tabbable: boolean): void;
+    /**
+     * @hidden
+     * Moves DOM focus to the currently selected button. Used by host toolbars.
+     */
+    focusSelectedButton(preventScroll?: boolean): void;
+    /**
+     * Moves DOM focus to the adjacent button in the given direction. Disabled buttons are not
+     * skipped so that keyboard users are still made aware of their presence and disabled state.
+     */
+    private moveFocus;
+    private focusButtonAt;
     private handleSizeClass;
     /**
      * Updates the thumb position to reflect the currently selected button.

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1786694082,
-  "version": "25.1.0-develop.2",
+  "publishDate": 1787938291,
+  "version": "25.1.0-develop.20",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-buttons",
-  "version": "25.1.0-develop.2",
+  "version": "25.1.0-develop.20",
   "description": "Buttons Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -56,7 +56,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1786694082,
+      "publishDate": 1787938291,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -66,15 +66,15 @@
     "@angular/core": "20 - 22",
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "25.1.0-develop.2",
-    "@progress/kendo-angular-l10n": "25.1.0-develop.2",
-    "@progress/kendo-angular-popup": "25.1.0-develop.2",
-    "@progress/kendo-angular-icons": "25.1.0-develop.2",
+    "@progress/kendo-angular-common": "25.1.0-develop.20",
+    "@progress/kendo-angular-l10n": "25.1.0-develop.20",
+    "@progress/kendo-angular-popup": "25.1.0-develop.20",
+    "@progress/kendo-angular-icons": "25.1.0-develop.20",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.1.0-develop.2",
+    "@progress/kendo-angular-schematics": "25.1.0-develop.20",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-webspeech-common": "1.0.1",
     "@progress/kendo-smartpaste-common": "1.0.0"