From a1abd21479054d241466ace974abd0d63228343e Mon Sep 17 00:00:00 2001 From: Andrew <80933354+ndrooo@users.noreply.github.com> Date: Fri, 9 Aug 2024 21:46:50 -0400 Subject: [PATCH 1/4] feat(search): keyboard-accessible search button (#1331) * Use a `
{ 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 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { } searchType = "basic" // reset search type after closing + + searchButton?.focus() } function showSearch(searchTypeNew: SearchType) { @@ -458,8 +460,8 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { 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)) diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts index 4ffff29e..d0a16c65 100644 --- a/quartz/components/scripts/util.ts +++ b/quartz/components/scripts/util.ts @@ -3,6 +3,7 @@ export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb: function click(this: HTMLElement, e: HTMLElementEventMap["click"]) { if (e.target !== this) return e.preventDefault() + e.stopPropagation() cb() } diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss index 8a9ec671..cc2daca3 100644 --- a/quartz/components/styles/search.scss +++ b/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; From b0825632256e2aaff2af439463e1f5a3700328dd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 12 Aug 2024 13:37:54 -0700 Subject: [PATCH 2/4] chore(deps): bump preact from 10.22.1 to 10.23.2 (#1342) Bumps [preact](https://github.com/preactjs/preact) from 10.22.1 to 10.23.2. - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.22.1...10.23.2) --- updated-dependencies: - dependency-name: preact dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 738fe8fa..c17446db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "mdast-util-to-hast": "^13.2.0", "mdast-util-to-string": "^4.0.0", "micromorph": "^0.4.5", - "preact": "^10.22.1", + "preact": "^10.23.2", "preact-render-to-string": "^6.5.7", "pretty-bytes": "^6.1.1", "pretty-time": "^1.1.0", @@ -4691,9 +4691,9 @@ } }, "node_modules/preact": { - "version": "10.22.1", - "resolved": "https://registry.npmjs.org/preact/-/preact-10.22.1.tgz", - "integrity": "sha512-jRYbDDgMpIb5LHq3hkI0bbl+l/TQ9UnkdQ0ww+lp+4MMOdqaUYdFc5qeyP+IV8FAd/2Em7drVPeKdQxsiWCf/A==", + "version": "10.23.2", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.23.2.tgz", + "integrity": "sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==", "funding": { "type": "opencollective", "url": "https://opencollective.com/preact" diff --git a/package.json b/package.json index 3800706d..eed47c08 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "mdast-util-to-hast": "^13.2.0", "mdast-util-to-string": "^4.0.0", "micromorph": "^0.4.5", - "preact": "^10.22.1", + "preact": "^10.23.2", "preact-render-to-string": "^6.5.7", "pretty-bytes": "^6.1.1", "pretty-time": "^1.1.0", From 19ad5d25587f71c47011ba37b9c1a8bbd47ca7b8 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 12 Aug 2024 13:38:15 -0700 Subject: [PATCH 3/4] chore(deps): bump shiki from 1.10.3 to 1.12.1 (#1344) Bumps [shiki](https://github.com/shikijs/shiki/tree/HEAD/packages/shiki) from 1.10.3 to 1.12.1. - [Release notes](https://github.com/shikijs/shiki/releases) - [Changelog](https://github.com/shikijs/shiki/blob/main/CHANGELOG.md) - [Commits](https://github.com/shikijs/shiki/commits/v1.12.1/packages/shiki) --- updated-dependencies: - dependency-name: shiki dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 16 ++++++++-------- package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index c17446db..d1a4f7e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55,7 +55,7 @@ "rfdc": "^1.4.1", "rimraf": "^6.0.1", "serve-handler": "^6.1.5", - "shiki": "^1.10.3", + "shiki": "^1.12.1", "source-map-support": "^0.5.21", "to-vfile": "^8.0.0", "toml": "^3.0.0", @@ -820,9 +820,9 @@ } }, "node_modules/@shikijs/core": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.10.3.tgz", - "integrity": "sha512-D45PMaBaeDHxww+EkcDQtDAtzv00Gcsp72ukBtaLSmqRvh0WgGMq3Al0rl1QQBZfuneO75NXMIzEZGFitThWbg==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.12.1.tgz", + "integrity": "sha512-biCz/mnkMktImI6hMfMX3H9kOeqsInxWEyCHbSlL8C/2TR1FqfmGxTLRNwYCKsyCyxWLbB8rEqXRVZuyxuLFmA==", "dependencies": { "@types/hast": "^3.0.4" } @@ -5412,11 +5412,11 @@ } }, "node_modules/shiki": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.10.3.tgz", - "integrity": "sha512-eneCLncGuvPdTutJuLyUGS8QNPAVFO5Trvld2wgEq1e002mwctAhJKeMGWtWVXOIEzmlcLRqcgPSorR6AVzOmQ==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.12.1.tgz", + "integrity": "sha512-nwmjbHKnOYYAe1aaQyEBHvQymJgfm86ZSS7fT8OaPRr4sbAcBNz7PbfAikMEFSDQ6se2j2zobkXvVKcBOm0ysg==", "dependencies": { - "@shikijs/core": "1.10.3", + "@shikijs/core": "1.12.1", "@types/hast": "^3.0.4" } }, diff --git a/package.json b/package.json index eed47c08..b6c3a1d8 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "rfdc": "^1.4.1", "rimraf": "^6.0.1", "serve-handler": "^6.1.5", - "shiki": "^1.10.3", + "shiki": "^1.12.1", "source-map-support": "^0.5.21", "to-vfile": "^8.0.0", "toml": "^3.0.0", From 2caa62505c05cd23cc91c62591c5d8b09807351b Mon Sep 17 00:00:00 2001 From: Andrew <80933354+ndrooo@users.noreply.github.com> Date: Mon, 12 Aug 2024 23:06:19 -0400 Subject: [PATCH 4/4] feat: Mark the external link icon as aria-hidden (#1346) --- quartz/plugins/transformers/links.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts index b6a2c912..38bc0dc5 100644 --- a/quartz/plugins/transformers/links.ts +++ b/quartz/plugins/transformers/links.ts @@ -65,6 +65,7 @@ export const CrawlLinks: QuartzTransformerPlugin> = (userOpts) type: "element", tagName: "svg", properties: { + "aria-hidden": "true", class: "external-icon", viewBox: "0 0 512 512", },