Skip to content

Website search overlay has several accessibility defects #15189

Open

Description

@cwickham

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

The website search overlay has the accessibility defects in the list below. The search UI is mostly @algolia/autocomplete-js. Quarto bundles version 1.19.1. As a result, some defects are in Quarto code and some are upstream.

I tested on main (5b23163) and again after an update of autocomplete to 1.19.12, the latest release. I used Chromium and WebKit through Playwright, at 1280px and 320px. All four combinations gave the same results.

Scope. search.type: textbox (the default for sidebar search) uses the same overlay below 992px. At desktop width, the textbox has the shortcut defect, the live-region defect, the magnifier Tab stop, and the "Submit" input name (#15062). The other defects are only in the overlay.

Proposed first task: update AUTOCOMPLETE_JS to 1.19.12. This update corrects the first item, and the changelog shows no breaking changes. A separate PR can do it.

  • Esc and Cancel move focus to <body>, not to the search button. 2.4.3. Owner: dependency. The update to 1.19.12 corrects this (algolia/autocomplete#1357).
  • Tab moves focus out of the overlay into the page behind it. 2.4.3. After the last result, focus goes to the skip link, then the navbar. Owner: Quarto, or upstream. Quarto can set inert on the page while the overlay is open.
  • Focus on the page behind the overlay is hidden. 2.4.11. The overlay backdrop covers each element that gets focus in the item above. Owner: same as above.
  • Screen readers can read the page behind the overlay. 1.3.1. The overlay has no role="dialog" or aria-modal, and the page has no inert or aria-hidden. Owner: same as above.
  • The result count and "No results" are not announced. 4.1.3. The page has no aria-live region or role="status". Owner: upstream (algolia/autocomplete#1329, open PR), or Quarto with a live region in the noResults template.
  • role="combobox" is on the .aa-Autocomplete wrapper in the navbar, not on the input in the overlay. 4.1.2. The input does get aria-activedescendant when the arrow keys move the selection. Owner: upstream (algolia/autocomplete#589).
  • The magnifier button is a Tab stop before the input, is named "Submit", and only closes the overlay. 4.1.2. Enter on the button closes the overlay, opens no result, and moves focus to <body>. Owner: Quarto (the name and the empty action). The button is upstream markup, but Quarto can remove it from the Tab order.
  • The input has no reliable name. 4.1.2. Owner: Quarto (Website search field is announced as "Submit", or has no name in the overlay #15062).
  • The selection highlight stays on the first result when Tab moves focus to other results. 2.4.7. Two results then look active. Owner: Quarto. Related: defaultActiveItemId: 0 and the aria-selected styles. The open focus-ring PR Use one focus ring for all focusable elements in Bootstrap HTML #15163 does not change this.
  • Readers cannot turn off the single-key shortcuts f, /, and s. 2.1.4. Only the author can change them, with search.keyboard-shortcut (handler). Owner: Quarto.

Related: #14377 (#quarto-search-results is outside a landmark), #13329 (shortcut conflicts), #15139 (focus rings).

AI tools helped with this investigation. The findings come from a local clone of quarto-cli and rendered test sites.

Steps to reproduce

A website with one page. Navbar search uses the overlay by default.

_quarto.yml:

project:
  type: website
website:
  navbar:
    title: "Search test"

index.qmd:

---
title: Planets
---

## Mars

Mars is the fourth planet from the Sun.

## Jupiter

Jupiter is the largest planet.
  1. Render the site and open index.html.
  2. Press Tab until the search button has focus. Press Enter.
  3. Type mars. Press Esc. Focus goes to <body>.
  4. Open the search again and type mars. Press Tab five times. Focus leaves the overlay.
  5. Type zzz. Nothing announces "No results".
  6. Press Shift+Tab from the input. Focus goes to a button named "Submit".

Actual behavior

See the list in the bug description.

Expected behavior

The overlay acts as a modal dialog. Focus stays in it and goes back to the search button when the overlay closes. Screen readers announce the input name, the result count, and the active result. Only the result with focus looks active.

Your environment

  • IDE: none (browser test with Playwright 1.64.1: Chromium and WebKit)
  • OS: macOS 27.0.1 (build 26A434)

Quarto check output

Quarto 1.11.6
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
      Project: none found (single-file mode)
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.11.6
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.04
      Chrome Headless Shell: 150.0.7871.115
      VeraPDF: 1.28.2

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
      Version: 2026

[✓] Checking Chrome Headless....................OK
      Using: Chrome Headless Shell installed by Quarto
      Path: /Users/charlottewickham/Library/Application Support/quarto/chrome-headless-shell/chrome-headless-shell-mac-arm64/chrome-headless-shell
      Version: 150.0.7871.115

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

[✓] Checking R installation...........OK
      Version: 4.6.0
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/charlottewickham/Library/R/arm64/4.6/library
        - /Library/Frameworks/R.framework/Versions/4.6/Resources/library
      knitr: 1.51
      rmarkdown: 2.31

[✓] Checking Knitr engine render......OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /Users/charlottewickham/.pyenv/versions/3.12.2/bin/python3
      Jupyter: 5.9.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking Julia installation...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions