Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

[BUG] dcc.Dropdown: hidden focus-target input is focusable inside aria-hidden and can overflow its wrapper

未關閉
  • 哪裡不對？
#4,042 3 則留言 0 個 reaction 已指派 1 人 在 GitHub 檢視

維護者通常 2 天內回覆

@KoolADE85 已經在處理了。

開始於 2026年10月5日。

  • #4056 來自 @KoolADE85 —— 未關閉

評估

難度
4/5
預估耗時
3-5 天
新手友好度
56/100
Issue 類型
缺陷
描述清晰度
基本清楚
活躍度
活躍
技術堆疊
css, playwright, python, react, typescript
領域
accessibility, frontend

研究方向

從 components/dash-core-components/src/fragments/Dropdown.tsx（帶有 aria-hidden 與 tabIndex 的隱藏 input.dash-dropdown-focus-target）以及 src/components/css/dropdown.css（其 absolute 定位、寬度無限制）著手。使用 issue 中的最小版面重現，檢查 document.documentElement.scrollWidth，並執行 axe-core 以找出 aria-hidden-focus 違規。完成條件為：焦點目標不再加寬頁面，且 aria-hidden 內部不含任何可聚焦內容，同時保留該規避方案所針對的 Safari 分頁鍵順序行為；檢查 dash-core-components 測試套件中既有的 Dropdown 測試仍通過。

由索引模型根據 Issue 內容生成。

描述

bug P2 size: 1

Thank you for Dash!

Describe your context

dash                 4.5.0rc0

(the same code is on dev today: components/dash-core-components/src/fragments/Dropdown.tsx and src/components/css/dropdown.css)

  • OS: Linux
  • Browser: Chromium 151 (headless, via Playwright) with axe-core

Describe the bug

The hidden input.dash-dropdown-focus-target that dcc.Dropdown renders (the Safari tab-order workaround) causes two problems:

  1. It is focusable inside aria-hidden. It has aria-hidden="true" and tabIndex={0} (while the trigger <button> is tabIndex={-1}), so the only tab stop for every dropdown is hidden from assistive technology. axe-core reports aria-hidden-focus (serious) once per dcc.Dropdown on the page: "Focusable content should be disabled or be removed from the DOM".

  2. It can widen the page. Its CSS is only position: absolute; opacity: 0; pointer-events: none;, so it keeps the browser's default input width (about 215px in Chromium) and is anchored at left: 0 of the wrapper. A dropdown narrower than that, near the right edge of a flex row, pushes the input past the viewport: in our app a 600px-wide viewport got document.documentElement.scrollWidth === 648 (horizontal scrolling on mobile). Adding max-width: 100% (or width: 100% / inset: 0) to .dash-dropdown-focus-target fixes it; we use this override for now:

    .dash-dropdown-wrapper .dash-dropdown-focus-target { max-width: 100%; }

Minimal example:

from dash import Dash, dcc, html

app = Dash(__name__)
app.layout = html.Div(
    [html.Div(style={"flex": "1"}), dcc.Dropdown(["a", "b"], placeholder="Pick", style={"width": "140px"})],
    style={"display": "flex", "width": "100%"},
)

if __name__ == "__main__":
    app.run()

At a 200px-wide viewport, document.documentElement.scrollWidth is 237 because of the focus input, and axe-core reports one aria-hidden-focus violation on it.

Expected behavior

  • No focusable element inside aria-hidden. For example, drop aria-hidden from the workaround input and give it the dropdown's accessible name, or make the trigger button itself the tab stop where the browser supports it. I don't know which works best with the Safari behaviour the workaround targets.
  • The hidden input never takes more space than its wrapper (max-width: 100% in dropdown.css).

Screenshots

n/a

主要語言
Python
星號
24.5k
分支
2.3k
平均合併
3 天 2 小時
30 天內合併 PR
28

環境準備

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

plotly/dash 的其他 Issue

查看 plotly/dash 的全部 Issue

相似的 Issue

更多 Python Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。