diff --git a/list/lib/list.ts b/list/lib/list.ts index 032aad5612..7e66f83861 100644 --- a/list/lib/list.ts +++ b/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) { diff --git a/list/lib/listitem/list-item.ts b/list/lib/listitem/list-item.ts index 23fc5aa573..0699df14c3 100644 --- a/list/lib/listitem/list-item.ts +++ b/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; }