From 4cd1888de4a381f9f63878ae4002c865ee0dedcf Mon Sep 17 00:00:00 2001 From: Muhun Kim Date: Sun, 17 Dec 2023 14:11:07 +0900 Subject: [PATCH 1/3] Styling examples by :focus and aria-selected instead constant values --- src/docs/03-combobox.md | 12 +++++------- src/docs/04-combobox-multi.md | 14 +++++--------- src/docs/07-listbox.md | 14 +++++--------- src/docs/08-listbox-multi.md | 14 +++++--------- src/docs/09-menu.md | 2 +- src/lib/combobox.ts | 2 +- src/lib/listbox.ts | 2 +- src/lib/menu.ts | 10 +++++++++- src/routes/example/combobox/+page.svelte | 14 +++++--------- src/routes/example/combobox/multi/+page.svelte | 14 +++++--------- src/routes/example/listbox/+page.svelte | 10 +++------- src/routes/example/listbox/multi/+page.svelte | 10 +++------- src/routes/example/menu/+page.svelte | 2 +- 13 files changed, 49 insertions(+), 71 deletions(-) diff --git a/src/docs/03-combobox.md b/src/docs/03-combobox.md index 38c62fb..834a755 100644 --- a/src/docs/03-combobox.md +++ b/src/docs/03-combobox.md @@ -88,15 +88,13 @@ Comboboxes are the foundation of accessible autocompletes and command palettes f {@const active = $combobox.active === value} {@const selected = $combobox.selected === value}
  • - {value.name} - {#if selected} - - - - {/if} + {value.name} +
    • {:else}
  • diff --git a/src/docs/04-combobox-multi.md b/src/docs/04-combobox-multi.md index 061fd38..ea75512 100644 --- a/src/docs/04-combobox-multi.md +++ b/src/docs/04-combobox-multi.md @@ -100,18 +100,14 @@ Pass an array to the `selected` property of `createCombobox` to trigger multi-se class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" > {#each filtered as value} - {@const active = $combobox.active === value} - {@const selected = $combobox.selected.includes(value)}
  • - {value.name} - {#if selected} - - - - {/if} + {value.name} +
    • {:else}
  • diff --git a/src/docs/07-listbox.md b/src/docs/07-listbox.md index 5536756..fe5fb9c 100644 --- a/src/docs/07-listbox.md +++ b/src/docs/07-listbox.md @@ -73,18 +73,14 @@ Listboxes are a great foundation for building custom, accessible select menus fo class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" > {#each people as value, i} - {@const active = $listbox.active === value} - {@const selected = $listbox.selected === value}
  • - {value.name} - {#if selected} - - - - {/if} + {value.name} +
    • {/each} diff --git a/src/docs/08-listbox-multi.md b/src/docs/08-listbox-multi.md index 7d0e943..fd5df88 100644 --- a/src/docs/08-listbox-multi.md +++ b/src/docs/08-listbox-multi.md @@ -92,18 +92,14 @@ Pass an array to the `selected` property of `createListbox` to trigger multi-sel class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" > {#each people as value (value.id)} - {@const active = $listbox.active === value} - {@const selected = $listbox.selected.includes(value)}
  • - {value.name} - {#if selected} - - - - {/if} + {value.name} +
    • {/each} diff --git a/src/docs/09-menu.md b/src/docs/09-menu.md index f7303b5..e0c70a4 100644 --- a/src/docs/09-menu.md +++ b/src/docs/09-menu.md @@ -91,7 +91,7 @@ Menus offer an easy way to build custom, accessible dropdown components with rob {@const active = $menu.active === option.text}