Alert causes accessibility issue with no children #8345
Description
Dependencies check up
- I have verified that I use latest version of all @mantine/* packages
What version of @mantine/* packages do you have in package.json?
8.3.4
What package has an issue?
@mantine/core
What framework do you use?
Vite
In which browsers you can reproduce the issue?
Chrome
Describe the bug
I want to use the <Alert /> component with just a title and no body as I prefer the appearance. However, mantine automatically sets the aria-describedby prop to a body ID that is generated for children that do not exist in this case.
I am not an accessibility expert. Is it reasonable to use Alert like this? The title prop seems to be rendered as a <span> so it seems OK to me.
If possible, include a link to a codesandbox with a minimal reproduction
https://codesandbox.io/p/sandbox/mantine-react-template-forked-sflddq
Possible fix
In Alert.tsx line 140:
Ammend:
aria-describedby={bodyId}
To:
aria-describedby={children ? bodyId : undefined}
Self-service
- I would be willing to implement a fix for this issue