a11y: lightbox link of an off-theme `.light-content` or `.dark-content` image stays focusable

オープン 初心者向け
  • 何か問題がありますか？
#15,170 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, scss
領域
accessibility, frontend

調査の方向性

レポートが示しているのは src/resources/filters/layout/lightbox.lua と src/resources/formats/html/_quarto-rules.scss です。まず、lightbox のラップとテーマの非表示に関するルールを読んでください。提供された QMD の例で再現し、対応する画像は引き続き開ける一方で、無効なテーマのリンクがキーボードのタブ移動順序とアクセシビリティツリーから非表示になることを確認してください。Issue ではテストファイルは指定されていません。

索引モデルが issue の本文から書いたものです。

説明

accessibility bug
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

With a light and a dark version of an image, Quarto hides the one that does not match the colour scheme, but it leaves the lightbox link around it.
The hidden image's link is zero-size and invisible, yet it stays in the keyboard tab order, and pressing Enter on it opens the lightbox with the image from the other colour scheme.
Keyboard users tab onto an element they cannot see.

The lightbox filter wraps every lightbox image in an <a class="lightbox"> and puts no theme class on the link.

The stylesheet hides the image with display: none !important, and the rule only matches the image.

#14691 describes the same pattern for the dashboard navbar logo.

Steps to reproduce
---
title: "Lightbox light and dark test"
lightbox: auto
format:
  html:
    theme:
      light: default
      dark: darkly
---

![Light version](light.svg){.light-content}

![Dark version](dark.svg){.dark-content}

Render it, press Tab until the focus reaches the second image in light mode, then press Enter.

Actual behavior

The output contains one link per image, and the link of the off-theme image measures 0 by 0:

<a href="dark.svg" class="lightbox" data-gallery="quarto-lightbox-gallery-2" title="Dark version"><img src="dark.svg" class="dark-content img-fluid figure-img" alt="Dark version"></a>

In light mode the tab order is: skip link, light image link, dark image link (invisible), lightbox close button.
In dark mode it is the same with the roles swapped.
Enter on the invisible link opens the lightbox with the hidden image.

Expected behavior

The link of the hidden image is hidden with it, so it leaves the tab order and the accessibility tree.

Your environment
  • IDE: none, terminal only
  • OS: macOS (Darwin 27.0.0, Apple Silicon)
Quarto check output
Quarto 99.9.9
[✓] 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 Quarto installation......OK
      Version: 99.9.9
      commit: 69592e5c1718d3e1b2f3d11e757d32e23a16af67
主要言語
JavaScript
スター
6.1k
フォーク
476
平均マージ
17時間 7分
マージ済み PR（30日）
112

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。