Never wrap a link card in an anchor when it carries a control of its own

Author: aaronstevenwhite

web/components/links/resource-card.test.tsx

@@ -91,6 +91,17 @@ describe('ResourceCard', () => {
     expect(screen.getByText('at://did:plc:x/c/r').className).toContain('break-all');
   });
 
+  it('will not wrap a card that carries something interactive of its own', () => {
+    // A button nested inside a link is not something a browser can represent.
+    render(
+      <ResourceCard icon={Github} title="Dataset" href="https://example.org">
+        <button type="button">Load in Python</button>
+      </ResourceCard>
+    );
+    expect(screen.queryByRole('link')).toBeNull();
+    expect(screen.getByRole('button', { name: 'Load in Python' })).toBeInTheDocument();
+  });
+
   it('renders anything it is given below its own content', () => {
     render(
       <ResourceCard icon={Github} title="Dataset">

web/components/links/resource-card.tsx

@@ -137,7 +137,10 @@ export function ResourceCard({
   children,
   className,
 }: ResourceCardProps) {
-  const linkWraps = Boolean(href) && !actions?.length;
+  // Wrapping the card in an anchor is only safe when nothing inside it is
+  // interactive: a button nested in a link is not something a browser can
+  // represent, and the dataset snippet a card can carry has one.
+  const linkWraps = Boolean(href) && !actions?.length && !children;
 
   const body = (
     <div className="flex items-start gap-3">