@akinon/pz-theme 2.0.138-beta.0 → 2.0.138

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.138-beta.0
+## 2.0.138
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.138-beta.0
-  - @akinon/theme-contract@2.0.138-beta.0
+- 4c44342: ZERO-5187: Render an action link block as a button role, not an anchor
+  - @akinon/next@2.0.138
+  - @akinon/theme-contract@2.0.138
 
 ## 2.0.137
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.138-beta.0",
+  "version": "2.0.138",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.138-beta.0",
+    "@akinon/next": "2.0.138",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.138-beta.0",
+    "@akinon/theme-contract": "2.0.138",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.138-beta.0",
+    "@akinon/next": "2.0.138",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/blocks/__tests__/link-block-interactive-nesting.test.tsx

@@ -0,0 +1,337 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+/**
+ * Recursive stub. Two child types are drawn as the real thing, because the
+ * whole point of these tests is what the ROOT does to interactive
+ * descendants: a `link` child reaches the real renderer, and a `button` child
+ * emits a native `<button>` the way `button-block` does. Everything else is a
+ * plain box that still forwards its own children.
+ */
+jest.mock('../../theme-block', () => {
+  const ReactLocal = require('react');
+
+  const Stub = ({ block, ...rest }: any): any => {
+    if (block?.type === 'link') {
+      const Real = require('../link-block').default;
+      return ReactLocal.createElement(Real, { block, ...rest });
+    }
+
+    if (block?.type === 'button') {
+      return ReactLocal.createElement(
+        'button',
+        { type: 'button', 'data-block-id': block.id },
+        block.label ?? 'CTA'
+      );
+    }
+
+    return ReactLocal.createElement(
+      'div',
+      { 'data-block-id': block?.id },
+      (block?.blocks ?? []).map((child: any) =>
+        ReactLocal.createElement(Stub, { key: child.id, block: child, ...rest })
+      )
+    );
+  };
+
+  return { __esModule: true, default: Stub };
+});
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => ({
+    t: (p: string) => p,
+    setLocale: () => {},
+    setCurrency: () => {},
+    locale: 'tr-tr',
+    currency: 'TRY',
+    locales: [{ value: 'tr-tr' }],
+    currencies: ['TRY'],
+    defaultLocaleValue: 'tr-tr',
+    defaultCurrencyCode: 'TRY',
+    localeUrlStrategy: 'hide-default-locale'
+  })
+}));
+
+import LinkBlock from '../link-block';
+import {
+  ACTION_ROOT_RESET_CSS,
+  compositionUsesActionRoot,
+  generateThemeCSS
+} from '../../utils';
+
+const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr'
+]);
+
+/**
+ * The invariant, checked on the markup the server actually streams.
+ *
+ * It cannot be checked through jsdom or Testing Library: both hand back the
+ * tree the HTML parser already REPAIRED, so an anchor nested in an anchor
+ * reads as perfectly valid there. That is why a hundred block tests never saw
+ * this. Walking the serialized string is the only place the authored nesting
+ * is still visible.
+ *
+ * Counting elements is not enough either: `<button>` inside `<button>` is
+ * repaired by MOVING the inner control out, which leaves the element count
+ * unchanged. Only the shape shows it.
+ */
+const invalidNestings = (html: string): string[] => {
+  const found: string[] = [];
+  const stack: string[] = [];
+  const tagPattern =
+    /<(\/?)([a-zA-Z][a-zA-Z0-9-]*)((?:"[^"]*"|'[^']*'|[^>])*?)(\/?)>/g;
+
+  let match: RegExpExecArray | null;
+  while ((match = tagPattern.exec(html)) !== null) {
+    const isClosing = Boolean(match[1]);
+    const name = match[2].toLowerCase();
+    const selfClosing = Boolean(match[4]);
+
+    if (VOID_ELEMENTS.has(name)) continue;
+
+    if (isClosing) {
+      const open = stack.lastIndexOf(name);
+      if (open >= 0) stack.length = open;
+      continue;
+    }
+
+    if (selfClosing) continue;
+
+    // `<a>` is a formatting element, so the parser reparents a nested one.
+    // `<button>` inside `<button>` is repaired too. `<a>` inside `<button>`
+    // is not — but a span root makes all three moot, which is the point.
+    if (name === 'a' && stack.includes('a')) found.push('a-in-a');
+    if (name === 'button' && stack.includes('button')) {
+      found.push('button-in-button');
+    }
+
+    stack.push(name);
+  }
+
+  return found;
+};
+
+const props = (block: Record<string, unknown>) =>
+  ({
+    block,
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    currentBreakpoint: 'desktop'
+  } as any);
+
+const acting = (over: Record<string, unknown> = {}) => ({
+  id: 'trigger',
+  type: 'link',
+  properties: {
+    href: { desktop: '#' },
+    actionType: { desktop: 'open-modal' },
+    actionTarget: { desktop: 'm-ad7cbfp3' }
+  },
+  ...over
+});
+
+describe('link block element choice', () => {
+  it('renders a span with a button role when the block performs an action', () => {
+    const html = renderToStaticMarkup(<LinkBlock {...props(acting())} />);
+
+    expect(html).toContain('<span');
+    expect(html).toContain('role="button"');
+    expect(html).toContain('tabindex="0"');
+    expect(html).toContain('data-action-root');
+    // No dead destination in the status bar and none in the a11y tree.
+    expect(html).not.toContain('<a ');
+    expect(html).not.toContain('href=');
+    // A native button would reopen the nesting hazard this file exists for.
+    expect(html).not.toContain('<button');
+  });
+
+  it('keeps a real anchor when the block navigates', () => {
+    const html = renderToStaticMarkup(
+      <LinkBlock
+        {...props({
+          id: 'nav',
+          type: 'link',
+          properties: { href: { desktop: '/yatak-odasi/' } }
+        })}
+      />
+    );
+
+    expect(html).toContain('<a ');
+    expect(html).toContain('href="/yatak-odasi/"');
+    expect(html).not.toContain('role="button"');
+  });
+
+  it('keeps the dialog aria on whichever element it renders', () => {
+    const html = renderToStaticMarkup(<LinkBlock {...props(acting())} />);
+
+    expect(html).toContain('aria-haspopup="dialog"');
+  });
+});
+
+describe('interactive nesting', () => {
+  /**
+   * The shape that took the zsa-zsa-zsu homepage down: a card whose root link
+   * opens a modal, with a second link nested inside it carrying `href: "#"`
+   * and no action of its own. Four of these shipped in section-q2jfk, and the
+   * parser turned 91 anchors into 103.
+   */
+  const cardWithNestedLink = acting({
+    id: 'block-urclp',
+    blocks: [
+      { id: 'block-sc9a5', type: 'image' },
+      {
+        id: 'block-s2px2',
+        type: 'group',
+        blocks: [
+          {
+            id: 'block-mznaq',
+            type: 'link',
+            properties: { href: { desktop: '#' } },
+            blocks: [{ id: 'block-pt6mw', type: 'icon' }]
+          }
+        ]
+      }
+    ]
+  });
+
+  /**
+   * The regression a native `<button>` root would have introduced, and the
+   * reason the root is a span: an ordinary product card that opens a quick
+   * view and carries its own add-to-cart. This was SAFE before the element
+   * changed at all (`a > button` is not repaired), so turning it into
+   * `button > button` would have broken markup that worked.
+   */
+  const cardWithNativeButton = acting({
+    id: 'card',
+    blocks: [
+      { id: 'img', type: 'image' },
+      {
+        id: 'body',
+        type: 'group',
+        blocks: [
+          { id: 'cta', type: 'button', label: 'Sepete ekle' },
+          { id: 'price', type: 'text' }
+        ]
+      }
+    ]
+  });
+
+  it('emits no invalid nesting for the card that broke the homepage', () => {
+    const html = renderToStaticMarkup(<LinkBlock {...props(cardWithNestedLink)} />);
+
+    expect(invalidNestings(html)).toEqual([]);
+    expect(html.startsWith('<span')).toBe(true);
+    // The inner link stays a real link; only the root stopped being one.
+    expect((html.match(/<a /g) ?? []).length).toBe(1);
+  });
+
+  it('emits no invalid nesting for an action card holding a native button', () => {
+    const html = renderToStaticMarkup(<LinkBlock {...props(cardWithNativeButton)} />);
+
+    expect(invalidNestings(html)).toEqual([]);
+    expect(html).toContain('<button type="button" data-block-id="cta"');
+  });
+
+  it('still catches the nesting when neither link acts', () => {
+    // Guards the guard. With no action the root is an anchor again, and a
+    // nested link is the original defect — which only the descendant-side
+    // guard can fix, not the root element choice.
+    const html = renderToStaticMarkup(
+      <LinkBlock
+        {...props({
+          ...cardWithNestedLink,
+          properties: { href: { desktop: '/koleksiyonlar/' } }
+        })}
+      />
+    );
+
+    expect(invalidNestings(html)).toContain('a-in-a');
+  });
+
+  it('detects button-in-button, so the native-button root cannot come back', () => {
+    // The branch above can only prove itself on markup that actually carries
+    // the shape. Element counts are equal here (5 and 5), which is exactly
+    // why a count-based check is not enough.
+    const repaired =
+      '<div><button type="button"><div><img></div>' +
+      '<button type="button">CTA</button></button></div>';
+
+    expect(invalidNestings(repaired)).toContain('button-in-button');
+  });
+});
+
+describe('action root cursor rule', () => {
+  const composition = (blocks: unknown[]) => [{ id: 's1', blocks }] as any;
+
+  it('is emitted first, ahead of every section rule', () => {
+    const css = generateThemeCSS(
+      composition([
+        {
+          id: 'trigger',
+          type: 'link',
+          properties: { actionType: { desktop: 'open-modal' } }
+        }
+      ])
+    );
+
+    expect(css.startsWith(ACTION_ROOT_RESET_CSS)).toBe(true);
+  });
+
+  it('gives back the pointer an hrefless span does not get', () => {
+    expect(ACTION_ROOT_RESET_CSS).toContain('cursor:pointer');
+    // A span needs nothing else: it inherits typography and keeps the
+    // anchor's display. Resetting more would shadow authored styles.
+    expect(ACTION_ROOT_RESET_CSS).not.toContain('appearance');
+    expect(ACTION_ROOT_RESET_CSS).not.toContain('!important');
+    expect(ACTION_ROOT_RESET_CSS).not.toContain('data-block-id');
+  });
+
+  it('is left out of a composition where nothing acts', () => {
+    const css = generateThemeCSS(
+      composition([
+        { id: 'nav', type: 'link', properties: { href: { desktop: '/x/' } } }
+      ])
+    );
+
+    expect(css).not.toContain('data-action-root');
+    expect(generateThemeCSS([])).toBe('');
+  });
+
+  it('finds an acting link however deep it is nested', () => {
+    expect(
+      compositionUsesActionRoot(
+        composition([
+          {
+            id: 'group',
+            type: 'group',
+            blocks: [
+              // Scalar rather than per-breakpoint: both shapes reach the
+              // store, so both have to be recognised.
+              {
+                id: 'inner',
+                type: 'link',
+                properties: { actionType: 'scroll-to' }
+              }
+            ]
+          }
+        ])
+      )
+    ).toBe(true);
+  });
+});

package/src/blocks/favorite-button-block.tsx

@@ -212,7 +212,11 @@ const FavoriteButtonBlock = ({
     // click, the quick-view opener — which has nothing to do with navigation.
     if (
       event.currentTarget instanceof Element &&
-      event.currentTarget.closest('a')
+      // `[data-action-root]` is a link block whose action made it a span
+      // instead of an anchor — still a card whose action the heart must not
+      // fire. `link-block` also reads `defaultPrevented`, so the two guards
+      // cover each other.
+      event.currentTarget.closest('a, [data-action-root]')
     ) {
       event.stopPropagation();
     }

package/src/blocks/link-block.tsx

@@ -10,6 +10,7 @@ import {
 } from '../utils';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { useBlockAction } from '../hooks/use-block-action';
+import { NATIVE_KEYBOARD_CONTROLS } from '../components/with-designer-features';
 import { BlockRendererProps } from './block-renderer-registry';
 import ThemeBlock from '../theme-block';
 
@@ -38,6 +39,16 @@ const LinkBlock = ({
       return;
     }
 
+    /**
+     * A child that already handled this click owns it. The favourite heart
+     * cancels its own default and then stops the bubble only when it finds an
+     * ancestor anchor (`blocks/favorite-button-block.tsx`), so on a card whose
+     * root is not an anchor the heart's click arrived here as well and also
+     * fired the card's action — adding to favourites AND opening the modal.
+     * Reading `defaultPrevented` covers every such child, not just that one.
+     */
+    if (event.defaultPrevented) return;
+
     if (action.isActive) action.onClick?.(event);
   };
 
@@ -108,34 +119,106 @@ const LinkBlock = ({
     block.rowStyleKeys
   );
 
-  if (!block.blocks || block.blocks.length === 0) {
-    return (
+  /**
+   * A LINK BLOCK WHOSE JOB IS AN ACTION IS NOT A LINK.
+   *
+   * `useBlockAction` already cancels the element's default for every action it
+   * performs, so the href on such a block never navigates. The anchor was a
+   * control wearing a link's clothes: it announced itself as a link, put a
+   * destination in the status bar that no click would follow, and — because an
+   * anchor is a formatting element — made the HTML parser reparent any link a
+   * merchant nested inside it. That hands the browser a tree react-dom never
+   * rendered, and with no Suspense boundary over composed content React 18
+   * answers a hydration mismatch by client-rendering the whole document.
+   *
+   * IT IS A SPAN WITH role="button", NOT A NATIVE <button>. A native button
+   * looks like the obvious answer and is the wrong one: `<button>` inside
+   * `<button>` is repaired by the parser exactly as `<a>` inside `<a>` is, so
+   * an action card holding any button-emitting child — an add-to-cart, a
+   * favourite heart, a quick-view trigger — would trade one broken shape for
+   * another, and the element count stays the same, so a count-based check
+   * cannot even see it. A span is neither a formatting element nor a special
+   * one: it is never reparented and never reparents, whatever a merchant puts
+   * inside it. It also keeps the anchor's own box (`display: inline`) and
+   * inherits typography the same way, so nothing moves.
+   *
+   * `role="button"` plus a keyboard handler is the shape this package already
+   * uses for every other block that owns an action
+   * (`components/with-designer-features.tsx`).
+   *
+   * Navigation is untouched: a block with a destination and no action is still
+   * a real anchor. The choice reads the same properties on the server and on
+   * the first client render, so it cannot itself introduce a mismatch.
+   */
+  const ownsAction = action.isActive;
+
+  /**
+   * Enter and Space, the two keys a button answers. A key pressed on a real
+   * control inside the card belongs to that control — cancelling it would
+   * swallow the control's own activation and make a space impossible to type
+   * into a field. Its click still bubbles here, so the keyboard does what the
+   * mouse does.
+   */
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (!ownsAction || isDesigner) return;
+
+    if (
+      event.target !== event.currentTarget &&
+      event.target instanceof Element &&
+      event.target.matches(NATIVE_KEYBOARD_CONTROLS)
+    ) {
+      return;
+    }
+
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+
+    // Space would scroll the page underneath the modal it just opened.
+    event.preventDefault();
+    action.onClick?.(event as unknown as React.MouseEvent<HTMLElement>);
+  };
+
+  const rootProps = {
+    ...partAttrs('root'),
+    style: inlineStyles,
+    onClick: handleClick,
+    ...action.ariaProps
+  };
+
+  const renderRoot = (children: React.ReactNode) =>
+    ownsAction ? (
+      <span
+        role="button"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        /**
+         * The hook the cursor rule in `generateThemeCSS` hangs on, and what a
+         * brand stylesheet written against `a` can be widened to. An hrefless
+         * span gets no pointer cursor from the browser.
+         */
+        data-action-root=""
+        {...rootProps}
+      >
+        {children}
+      </span>
+    ) : (
       <NextLink
         href={isDesigner ? '#' : formattedHref}
         target={isDesigner ? undefined : target}
         rel={isDesigner ? undefined : rel}
-        {...partAttrs('root')}
-        style={inlineStyles}
-        onClick={handleClick}
-        {...action.ariaProps}
+        {...rootProps}
       >
-        <div style={{ padding: '20px', color: '#6b7280' }}>
-          Empty link block
-        </div>
+        {children}
       </NextLink>
     );
+
+  if (!block.blocks || block.blocks.length === 0) {
+    return renderRoot(
+      <div style={{ padding: '20px', color: '#6b7280' }}>Empty link block</div>
+    );
   }
 
-  return (
-    <NextLink
-      href={isDesigner ? '#' : formattedHref}
-      target={isDesigner ? undefined : target}
-      rel={isDesigner ? undefined : rel}
-      {...partAttrs('root')}
-      style={inlineStyles}
-      onClick={handleClick}
-      {...action.ariaProps}
-    >
+  return renderRoot(
+    <>
       {block.blocks
         .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
         .sort((a, b) => (a.order || 0) - (b.order || 0))
@@ -189,7 +272,7 @@ const LinkBlock = ({
             />
           );
         })}
-    </NextLink>
+    </>
   );
 };
 

package/src/components/with-designer-features.tsx

@@ -17,7 +17,7 @@ import {
 } from '../utils/property-switches';
 
 /** Elements that already act on Enter/Space themselves. */
-const NATIVE_KEYBOARD_CONTROLS =
+export const NATIVE_KEYBOARD_CONTROLS =
   'a[href], button, input, select, textarea, summary, [contenteditable]:not([contenteditable="false"])';
 
 interface WithDesignerFeaturesProps {

package/src/utils/index.ts

@@ -1792,6 +1792,61 @@ const collectBlockCSS = (
   return css;
 };
 
+/**
+ * The one thing a link block loses when its action makes it a span rather
+ * than an anchor: the pointer cursor the browser gives an href for free.
+ *
+ * Nothing else needs resetting — a span inherits typography and keeps the
+ * anchor's `display: inline`, which is exactly why the action root is a span
+ * and not a native `<button>` (see `blocks/link-block.tsx`). One attribute
+ * selector is (0,1,0), under the (0,2,0) every section and block rule below
+ * carries, so an authored `cursor` wins on specificity as well as on source
+ * order.
+ */
+export const ACTION_ROOT_RESET_CSS =
+  '[data-action-root]{cursor:pointer}\n';
+
+/**
+ * Mirrors `isInteractiveAction` in `hooks/use-block-action` — every action
+ * type except the two that navigate — without importing it: that module reads
+ * `getResponsiveValue` from this one, and the cycle would bite at module-init
+ * time. Derived from the rule rather than from a copied list, so a new action
+ * type is covered the day it is added.
+ *
+ * `link-block` is the only renderer that turns an action into a span root
+ * today; widen this the day another one does.
+ */
+const isButtonRenderingAction = (value: unknown): boolean =>
+  typeof value === 'string' &&
+  value !== '' &&
+  value !== 'none' &&
+  value !== 'link';
+
+/**
+ * Deliberately broader than the renderer's own test, which also requires a
+ * resolved target: a link block with an action and no target still renders as
+ * an anchor, so the reset goes unused. An unused 170-byte rule costs nothing;
+ * a missing one would let the browser's button chrome through.
+ */
+const blockUsesActionRoot = (block: Block): boolean => {
+  if (block.type === 'link') {
+    const authored = (block.properties as Record<string, unknown> | undefined)
+      ?.actionType;
+
+    const authoredPerBreakpoint =
+      authored && typeof authored === 'object'
+        ? Object.values(authored as Record<string, unknown>)
+        : [authored];
+
+    if (authoredPerBreakpoint.some(isButtonRenderingAction)) return true;
+  }
+
+  return (block.blocks ?? []).some(blockUsesActionRoot);
+};
+
+export const compositionUsesActionRoot = (sections: Section[]): boolean =>
+  sections.some((section) => (section.blocks ?? []).some(blockUsesActionRoot));
+
 export const generateThemeCSS = (
   sections: Section[],
   targetBreakpoint?: string,
@@ -1808,7 +1863,13 @@ export const generateThemeCSS = (
   // and they must lose a specificity tie to anything a section or block emits
   // for itself, which source order settles. Emitted only when the composition
   // actually carries a scoped break — see utils/line-breaks.ts.
-  let css = compositionUsesScopedLineBreaks(sections)
+  // Same contract as the line-break rules below: global, emitted ahead of
+  // every section selector so source order settles any specificity tie, and
+  // only when the composition actually contains a link block that renders as
+  // a button — see ACTION_ROOT_RESET_CSS.
+  let css = compositionUsesActionRoot(sections) ? ACTION_ROOT_RESET_CSS : '';
+
+  css += compositionUsesScopedLineBreaks(sections)
     ? buildLineBreakCss(hatchBreakpoint)
     : '';