@fundamental-ngx/platform 0.62.0-rc.2 → 0.62.0-rc.21

package/fesm2022/fundamental-ngx-platform-list.mjs

@@ -994,6 +994,8 @@ class ListComponent extends CollectionBaseInput {
         this._subscriptions.add(this.listItems.changes
             .pipe(startWith(this.listItems), observeOn(asyncScheduler))
             .subscribe(() => this._updateListItems()));
+        // Listen for active item changes to update roving tabindex
+        this._subscriptions.add(this._keyManager.change.subscribe(() => this._updateTabIndexes()));
         const indicator = this.elementRef.nativeElement.querySelector('fd-busy-indicator');
         indicator?.setAttribute('aria-label', '');
     }
@@ -1289,9 +1291,8 @@ class ListComponent extends CollectionBaseInput {
      * set values when passed via datasource
      */
     _updateListItems() {
-        if (this.listItems.length !== 0) {
-            this.listItems.first.listItem.nativeElement.setAttribute('tabindex', '0');
-        }
+        // Update roving tabindex
+        this._updateTabIndexes();
         this._ariaSetSize = this.ariaSetsize
             ? of(this.ariaSetsize)
             : this._dataSource && this._dataSource.dataProvider?.getTotalItems
@@ -1328,6 +1329,39 @@ class ListComponent extends CollectionBaseInput {
         });
         this.markForCheck();
     }
+    /**
+     * @hidden
+     * Updates tabindex on all list items based on the current tabbable index.
+     */
+    _updateTabIndexes() {
+        if (this.listItems.length === 0) {
+            return;
+        }
+        const tabbableIndex = this._getTabbableItemIndex();
+        this.listItems.forEach((item, index) => {
+            item.listItem.nativeElement.setAttribute('tabindex', index === tabbableIndex ? '0' : '-1');
+        });
+    }
+    /**
+     * @hidden
+     * Determines which item should have tabindex="0".
+     * Priority: 1) Active item (keyboard focused), 2) First selected item, 3) First item
+     */
+    _getTabbableItemIndex() {
+        // If keyManager has an active item, use that
+        const activeIndex = this._keyManager?.activeItemIndex;
+        if (activeIndex != null && activeIndex >= 0) {
+            return activeIndex;
+        }
+        // Otherwise, find the first selected item
+        const listItemsArray = this.listItems.toArray();
+        const firstSelectedIndex = listItemsArray.findIndex((item) => item._selected);
+        if (firstSelectedIndex >= 0) {
+            return firstSelectedIndex;
+        }
+        // Default to first item
+        return 0;
+    }
     /** @hidden */
     _waitForViewInit() {
         return (source) => source.pipe(switchMap((src) => this._afterViewInit$.pipe(filter((afterViewInit) => afterViewInit), map(() => src))));