<KeyboardNavigationListItem>

View as Markdown

The <KeyboardNavigationListItem> system component marks an item as participating in its parent list's keyboard navigation.

The ConversationList wraps its conversations in a component that manages keyboard navigation. Each conversation inside that list should use <KeyboardNavigationListItem>, so arrow keys can move focus between conversations.

Safari focus styling

Safari does not reliably update :focus-visible when an item first receives focus through a click and TalkJS's internal keyboard navigation list component then moves focus programmatically. TalkJS therefore adds a t-keyboard-navigation-active attribute to the list container while arrow-key navigation is being used. Styling a normally focused item that is a descendant of that marker preserves the keyboard focus styling without showing it for ordinary pointer focus. See WebKit bug 225148 for more details.

When styling a <KeyboardNavigationListItem>, include the container marker as a fallback alongside your normal :focus-visible selector:


1.t-conversation-name-link:focus-visible::after,
2[t-keyboard-navigation-active] .t-conversation-name-link:focus::after {
3  /* Focus styling */
4}

interface KeyboardNavigationListItemProps

Properties

children

: React.ReactNode

Content rendered inside the keyboard navigation list item.

as (optional)

: keyof JSX.IntrinsicElements & keyof HTMLElementTagNameMap

The HTML element to render.

Defaults to "div".

attributeName (optional)

: string | undefined