/
search.html
22 lines (22 loc) · 1.57 KB
/
search.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div role="region" aria-labelledby="search-label" class="search">
<label for="search" class="label--block">
<span class="label__text" id="search-label">Search</span>
</label>
<div class="search__input-wrapper">
<svg class="search__icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true" focusable="false">
<path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="visually-hidden" id="search-hint">Results will be shown and updated as you type.</p>
<div class="search__inner-input-wrapper">
<input type="search" id="search" class="search__input" autocomplete="off" aria-describedby="search-hint" pattern="\S+">
<button class="search__clear-btn" id="search__clear-btn" hidden>
<span class="visually-hidden">Clear search</span>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false">
<path d="M9 3L3 9M3 3L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<div id="search-results-announcement" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
<div id="search-results" class="search-results"></div>
</div>