emoji-picker-element/src/picker/components/Picker/Picker.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>