Bug - Dropdown - aria-hidden still set on dropdowns after click

[xbhouse]

Describe the problem Dropdown menus within modals are aria-hidden even after selecting a dropdown, which prevents users from using keyboards or assistive tech to navigate and messes with automated tests targeting these dropdown elements.

How do you reproduce the problem? Can be seen in this file in this PR to migrate from PF5 to PF6, and this console error seen in the PF docs for "modal with dropdown" (same error we are seeing in our app's component):

modal/#with-dropdown:1 Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <button.pf-v6-c-button pf-m-primary>
Ancestor with aria-hidden: <div#root> <div id=​"root" aria-hidden=​"true">​…​</div>​

Expected behavior We should be able to navigate through and select items in a dropdown with a keyboard / assistive technologies and our tests should be able to target dropdown elements using getByRole. aria-hidden should not be true on the dropdown menu if the menu is open.

Is this issue blocking you? Non-blocking as we are using a workaround proposed until this is resolved.

What is your environment?

• OS: Fedora 42
• Browser: Chrome
• Version: PF6, React18

What is your product and what release date are you targeting? This is the Repositories service within Insights. We have a workaround to keep us from being blocked on our PF6 migration.

Any other information? Current workaround proposed to append the dropdown inline to the modal works for us until this is resolved:

<Modal>
  <Dropdown
   ...
   popperProps={{ appendTo: 'inline' }}
  >
  </Dropdown>
</Modal>

[dominikvagner]

as Bryttanie mentioned, this is happening also in the PF6 docs in the modal > with dropdown example 🔗 here is a quick repro for this bug:

1. go to the example and click button which opens the modal
2. (open dev tools)
3. mouse click the dropdown to open the menu || press tab to select it and enter/return to open it
4. then the up/down arrow keys do nothing and you can't select the items :sadcat:
5. mouse click any of the items and that's when the error pops-up in the console (and the browser blocks the aria-hidden on the menu/dropdown list because it's descendant was focused)
6. repeat step '3.'
7. after that the arrow keys work as they should (because the aria-hidden is blocked) and you can choose a item from the menu

[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.

[rebeccaalpert]

I think this is a larger issue than simply removing aria-hidden. We are setting this automatically here: https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Modal/Modal.tsx#L112. If I change the logic to ignore dropdowns, we start to see

Uncaught TypeError: Cannot read properties of null (reading 'focus')
    at onFocus (eval at Example (example.js:172:1), <anonymous>:19:13)
    at onSelect (eval at Example (example.js:172:1), <anonymous>:15:5)
    at onSelect (Dropdown.js:80:1)
    at onItemSelect (MenuItem.js:127:1)
    at onClick (MenuItem.js:221:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)

I believe this is related to the focus trap that blocks the rest of the DOM (including the default way the dropdown is appended). I noticed that the example is old and refers to the old PatternFly version way of dealing with this, rather than the newer "append inline." I'm going to discuss this with the team. At a minimum, I think we should update the example to reflect the new API.

[rebeccaalpert]

Spoke to the team - we are going to update the example to reflect the popperProps workaround for now since it's out-of-date, but will not adjust the focus trap logic.