Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#4,042 1 commento 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

@KoolADE85 ci sta già lavorando.

Dal 5/10/2026.

  • #4056 di @KoolADE85 — aperta

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
56/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, playwright, python, react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Parti da components/dash-core-components/src/fragments/Dropdown.tsx (l'input.dash-dropdown-focus-target nascosto con aria-hidden e tabIndex) e src/components/css/dropdown.css (il suo posizionamento absolute, larghezza illimitata). Riproduci con il layout minimale indicato nell'issue, controllando document.documentElement.scrollWidth ed eseguendo axe-core per la violazione aria-hidden-focus. Si considera completato quando il target di focus non allarga più la pagina e all'interno di aria-hidden non siede alcun contenuto focalizzabile, mantenendo il comportamento di ordine di tabulazione di Safari a cui la soluzione alternativa punta; verifica che i test Dropdown esistenti nella suite di test di dash-core-components continuino a superarsi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
Python
Stelle
24.4k
Fork
2.3k
Merge medio
2g 13h
PR unite (30g)
20

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di plotly/dash

Tutte le issue di plotly/dash

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.