83 lines
2.9 KiB
HTML
83 lines
2.9 KiB
HTML
<svelte:options tag="lite-emoji-picker" />
|
|
<section
|
|
class="picker"
|
|
aria-label={i18n.regionLabel}
|
|
bind:this={rootElement}
|
|
>
|
|
<div class="search-row">
|
|
<div class="search-wrapper"
|
|
role="combobox"
|
|
aria-expanded={!!(searchMode && currentEmojis.length)}
|
|
aria-owns="search-results"
|
|
aria-haspopup="listbox"
|
|
aria-label={i18n.search}
|
|
>
|
|
<input
|
|
id="search"
|
|
class="search"
|
|
type="text"
|
|
placeholder={i18n.search}
|
|
autocapitalize="none"
|
|
spellcheck="true"
|
|
aria-controls="search-results"
|
|
aria-autocomplete="list"
|
|
aria-activedescendant={activeSearchItem === -1 ? '' : `emoji-${currentEmojis[activeSearchItem].unicode}`}
|
|
bind:value={rawSearchText}
|
|
on:keydown={onSearchKeydown}
|
|
>
|
|
<label class="sr-only" for="search">{i18n.search}</label>
|
|
</div>
|
|
<button class="emoji skintone-button" aria-label={i18n.skinToneLabel}>👍</button>
|
|
|
|
</div>
|
|
<div class="nav"
|
|
role="tablist"
|
|
style="grid-template-columns: repeat({categories.length}, 1fr);"
|
|
aria-label={i18n.categoriesLabel}
|
|
on:keydown={onNavKeydown}>
|
|
{#each categories as category (category.group)}
|
|
<button role="tab"
|
|
class="nav-button"
|
|
aria-controls="tab-{category.group}"
|
|
aria-label={i18n.categories[category.name]}
|
|
aria-selected={currentCategory.group === category.group}
|
|
title={i18n.categories[category.name]}
|
|
on:click={() => handleCategoryClick(category)}>
|
|
<div class="emoji">
|
|
{category.emoji}
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
<div class="indicators"
|
|
aria-hidden="true">
|
|
{#each categories as category (category.group)}
|
|
<div class="indicator {currentCategory.group === category.group ? '' : 'hidden'}">
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="tabpanel"
|
|
role={searchMode ? 'region' : 'tabpanel'}
|
|
aria-label={searchMode ? i18n.searchResultsLabel : i18n.categories[currentCategory.name]}
|
|
id={searchMode ? '' : `tab-${currentCategory.group}`}
|
|
tabindex="0"
|
|
>
|
|
<div class="emoji-menu"
|
|
role={searchMode ? 'listbox' : 'menu'}
|
|
aria-label={searchMode ? i18n.searchResultsLabel : i18n.categories[currentCategory.name]}
|
|
id="search-results"
|
|
>
|
|
{#each currentEmojis as emoji, i (emoji.unicode)}
|
|
<button role={searchMode ? 'option' : 'menuitem'}
|
|
aria-selected={searchMode && i === activeSearchItem}
|
|
class="tabpanel-emoji emoji {searchMode && i === activeSearchItem ? 'active-search-item' : ''}"
|
|
id="emoji-{emoji.unicode}">
|
|
{emoji.unicode}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
<div aria-hidden="true" class="hidden abs-pos">
|
|
<button class="emoji baseline-emoji" bind:this={baselineEmoji}>😀</button>
|
|
</div>
|
|
</section> |