feat(explorer): improve accessibility and consistency (+ bug fix) (#488)

Ben Schlegel

2023-09-20 b029eeadabe0877df6ec11443c68743f1494bc40

feat(explorer): improve accessibility and consistency (+ bug fix) (#488)

* feat(consistency): use `all: unset` on button

* style: improve accessibility and consistency for explorer

* fix: localStorage bug with folder name changes

* chore: bump quartz version

 package.json

@@ -2,7 +2,7 @@
  "name": "@jackyzha0/quartz",
  "description": "🌱 publish your digital garden and notes as a website",
  "private": true,
  "version": "4.0.11",
  "version": "4.1.0",
  "type": "module",
  "author": "jackyzha0 <j.zhao2k19@gmail.com>",
  "license": "MIT",

 quartz/components/Explorer.tsx

@@ -79,7 +79,7 @@
          data-savestate={opts.useSavedState}
          data-tree={jsonTree}
        >
          <h3>{opts.title}</h3>
          <h1>{opts.title}</h1>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
@@ -98,7 +98,7 @@
        <div id="explorer-content">
          <ul class="overflow" id="explorer-ul">
            <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
            <div id="explorer-end" />
            <li id="explorer-end" />
          </ul>
        </div>
      </div>

 quartz/components/ExplorerNode.tsx

@@ -145,7 +145,7 @@
  }

  return (
    <div>
    <li>
      {node.file ? (
        // Single file node
        <li key={node.file.slug}>
@@ -174,17 +174,17 @@
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
              {/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
              <li key={node.name} data-folderpath={folderPath}>
              <div key={node.name} data-folderpath={folderPath}>
                {folderBehavior === "link" ? (
                  <a href={`${folderPath}`} data-for={node.name} class="folder-title">
                    {node.name}
                  </a>
                ) : (
                  <button class="folder-button">
                    <h3 class="folder-title">{node.name}</h3>
                    <p class="folder-title">{node.name}</p>
                  </button>
                )}
              </li>
              </div>
            </div>
          )}
          {/* Recursively render children of folder */}
@@ -210,6 +210,6 @@
          </div>
        </div>
      )}
    </div>
    </li>
  )
}

 quartz/components/scripts/explorer.inline.ts

@@ -113,9 +113,11 @@
      ) as HTMLElement

      // Get corresponding content <ul> tag and set state
      const folderUL = folderLi.parentElement?.nextElementSibling
      if (folderUL) {
        setFolderState(folderUL as HTMLElement, folderUl.collapsed)
      if (folderLi) {
        const folderUL = folderLi.parentElement?.nextElementSibling
        if (folderUL) {
          setFolderState(folderUL as HTMLElement, folderUl.collapsed)
        }
      }
    })
  } else {

 quartz/components/styles/explorer.scss

@@ -1,4 +1,5 @@
button#explorer {
  all: unset;
  background-color: transparent;
  border: none;
  text-align: left;
@@ -8,7 +9,7 @@
  display: flex;
  align-items: center;

  & h3 {
  & h1 {
    font-size: 1rem;
    display: inline-block;
    margin: 0;
@@ -58,7 +59,7 @@
      max-height 0.35s ease,
      transform 0.35s ease,
      opacity 0.2s ease;
    & div > li > a {
    & li > a {
      color: var(--dark);
      opacity: 0.75;
      pointer-events: all;
@@ -92,7 +93,7 @@
    color: var(--tertiary) !important;
  }

  & li > button {
  & div > button {
    color: var(--dark);
    background-color: transparent;
    border: none;
@@ -103,7 +104,7 @@
    display: flex;
    align-items: center;

    & h3 {
    & p {
      font-size: 0.95rem;
      display: inline-block;
      color: var(--secondary);
@@ -138,5 +139,7 @@

#explorer-end {
  // needs height so IntersectionObserver gets triggered
  height: 1px;
  height: 4px;
  // remove default margin from li
  margin: 0;
}