fix(cdk-experimental/listbox): initial listbox focus state

* The first option to receive focus in a listbox should be either the
  first selected option or the first option in the list if no option
  is selected.

Author: wagnermaciel

src/cdk-experimental/listbox/listbox.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  AfterViewInit,
   booleanAttribute,
   computed,
   contentChildren,
@@ -29,9 +30,9 @@ import {_IdGenerator} from '@angular/cdk/a11y';
  *
  * ```html
  * <ul cdkListbox>
- *   <li cdkOption>Item 1</li>
- *   <li cdkOption>Item 2</li>
- *   <li cdkOption>Item 3</li>
+ *   <li [value]="1" cdkOption>Item 1</li>
+ *   <li [value]="2" cdkOption>Item 2</li>
+ *   <li [value]="3" cdkOption>Item 3</li>
  * </ul>
  * ```
  */
@@ -50,7 +51,7 @@ import {_IdGenerator} from '@angular/cdk/a11y';
     '(pointerdown)': 'pattern.onPointerdown($event)',
   },
 })
-export class CdkListbox<V> {
+export class CdkListbox<V> implements AfterViewInit {
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
   private readonly _directionality = inject(Directionality);
 
@@ -101,6 +102,16 @@ export class CdkListbox<V> {
     items: this.items,
     textDirection: this.textDirection,
   });
+
+  ngAfterViewInit() {
+    if (this.value().length) {
+      // TODO(wagnermaciel): Write a test case specifically for this.
+      const item = this.items().find(item => this.value().includes(item.value()));
+      if (item) {
+        this.activeIndex.set(item.index());
+      }
+    }
+  }
 }
 
 /** A selectable option in a CdkListbox. */