feat(search): keyboard-accessible search button (#1331)

Andrew

2024-08-10 3b5ed813f5853b13711fb92f86648cb85e8d8f18

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

 quartz/components/Search.tsx

@@ -19,24 +19,16 @@
    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

 quartz/components/scripts/search.inline.ts

@@ -148,7 +148,7 @@
  const data = await fetchData
  const container = document.getElementById("search-container")
  const sidebar = container?.closest(".sidebar") as HTMLElement
  const searchIcon = document.getElementById("search-icon")
  const searchButton = document.getElementById("search-button")
  const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
  const searchLayout = document.getElementById("search-layout")
  const idDataMap = Object.keys(data) as FullSlug[]
@@ -191,6 +191,8 @@
    }

    searchType = "basic" // reset search type after closing

    searchButton?.focus()
  }

  function showSearch(searchTypeNew: SearchType) {
@@ -458,8 +460,8 @@

  document.addEventListener("keydown", shortcutHandler)
  window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler))
  searchIcon?.addEventListener("click", () => showSearch("basic"))
  window.addCleanup(() => searchIcon?.removeEventListener("click", () => showSearch("basic")))
  searchButton?.addEventListener("click", () => showSearch("basic"))
  window.addCleanup(() => searchButton?.removeEventListener("click", () => showSearch("basic")))
  searchBar?.addEventListener("input", onType)
  window.addCleanup(() => searchBar?.removeEventListener("input", onType))


 quartz/components/scripts/util.ts

@@ -3,6 +3,7 @@
  function click(this: HTMLElement, e: HTMLElementEventMap["click"]) {
    if (e.target !== this) return
    e.preventDefault()
    e.stopPropagation()
    cb()
  }


 quartz/components/styles/search.scss

@@ -5,18 +5,21 @@
  max-width: 14rem;
  flex-grow: 0.3;

  & > #search-icon {
  & > .search-button {
    background-color: var(--lightgray);
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    text-align: inherit;
    cursor: pointer;
    white-space: nowrap;

    & > div {
      flex-grow: 1;
    }
    width: 100%;
    justify-content: space-between;

    & > p {
      display: inline;