patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

MenuToggle - add aria-controls prop to relate toggle and content it controls

Open christianvogt opened this issue 1 year ago • 6 comments

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

christianvogt avatar Dec 03 '24 16:12 christianvogt

@kmcfaul would the template help here?

tlabaj avatar Dec 19 '24 16:12 tlabaj

We should add a new prop in React for aria-controls (optional with a console warning if not supplied) which should point to an ID on the menu, and update examples to include this prop.

thatblindgeye avatar Jan 30 '25 16:01 thatblindgeye

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Apr 02 '25 11:04 github-actions[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Jun 30 '25 11:06 github-actions[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Aug 31 '25 11:08 github-actions[bot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions[bot] avatar Nov 05 '25 11:11 github-actions[bot]