Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#4,042 3 commentaires 0 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 2 jours

@KoolADE85 y travaille déjà.

Depuis le 5/10/2026.

  • #4056 par @KoolADE85 — ouverte

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
56/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
css, playwright, python, react, typescript
Domaine
accessibility, frontend

Piste de recherche

Commencez par components/dash-core-components/src/fragments/Dropdown.tsx (l'input.dash-dropdown-focus-target caché avec aria-hidden et tabIndex) et src/components/css/dropdown.css (son positionnement absolute, largeur illimitée). Reproduisez avec la mise en page minimale de l'issue, en vérifiant document.documentElement.scrollWidth et en exécutant axe-core pour la violation aria-hidden-focus. L'estimation est terminée lorsque la cible de focus n'élargit plus la page et qu'aucun contenu focalisable ne se trouve dans aria-hidden, tout en conservant le comportement d'ordre de tabulation visé par la solution de contournement dans Safari ; vérifiez que les tests Dropdown existants dans la suite de tests de dash-core-components passent toujours.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
Python
Étoiles
24.4k
Forks
2.3k
Merge moyen
2 j 5 h
PR mergées (30 j)
22

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de plotly/dash

Toutes les issues de plotly/dash

Issues similaires

Plus d'issues Python

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.