Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭
  • 哪里不对？
#4,042 1 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

维护者通常 2 天内回复

@KoolADE85 已经在做这个了。

开始于 2026年10月5日。

评估

难度
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.4k
派生
2.3k
平均合并
2 天 13 小时
30 天内合并 PR
20

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

plotly/dash 的其他 Issue

查看 plotly/dash 的全部 Issue

相似的 Issue

更多 Python Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。