feat(list-item): Added isActive() method to check active status and m…

…inor fixes to keyboard navigation

PiperOrigin-RevId: 467690622

list/lib/list.ts

@@ -69,6 +69,14 @@ export class List extends LitElement {
   handleKeydown(event: KeyboardEvent) {
     if (Object.values(NAVIGATABLE_KEYS).indexOf(event.key) === -1) return;
 
+    for (const item of this.items) {
+      if (item.isActive()) {
+        this.activeListItem = item;
+      }
+
+      item.deactivate();
+    }
+
     if (event.key === NAVIGATABLE_KEYS.ArrowDown) {
       event.preventDefault();
       if (this.activeListItem) {
@@ -97,13 +105,7 @@ export class List extends LitElement {
       this.activeListItem = this.getLastItem();
     }
 
-    if (!this.activeListItem) return;
-
-    for (const item of this.items) {
-      item.deactivate();
-    }
-
-    this.activeListItem.activate();
+    this.activeListItem?.activate();
   }
 
   handleItemInteraction(event: ListItemInteractionEvent) {

list/lib/listitem/list-item.ts

@@ -188,6 +188,7 @@ export class ListItem extends ActionElement {
     this.ripple.endHover();
   }
 
+  /** @bubbleWizEvent */
   protected handleKeyDown(e: KeyboardEvent) {
     if (e.key !== ' ' && e.key !== 'Enter') return;
 
@@ -204,11 +205,25 @@ export class ListItem extends ActionElement {
     this.ripple.endPress();
   }
 
+  /**
+   * Focuses list item and makes list item focusable via keyboard.
+   */
   activate() {
     this.itemTabIndex = 0;
     this.listItemRoot.focus();
+    this.showFocusRing = true;
   }
 
+  /**
+   * Returns true if list item is currently focused and is focusable.
+   */
+  isActive() {
+    return this.itemTabIndex === 0 && this.showFocusRing;
+  }
+
+  /**
+   * Removes list item from sequential keyboard navigation.
+   */
   deactivate() {
     this.itemTabIndex = -1;
   }