Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#4,042 3 comentários 0 reações 1 responsável Ver no GitHub

Mantenedores costumam responder em até 2 dias

@KoolADE85 já está trabalhando nisso.

Desde 5/10/2026.

  • #4056 de @KoolADE85 — aberto

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
56/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
css, playwright, python, react, typescript
Domínio
accessibility, frontend

Direção de pesquisa

Comece em components/dash-core-components/src/fragments/Dropdown.tsx (o input.dash-dropdown-focus-target oculto com aria-hidden e tabIndex) e src/components/css/dropdown.css (se posicionamento absolute, largura ilimitada). Reproduza com o layout mínimo do issue, verificando document.documentElement.scrollWidth e executando axe-core para a violação aria-hidden-focus. Está pronto quando o alvo de foco deixa de alargar a página e nenhum conteúdo focável fica dentro de aria-hidden, mantendo o comportamento de ordem de tabulação do Safari que a solução contorna; verifique se os testes existentes de Dropdown na suíte de testes do dash-core-components ainda passam.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
Python
Estrelas
24.4k
Forks
2.3k
Merge médio
2d 14h
PRs com merge (30d)
23

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de plotly/dash

Todas as issues de plotly/dash

Issues semelhantes

Mais issues de Python

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.