Won't have time to fully check the PR until later today but we recently ran into a problem at work where we wanted to have interactive content within a tags, only to find out that this violates the HTML spec (and we couldn't get events to only propagate to the children, it always triggered the anchor click):

I think we would have to either disable the IsClosable render path when an anchor tag is used, or move the IsClosable render path out of the anchor tag.

Would it be better if the close button was overlayed on top instead of nested inside?

The scenario at my work place was to have a clickable card as well as action buttons on the right side of it.

We had essentially this setup:

<ClickableCard> @* translates into an anchor tag *@
  <MudGrid>
    <SomeVisualComponents />
    <SomeActionButtons />
  </MudGrid>
</ClickableCard>

Since we couldn't get this to work because of the anchor tag issue we are going to do something like this (not yet implemented):

<ClickableCard> @* no anchor tag *@
  <CardContent>
    <SomeVisualComponents />
  </CardContent>
  <ActionAreaContent>
    <SomeActionButtons />
  </ActionAreaContent>
</ClickableCard>

The ClickableCard handles hover state/styling, the CardContent is the anchor tag, the ActionAreaContent is the extra area that is not part of the anchor tag. The downside here is that you give up the space taken by the buttons as clickable area.

The alternative would have been to, like you said, overlay the button on top of the clickable area. For us that was too annoying to handle, especially with multiple buttons and potentially other content within that second area.

FYI I just tried with MUI and they don't handle that case either. Their link Chips are also anchor tags, but if you make the chip "deletable" they add an SVG with an onclick handler (so technically not HTML spec violation), but of course when you click on the SVG the anchor tag triggers.