Accessibility problem in ComboboxTarget component - @mantine/core

Dependencies check up

[X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.11.0

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Not applicable – issue is not related to the browser

Describe the bug

Path: src/mantine-core/src/components/ComboBox/use-combobox-target-props/use-combobox-target-props.ts

The combobox Target component has a attribute called aria-controls. This attribute has the id ( 'aria-controls': ctx.store.listId) of the dropdown that it controls. The problem is when the dropdown is closed the aria-controls attribute is still existing on the combobox Target while the dropdown is not even visible in the DOM, so it points to nothing. I get an accessibility warning in storybook:

Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls="mantine-hbj4u6pg6"

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

A solution is to check if the dropdown is open, if it's true, add "aria-controls" attribute, else, set as undefined:

'aria-controls': ctx.store.dropdownOpened
          ? ctx.store.listId
          : undefined,

Self-service

[X] I would be willing to implement a fix for this issue

mantinedev / mantine