mirror of
https://github.com/alrayyes/wiki.git
synced 2025-05-24 08:39:01 +00:00
feat(search): keyboard-accessible search button (#1331)
* Use a `<button>` for search * Fix search button styles to match preexisting styling * Remove additional native button properties. * Invoke search button on click or keyboard. * Reorganize search button DOM hierarchy * Restore focus to the search button when exiting the search overlay * Run prettier on Search.tsx
This commit is contained in:
parent
195fc5134c
commit
3b5ed813f5
4 changed files with 18 additions and 20 deletions
quartz/components
|
@ -19,24 +19,16 @@ export default ((userOpts?: Partial<SearchOptions>) => {
|
|||
const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
|
||||
return (
|
||||
<div class={classNames(displayClass, "search")}>
|
||||
<div id="search-icon">
|
||||
<button class="search-button" id="search-button">
|
||||
<p>{i18n(cfg.locale).components.search.title}</p>
|
||||
<div></div>
|
||||
<svg
|
||||
tabIndex={0}
|
||||
aria-labelledby="title desc"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 19.9 19.7"
|
||||
>
|
||||
<title id="title">Search</title>
|
||||
<desc id="desc">Search</desc>
|
||||
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
|
||||
<title>Search</title>
|
||||
<g class="search-path" fill="none">
|
||||
<path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
|
||||
<circle cx="8" cy="8" r="7" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<div id="search-container">
|
||||
<div id="search-space">
|
||||
<input
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue