Skip to content

Commit

Permalink
Add keyboard navigation between sibling items
Browse files Browse the repository at this point in the history
johanbissemattsson committed Dec 9, 2024
1 parent 6dd1ad8 commit 21ccd70
Showing 2 changed files with 82 additions and 17 deletions.
60 changes: 52 additions & 8 deletions packages/supersearch/src/lib/components/SuperSearch.svelte
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@
paginationQueryFn?: PaginationQueryFunction;
transformFn?: TransformFunction;
extensions?: Extension[];
resultItem?: Snippet<[ResultItem]>;
resultItem?: Snippet<[ResultItem, number?]>;
toggleWithKeyboardShortcut?: boolean;
}
@@ -110,7 +110,12 @@
/**
* Handle keyboard navigation between focusable elements in expanded search
*/
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
if (
event.key === 'ArrowUp' ||
event.key === 'ArrowRight' ||
event.key === 'ArrowDown' ||
event.key === 'ArrowLeft'
) {
const focusableElements = Array.from(
(event.target as HTMLElement)
.closest('dialog')
@@ -119,14 +124,53 @@
const activeIndex = document.activeElement
? focusableElements?.indexOf(document.activeElement)
: -1;
if (activeIndex > -1) {
event.preventDefault();
const listItem = document.activeElement?.closest('dialog nav li');
const focusableElementsInListItem = listItem
? Array.from(listItem.querySelectorAll('button'))
: [];
const columnIndex = focusableElementsInListItem?.indexOf(
document.activeElement as HTMLButtonElement
);
if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
(
focusableElements[
event.key === 'ArrowUp' ? activeIndex - 1 : activeIndex + 1
focusableElementsInListItem[
event.key === 'ArrowLeft' ? columnIndex - 1 : columnIndex + 1
] as HTMLElement
)?.focus();
}
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
const siblingListItem =
event.key === 'ArrowUp' ? listItem?.previousElementSibling : listItem?.nextElementSibling;
if (siblingListItem) {
(
(
Array.from(
siblingListItem.querySelectorAll(`button:nth-of-type(-n + ${columnIndex + 1})`) // get closest available column in adjecent list item
) || []
).pop() as HTMLButtonElement
)?.focus();
} else {
if (listItem) {
(
focusableElements[
event.key === 'ArrowUp'
? focusableElements.indexOf(focusableElementsInListItem[0]) - 1
: focusableElements.indexOf(
focusableElementsInListItem[focusableElementsInListItem.length - 1]
) + 1
] as HTMLElement
).focus();
} else {
(
focusableElements[
event.key === 'ArrowUp' ? activeIndex - 1 : activeIndex + 1
] as HTMLElement
)?.focus();
}
}
}
}
}
@@ -203,9 +247,9 @@
search.paginatedData.map((page) => page.items).flat()) ||
search.data?.items}
<ul>
{#each resultItems as item}
{#each resultItems as item, index}
<li>
{@render resultItem?.(item)}
{@render resultItem?.(item, index)}
</li>
{/each}
</ul>
39 changes: 30 additions & 9 deletions packages/supersearch/src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -51,10 +51,18 @@
extensions={[lxlQualifierPlugin]}
toggleWithKeyboardShortcut
>
{#snippet resultItem(item)}
<button type="button" class="result-item" data-test-id="result-item">
<h2>{item.heading}</h2>
</button>
{#snippet resultItem(item, index)}
<div class="result-item" data-test-id="result-item">
<button type="button">
<h2>{item.heading}</h2>
</button>
{#if index! <= 4}
<button type="button">B</button>
{/if}
{#if index! < 3 || index! == 9 || index! === 4}
<button type="button">C</button>
{/if}
</div>
{/snippet}
</SuperSearch>
</fieldset>
@@ -79,9 +87,11 @@
extensions={[lxlQualifierPlugin]}
>
{#snippet resultItem(item)}
<button type="button" class="result-item" data-test-id="result-item">
<h2>{item.heading}</h2>
</button>
<div class="result-item" data-test-id="result-item">
<button type="button">
<h2>{item.heading}</h2>
</button>
</div>
{/snippet}
</SuperSearch>
</fieldset>
@@ -93,9 +103,20 @@

<style>
.result-item {
display: flex;
align-items: flex-start;
min-width: 480px;
min-height: 44px;
text-align: left;
& button {
min-width: 44px;
min-height: 44px;
}
& button:first-child {
flex: 1;
text-align: left;
}
& h2 {
font-weight: inherit;
font-size: inherit;

0 comments on commit 21ccd70

Please sign in to comment.