feat(multiple): add focusable attr to list items

Author: wagnermaciel

src/aria/private/behaviors/list-focus/list-focus.spec.ts

@@ -11,6 +11,7 @@ import {ListFocus, ListFocusInputs, ListFocusItem} from './list-focus';
 
 type TestItem = ListFocusItem & {
   disabled: WritableSignalLike<boolean>;
+  focusable: WritableSignalLike<boolean>;
 };
 
 type TestInputs = Partial<ListFocusInputs<ListFocusItem>> & {
@@ -37,6 +38,7 @@ function getItems(length: number): SignalLike<ListFocusItem[]> {
         id: signal(`${i}`),
         disabled: signal(false),
         element: signal({focus: () => {}} as HTMLElement),
+        focusable: signal(true),
         index: signal(i),
       };
     }),
@@ -135,5 +137,14 @@ describe('List Focus', () => {
       expect(focusManager.isFocusable(items[1])).toBeTrue();
       expect(focusManager.isFocusable(items[2])).toBeTrue();
     });
+
+    it('should return false if focusable is false', () => {
+      const focusManager = getListFocus({softDisabled: signal(true)});
+      const items = focusManager.inputs.items() as TestItem[];
+      items[1].focusable.set(false);
+
+      expect(focusManager.isFocusable(items[0])).toBeTrue();
+      expect(focusManager.isFocusable(items[1])).toBeFalse();
+    });
   });
 });

src/aria/private/behaviors/list-focus/list-focus.ts

@@ -19,6 +19,9 @@ export interface ListFocusItem {
   /** Whether an item is disabled. */
   disabled: SignalLike<boolean>;
 
+  /** Whether an item is focusable. */
+  focusable?: SignalLike<boolean>;
+
   /** The index of the item in the list. */
   index: SignalLike<number>;
 }
@@ -115,6 +118,9 @@ export class ListFocus<T extends ListFocusItem> {
 
   /** Returns true if the given item can be navigated to. */
   isFocusable(item: T): boolean {
+    if (item.focusable && !item.focusable()) {
+      return false;
+    }
     return !item.disabled() || this.inputs.softDisabled();
   }
 }

src/aria/private/behaviors/list/list.spec.ts

@@ -46,6 +46,7 @@ describe('List Behavior', () => {
       disabled: signal(false),
       selectable: signal(true),
       searchTerm: signal(String(value)),
+      focusable: signal(true),
       index: signal(index),
     }));
   }