Keyboard navigation

Refs: #4646
public-ui · Aug 14, 2024 · 0ce91e8 · 0ce91e8
1 parent 490e6c4
commit 0ce91e8
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 33 deletions.
diff --git a/packages/components/src/components/@shared/kol-menu.scss b/packages/components/src/components/@shared/kol-menu.scss
@@ -1,5 +1,4 @@
 @mixin kol-menu-styles {
-
 	.menu {
 		&__listbox {
 			list-style-type: none;
@@ -29,4 +28,4 @@
 			min-height: rem(50);
 		}
 	}
-}
+}
diff --git a/packages/components/src/components/@shared/kol-menu.tsx b/packages/components/src/components/@shared/kol-menu.tsx
@@ -1,48 +1,48 @@
-import { FunctionalComponent, h } from '@stencil/core';
-import { JSX } from '@stencil/core/internal';
-import { Option } from '../../schema';
+import type { FunctionalComponent } from '@stencil/core';
+import { h } from '@stencil/core';
+import type { JSX } from '@stencil/core/internal';
+import type { Option } from '../../schema';
 import clsx from 'clsx';
 
 type KolMenuProps = {
 	options: Option<number>[];
 	focusedOptionIndex: number;
-	onClick: (event: Event, option: unknown) => void;
+	onItemClick: (event: Event, option: unknown) => void;
 	renderOption?: (option: Option<number>) => JSX.Element;
 	selectedValue?: number | string;
 };
-export const KolMenu: FunctionalComponent<KolMenuProps> = ({ options, onClick, renderOption, selectedValue }) => {
-	let listItems: HTMLElement | undefined = undefined;
-	// const index: number = 0;
-	function handleKeyDown(event: KeyboardEvent): void {
+export const KolMenu: FunctionalComponent<KolMenuProps> = ({ options, onItemClick, renderOption, selectedValue }) => {
+	const listItems: (HTMLElement | undefined)[] = [];
+
+	function handleKeyDown(event: KeyboardEvent, index: number, option: unknown): void {
 		if (event.key === 'ArrowDown') {
-			console.log(event.target);
-			console.log(listItems);
+			const nextIndex = index + 1 < listItems.length ? index + 1 : 0;
+			listItems[nextIndex]?.focus();
+			event.preventDefault();
+		} else if (event.key === 'ArrowUp') {
+			const prevIndex = index - 1 >= 0 ? index - 1 : listItems.length - 1;
+			listItems[prevIndex]?.focus();
+			event.preventDefault();
+		} else if (event.key === 'Enter' || event.key === ' ') {
+			onItemClick(event, option);
+			event.preventDefault();
 		}
-		// if (event.key === 'ArrowDown') {
-		// 	const nextIndex = index + 1 < listItems.length ? index + 1 : 0;
-		// 	listItems[nextIndex].focus();
-		// 	event.preventDefault();
-		// } else if (event.key === 'ArrowUp') {
-		// 	const prevIndex = index - 1 >= 0 ? index - 1 : listItems.length - 1;
-		// 	listItems[prevIndex].focus();
-		// 	event.preventDefault();
-		// } else if (event.key === 'Enter' || event.key === ' ') {
-		// 	onClick(event, option);
-		// 	event.preventDefault();
-		// }
 	}
+
 	return (
-		<ul role="listbox" class={clsx('menu__listbox')} onKeyDown={(event) => handleKeyDown(event)} ref={(el) => (listItems = el)}>
+		<ul role="listbox" class={clsx('menu__listbox')}>
 			{options.length > 0 &&
 				options.map((option, index) => (
 					<li
+						ref={(el) => (listItems[index] = el)}
 						id={`option-${index}`}
 						key={index}
 						tabIndex={-1}
 						role="option"
-						aria-selected={selectedValue === option.value}
-						onClick={(event) => onClick(event, option)}
 						class="menu__item"
+						aria-selected={selectedValue === option.value}
+						onKeyDown={(event) => handleKeyDown(event, index, option)}
+						onClick={(event) => onItemClick(event, option)}
 					>
 						{renderOption && renderOption(option)}
 					</li>

diff --git a/packages/components/src/components/combobox/style.scss b/packages/components/src/components/combobox/style.scss
@@ -50,7 +50,6 @@
 			max-height: rem(250);
 		}
 
-
 		&__item {
 			&.highlighted {
 				background-color: #f0f0f0;
@@ -61,4 +60,4 @@
 			}
 		}
 	}
-}
+}
diff --git a/packages/components/src/components/pagination/shadow.tsx b/packages/components/src/components/pagination/shadow.tsx
@@ -170,8 +170,8 @@ export class KolPagination implements PaginationAPI {
 						<KolMenu
 							options={this.state._pageSizeOptions}
 							selectedValue={this.state._pageSize}
-							onClick={(event, value) => {
-								this.onChangePageSize(event, value);
+							onItemClick={(event, option: unknown) => {
+								this.onChangePageSize(event, (option as { value: string }).value);
 							}}
 							focusedOptionIndex={-1}
 							renderOption={(option: Option<number>) => (

diff --git a/packages/components/src/components/pagination/style.scss b/packages/components/src/components/pagination/style.scss
@@ -27,4 +27,4 @@
 	.separator:before {
 		content: '•••';
 	}
-}
+}
diff --git a/packages/components/src/components/single-select/style.scss b/packages/components/src/components/single-select/style.scss
@@ -59,4 +59,4 @@
 			min-height: rem(50);
 		}
 	}
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,4 +27,4 @@ @@
     	.separator:before {
     		content: '•••';
     	}
-    }
+    }