kempo-ui 0.1.4 → 0.1.5

package/dist/components/FilterItem.js

@@ -5,4 +5,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		:host([hidden]) {
 			display: none !important;
 		}
+		:host([kb-focus]) ::slotted(a) {
+			background: rgba(128,128,128,.25);
+		}
 	`}customElements.define("k-filter-item",FilterItem);

package/dist/components/FilterList.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class FilterList extends ShadowComponent{render(){return html`<slot></slot>`}filter(t){const e=t.toLowerCase().split(/\s+/).filter(t=>t.length>0);this.querySelectorAll("k-filter-item").forEach(t=>{const s=(t.getAttribute("filter-keywords")||"").toLowerCase();t.hidden=e.length>0&&!e.every(t=>s.includes(t))})}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class FilterList extends ShadowComponent{#e=-1;render(){return html`<slot></slot>`}handleKeydown=e=>{const t=this.#t();t.length&&("ArrowDown"===e.key?(e.preventDefault(),this.#e=Math.min(this.#e+1,t.length-1),this.#s(t)):"ArrowUp"===e.key?(e.preventDefault(),this.#e=Math.max(this.#e-1,0),this.#s(t)):"Enter"===e.key&&this.#e>=0&&this.#e<t.length&&(e.preventDefault(),t[this.#e].querySelector("a")?.click()))};clearFocus=()=>{this.#e=-1,this.querySelectorAll("k-filter-item[kb-focus]").forEach(e=>e.removeAttribute("kb-focus"))};filter(e){const t=e.toLowerCase().split(/\s+/).filter(e=>e.length>0);this.querySelectorAll("k-filter-item").forEach(e=>{const s=(e.getAttribute("filter-keywords")||"").toLowerCase();e.hidden=t.length>0&&!t.every(e=>s.includes(e))}),this.clearFocus()}#t=()=>[...this.querySelectorAll("k-filter-item:not([hidden])")];#s=e=>{this.querySelectorAll("k-filter-item[kb-focus]").forEach(e=>e.removeAttribute("kb-focus")),e[this.#e]?.setAttribute("kb-focus",""),e[this.#e]?.scrollIntoView({block:"nearest"})};static styles=css`
 		:host {
 			display: block;
 		}

package/docs/nav.inc.js

@@ -34,6 +34,7 @@ const openSearch = async () => {
 
 const closeSearch = () => {
 	searchDropdown.hidden = true;
+	navSearchList?.clearFocus();
 };
 
 searchInput.addEventListener('focus', openSearch);
@@ -47,6 +48,8 @@ searchInput.addEventListener('keydown', e => {
 		searchInput.value = '';
 		searchInput.blur();
 		closeSearch();
+	} else if(e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+		navSearchList?.handleKeydown(e);
 	}
 });
 

package/docs/src/components/FilterItem.js

@@ -5,4 +5,7 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		:host([hidden]) {
 			display: none !important;
 		}
+		:host([kb-focus]) ::slotted(a) {
+			background: rgba(128,128,128,.25);
+		}
 	`}customElements.define("k-filter-item",FilterItem);

package/docs/src/components/FilterList.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class FilterList extends ShadowComponent{render(){return html`<slot></slot>`}filter(t){const e=t.toLowerCase().split(/\s+/).filter(t=>t.length>0);this.querySelectorAll("k-filter-item").forEach(t=>{const s=(t.getAttribute("filter-keywords")||"").toLowerCase();t.hidden=e.length>0&&!e.every(t=>s.includes(t))})}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";export default class FilterList extends ShadowComponent{#e=-1;render(){return html`<slot></slot>`}handleKeydown=e=>{const t=this.#t();t.length&&("ArrowDown"===e.key?(e.preventDefault(),this.#e=Math.min(this.#e+1,t.length-1),this.#s(t)):"ArrowUp"===e.key?(e.preventDefault(),this.#e=Math.max(this.#e-1,0),this.#s(t)):"Enter"===e.key&&this.#e>=0&&this.#e<t.length&&(e.preventDefault(),t[this.#e].querySelector("a")?.click()))};clearFocus=()=>{this.#e=-1,this.querySelectorAll("k-filter-item[kb-focus]").forEach(e=>e.removeAttribute("kb-focus"))};filter(e){const t=e.toLowerCase().split(/\s+/).filter(e=>e.length>0);this.querySelectorAll("k-filter-item").forEach(e=>{const s=(e.getAttribute("filter-keywords")||"").toLowerCase();e.hidden=t.length>0&&!t.every(e=>s.includes(e))}),this.clearFocus()}#t=()=>[...this.querySelectorAll("k-filter-item:not([hidden])")];#s=e=>{this.querySelectorAll("k-filter-item[kb-focus]").forEach(e=>e.removeAttribute("kb-focus")),e[this.#e]?.setAttribute("kb-focus",""),e[this.#e]?.scrollIntoView({block:"nearest"})};static styles=css`
 		:host {
 			display: block;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/FilterItem.js

@@ -19,6 +19,9 @@ export default class FilterItem extends ShadowComponent {
 		:host([hidden]) {
 			display: none !important;
 		}
+		:host([kb-focus]) ::slotted(a) {
+			background: rgba(128,128,128,.25);
+		}
 	`;
 }
 

package/src/components/FilterList.js

@@ -2,6 +2,8 @@ import ShadowComponent from './ShadowComponent.js';
 import { html, css } from '../lit-all.min.js';
 
 export default class FilterList extends ShadowComponent {
+	#focusedIndex = -1;
+
 	/*
 		Rendering
 	*/
@@ -12,14 +14,49 @@ export default class FilterList extends ShadowComponent {
 	/*
 		Public Methods
 	*/
+	handleKeydown = e => {
+		const items = this.#visibleItems();
+		if(!items.length) return;
+
+		if(e.key === 'ArrowDown') {
+			e.preventDefault();
+			this.#focusedIndex = Math.min(this.#focusedIndex + 1, items.length - 1);
+			this.#applyFocus(items);
+		} else if(e.key === 'ArrowUp') {
+			e.preventDefault();
+			this.#focusedIndex = Math.max(this.#focusedIndex - 1, 0);
+			this.#applyFocus(items);
+		} else if(e.key === 'Enter' && this.#focusedIndex >= 0 && this.#focusedIndex < items.length) {
+			e.preventDefault();
+			items[this.#focusedIndex].querySelector('a')?.click();
+		}
+	};
+
+	clearFocus = () => {
+		this.#focusedIndex = -1;
+		this.querySelectorAll('k-filter-item[kb-focus]').forEach(el => el.removeAttribute('kb-focus'));
+	};
+
 	filter(term) {
 		const words = term.toLowerCase().split(/\s+/).filter(w => w.length > 0);
 		this.querySelectorAll('k-filter-item').forEach(item => {
 			const keywords = (item.getAttribute('filter-keywords') || '').toLowerCase();
 			item.hidden = words.length > 0 && !words.every(w => keywords.includes(w));
 		});
+		this.clearFocus();
 	}
 
+	/*
+		Private Methods
+	*/
+	#visibleItems = () => [...this.querySelectorAll('k-filter-item:not([hidden])')];
+
+	#applyFocus = items => {
+		this.querySelectorAll('k-filter-item[kb-focus]').forEach(el => el.removeAttribute('kb-focus'));
+		items[this.#focusedIndex]?.setAttribute('kb-focus', '');
+		items[this.#focusedIndex]?.scrollIntoView({ block: 'nearest' });
+	};
+
 	/*
 		Styles
 	*/

package/tests/components/FilterList.browser-test.js

@@ -10,6 +10,17 @@ const createFilterList = async (items = []) => {
 	return { container, el };
 };
 
+const createFilterListWithLinks = async (items = []) => {
+	const container = document.createElement('div');
+	container.innerHTML = `<k-filter-list>${items.map(kw => `<k-filter-item filter-keywords="${kw}"><a href="#">${kw}</a></k-filter-item>`).join('')}</k-filter-list>`;
+	document.body.appendChild(container);
+	const el = container.querySelector('k-filter-list');
+	await el.updateComplete;
+	return { container, el };
+};
+
+const keydown = (el, key) => el.handleKeydown(new KeyboardEvent('keydown', { key, bubbles: true }));
+
 const cleanup = (container) => {
 	if(container && container.parentNode){
 		container.parentNode.removeChild(container);
@@ -159,4 +170,176 @@ export default {
 		cleanup(container);
 		pass('All items restored after clearing filter');
 	},
+
+	/*
+		handleKeydown() — ArrowDown
+	*/
+	'ArrowDown should set kb-focus on the first item': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana', 'cherry']);
+		keydown(el, 'ArrowDown');
+		const focused = el.querySelector('k-filter-item[kb-focus]');
+		if(!focused){
+			cleanup(container);
+			return fail('Expected a kb-focus item after ArrowDown');
+		}
+		if(focused.getAttribute('filter-keywords') !== 'apple'){
+			cleanup(container);
+			return fail(`Expected first item focused, got "${focused.getAttribute('filter-keywords')}"`);
+		}
+		cleanup(container);
+		pass('ArrowDown focuses first item');
+	},
+
+	'ArrowDown twice should focus the second item': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana', 'cherry']);
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowDown');
+		const focused = el.querySelector('k-filter-item[kb-focus]');
+		if(focused?.getAttribute('filter-keywords') !== 'banana'){
+			cleanup(container);
+			return fail(`Expected second item focused, got "${focused?.getAttribute('filter-keywords')}"`);
+		}
+		cleanup(container);
+		pass('ArrowDown twice focuses second item');
+	},
+
+	'ArrowDown should not go past the last item': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana']);
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowDown');
+		const focused = el.querySelector('k-filter-item[kb-focus]');
+		if(focused?.getAttribute('filter-keywords') !== 'banana'){
+			cleanup(container);
+			return fail('Focus should clamp at last item');
+		}
+		cleanup(container);
+		pass('ArrowDown clamps at last item');
+	},
+
+	'ArrowDown should skip hidden items': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana', 'cherry']);
+		el.filter('a');
+		keydown(el, 'ArrowDown');
+		const focused = el.querySelector('k-filter-item[kb-focus]');
+		if(focused?.hidden){
+			cleanup(container);
+			return fail('Focused item should not be hidden');
+		}
+		cleanup(container);
+		pass('ArrowDown skips hidden items');
+	},
+
+	/*
+		handleKeydown() — ArrowUp
+	*/
+	'ArrowUp should move focus backward': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana', 'cherry']);
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowUp');
+		const focused = el.querySelector('k-filter-item[kb-focus]');
+		if(focused?.getAttribute('filter-keywords') !== 'banana'){
+			cleanup(container);
+			return fail(`Expected "banana" focused, got "${focused?.getAttribute('filter-keywords')}"`);
+		}
+		cleanup(container);
+		pass('ArrowUp moves focus backward');
+	},
+
+	'ArrowUp should not go before the first item': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana']);
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowUp');
+		keydown(el, 'ArrowUp');
+		const focused = el.querySelector('k-filter-item[kb-focus]');
+		if(focused?.getAttribute('filter-keywords') !== 'apple'){
+			cleanup(container);
+			return fail('Focus should clamp at first item');
+		}
+		cleanup(container);
+		pass('ArrowUp clamps at first item');
+	},
+
+	/*
+		handleKeydown() — Enter
+	*/
+	'Enter should click the link in the focused item': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana']);
+		keydown(el, 'ArrowDown');
+		let clicked = false;
+		el.querySelector('k-filter-item[kb-focus] a').addEventListener('click', e => {
+			e.preventDefault();
+			clicked = true;
+		});
+		keydown(el, 'Enter');
+		if(!clicked){
+			cleanup(container);
+			return fail('Enter should click the focused link');
+		}
+		cleanup(container);
+		pass('Enter clicks the focused link');
+	},
+
+	'Enter without focus should do nothing': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana']);
+		keydown(el, 'Enter');
+		cleanup(container);
+		pass('Enter without focus does nothing');
+	},
+
+	/*
+		clearFocus()
+	*/
+	'clearFocus should remove kb-focus attribute': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana']);
+		keydown(el, 'ArrowDown');
+		el.clearFocus();
+		const focused = el.querySelector('k-filter-item[kb-focus]');
+		if(focused){
+			cleanup(container);
+			return fail('clearFocus should remove all kb-focus attributes');
+		}
+		cleanup(container);
+		pass('clearFocus removes kb-focus');
+	},
+
+	'filter() should reset keyboard focus': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana']);
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowDown');
+		el.filter('');
+		const focused = el.querySelector('k-filter-item[kb-focus]');
+		if(focused){
+			cleanup(container);
+			return fail('filter() should reset keyboard focus');
+		}
+		keydown(el, 'ArrowDown');
+		const newFocused = el.querySelector('k-filter-item[kb-focus]');
+		if(newFocused?.getAttribute('filter-keywords') !== 'apple'){
+			cleanup(container);
+			return fail('After reset, ArrowDown should focus first item again');
+		}
+		cleanup(container);
+		pass('filter() resets keyboard focus');
+	},
+
+	/*
+		Only one kb-focus at a time
+	*/
+	'only one item should have kb-focus at a time': async ({pass, fail}) => {
+		const { container, el } = await createFilterListWithLinks(['apple', 'banana', 'cherry']);
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowDown');
+		keydown(el, 'ArrowDown');
+		const allFocused = el.querySelectorAll('k-filter-item[kb-focus]');
+		if(allFocused.length !== 1){
+			cleanup(container);
+			return fail(`Expected 1 kb-focus item, got ${allFocused.length}`);
+		}
+		cleanup(container);
+		pass('Only one item has kb-focus');
+	},
 };