fix(mui): prevent nested interactive elements in navigation buttons

[kaigritun]

Summary

This PR fixes an accessibility issue where navigation buttons (CreateButton, EditButton, ShowButton, ListButton, CloneButton) render a <button> element inside an <a> element.

Problem

The current implementation wraps <Button> inside <LinkComponent>:

<LinkComponent to={to}>
  <Button>...</Button>
</LinkComponent>

This creates nested interactive elements (<a><button></a>), which:

• Is not recommended for accessibility (see https://accessibleweb.com/question-answer/why-are-nested-interactive-controls-an-accessibility-issue/)
• Causes keyboard navigation issues (button is focused twice when tabbing)

Solution

Use MUI's component prop to render the Button as the LinkComponent directly:

<Button component={LinkComponent} to={to}>
  ...
</Button>

This approach:

• Maintains all existing button styling
• Preserves navigation behavior
• Fixes the nested interactive elements issue
• Follows MUI's recommended pattern for link buttons

Changes

• packages/mui/src/components/buttons/create/index.tsx
• packages/mui/src/components/buttons/edit/index.tsx
• packages/mui/src/components/buttons/show/index.tsx
• packages/mui/src/components/buttons/list/index.tsx
• packages/mui/src/components/buttons/clone/index.tsx

Testing

The fix maintains backward compatibility - all existing props and behaviors are preserved. The only change is the rendered HTML structure.

Fixes #7085

[changeset-bot]

🦋 Changeset detected

Latest commit: 7237c5c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@refinedev/mui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[cypress]

refine    Run #12469

Run Properties:   Passed #12469  •  ddd08da8bc: Merge pull request #7263 from refinedev/fix-react-admin-old-blog

Project	refine
Branch Review	main
Run status	Passed #12469
Run duration	18m 38s
Commit	ddd08da8bc: Merge pull request #7263 from refinedev/fix-react-admin-old-blog
Committer	Özgür Akça
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	22
Skipped	0
Passing	368
View all changes introduced in this branch ↗︎

[BatuhanW]

Is removing replace intentional?

[BatuhanW]

The order of props are changed, so the diff is a bit hard to read. Could you try to keep current order as much as possible?

[kaigritun]

Thanks for the review @BatuhanW! I've addressed both of your comments:

1. replace prop: Good catch! Removing replace={false} was not intentional. I've restored it in the latest commit. The prop is now passed to the Button component and will be forwarded to the LinkComponent via the component prop.

2. Prop order: I've reorganized the props to maintain the original order as much as possible. The new structure-specific props (component, to, replace) are added after disabled to minimize the diff, while keeping all other props in their original order (startIcon, title, sx, data-testid, className, ...restProps).