Website Search keyboard shortcuts conflicts with external widgets inserted via shadow DOM

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

Continuing a discussion with @cscheid @AshleyHenry15 about an issue with adding kapa.ai to the Posit product docs,

This is similar to https://github.com/quarto-dev/quarto-cli/issues/7150, a past resolved issue where entering the Quarto website search shortcut keys (default "s", "f", "/") inside form/text inputs will also open the Quarto search.

In this new case, we have a pretty niche use of an external "Ask AI" chat widget from kapa.ai that isn't covered with the #7150 fix. This external widget adds itself to the page via the shadow DOM, and the way Quarto finds the currently focused element via document.activeElement doesn't handle elements inside shadow DOM.
https://github.com/quarto-dev/quarto-cli/blob/3563618102f43299716494b7b3f4a7fd18a62763/src/resources/projects/website/search/quarto-search.js#L384

For shadow DOM elements, the way to find the active element would instead be something like: document.activeElement?.shadowRoot.activeElement.

Here's a couple-line fix that I've confirmed locally to fix the issue with the repro, but I haven't tested it super extensively: https://github.com/quarto-dev/quarto-cli/compare/main...glin:quarto-cli:quarto-search-shadow-dom?expand=1

---

Alternatively, @cscheid has proposed adding a JavaScript API that users or external widgets could hook into to customize Quarto's search key handler. There could definitely be other sorts of complicated widgets with their own keyboard shortcuts that you could hit outside of a text input, like maybe some embeddable spreadsheet app. And neither the current nor proposed fix above would handle this.

We could use this as well for kapa.ai widgets, but the fix above would be easier for us and other users of kapa.ai, or other external widgets that use shadow DOM. I don't know of any other widgets besides kapa, but I wouldn't be surprised if there are others out there that do use it.

For now, the workaround we're using is to change the search keys to "/" only, so there's still a chance for the conflict, but "/" should be much less common for users to type into an Ask AI chat.

Steps to reproduce

1. Create a Quarto website project, e.g.:

quarto create project website quarto-search-keyboard-shortcuts-issue

2. For _quarto.yml, add website search:

project:
  type: website

website:
  title: "quarto-search-keyboard-shortcuts-issue"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd
  search: 
    location: navbar
    type: overlay

format:
  html:
    theme:
      - cosmo
      - brand
    css: styles.css
    toc: true

3. For index.qmd:

---
title: "Quarto search keyboard shortcuts issue"
---

This is a test for Quarto search keyboard shortcuts conflicting with form elements, inputs, Algolia search, or other external widgets that may be added to a Quarto website.

Expected behavior: typing "s", "f", or "/" in these inputs should not activate the Quarto search.

## Regular form elements

<input type="text" placeholder='This is an input. Type "s", "f", or "/" to test the Quarto search keyboard shortcuts issue' style="width: 100%; padding: 1rem;">

<textarea placeholder='This is a textarea. Type "s", "f", or "/" to test the Quarto search keyboard shortcuts issue' style="width: 100%; padding: 1rem;"></textarea>

## `contenteditable` elements

<div contenteditable="true" tabindex="0" style="width: 100%; padding: 1rem; border: 1px solid #333;">This is a contenteditable div. Type "s", "f", or "/" to test the Quarto search keyboard shortcuts issue</div>

## Form elements inside shadow DOM

Form elements inserted via shadow DOM to mimic external widgets like kapa.ai (https://docs.kapa.ai/)

<div id="shadow-host"></div>

<script>
const host = document.querySelector('#shadow-host');
const shadowRoot = host.attachShadow({mode: 'open'});
const content = document.createElement('textarea');
content.placeholder = 'This is a textarea inserted via the shadow DOM. Type "s", "f", or "/" to test the Quarto search keyboard shortcuts issue.';
content.style.width = '100%';
content.style.padding = '1rem';
shadowRoot.appendChild(content);
</script>

3. Preview the website. Type "s", "f", or "/" into each input.

Actual behavior

Typing the website shortcut keys, "s", "f", or "/", inside the form element in the shadow DOM will trigger Quarto search.

Expected behavior

Typing should not trigger Quarto search in the shadow DOM input.

Your environment

OS: Ubuntu 24.04

Quarto check output

[✓] Checking environment information...
      Quarto cache location: /home/glin/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.3.1: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.8.23
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /usr/bin/google-chrome
      Source: PATH

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.3
      Path: /usr/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.5.1
      Path: /opt/R/4.5.1/lib/R
      LibPaths:
        - /home/glin/R/x86_64-pc-linux-gnu-library/4.5
        - /opt/R/4.5.1/lib/R/library
      knitr: (None)
      rmarkdown: (None)

      The knitr package is not available in this R installation.
      Install with install.packages("knitr")
      The rmarkdown package is not available in this R installation.
      Install with install.packages("rmarkdown")