patternfly / patternfly/patternfly-react
MenuToggle - add aria-controls prop to relate toggle and content it controls
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 862
- Forks
- 392
- Ø Merge
- 4 T. 8 Std.
- Gemergte PRs (30 T.)
- 9
Beschreibung
Describe the problem
With PF6, the dropdown menu popover is by default parented to the root. When the menu is open, there is no attribute which relates the popover menu back to the toggle button which opened it.
react-table ActionColumn is an example where PF owns both components but there's still no relation. It would be possible to override the MenuToggle by supplying a custom actionsToggle function.
In writing this issue, I realize it may not be possible without "hacks" for PF to relate the two when the application controls the rendering of both the toggle and menu separately.
Having a relationship between the two at the dom level would help with test automation such as cypress.
How do you reproduce the problem?
Go to https://www.patternfly.org/components/menus/dropdown
Open a dropdown menu
Using web inspector, inspect the dropdown toggle and popover menu parented to the root. Observe there is no attribute relating the two.
Expected behavior
Expected some attribute present, wether arbitrary or a11y requirement, to relate the two dom nodes.
Is this issue blocking you?
It is possible to supply an ID which then gets applied to the popover menu.
What is your product and what release date are you targeting?
RHOAI
Jira Issue: PF-998
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit dem in der Dokumentation zu PatternFly-Dropdowns beschriebenen Beispiel und der in diesem Issue beschriebenen MenuToggle API. Verfolge, wie der Toggle und das Popover mit Root-Elternelement gerendert werden, und definiere dann das Verhalten der Props so, dass die beiden DOM-Knoten eine Beziehung erhalten; überprüfe das Ergebnis im Dropdown-Beispiel und, falls vorhanden, in dessen Accessibility- oder Interaktionstests.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- accessibility, frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 58/100