Polymorphic component lacks focus state when rendered as <a />

[amaury-hanser]

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?

7.16.3

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

When using a polymorphic component to render a <a> element, the component does not receive the expected focus state, impacting accessibility and user experience.

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

https://codesandbox.io/p/devbox/mantine-react-template-forked-6rk4dl

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[amaury-hanser]

Upon further investigation, we can see that for this specific <Paper /> component, there is .root { outline: 0; } by default.

CSS file of the component

I'm not sure as why it is here, focus would only happen if the element is interacted with so...

Maybe we could replace:

.root {
  outline: 0;
}

with:

.root:not(:focus) {
  outline: 0;
}