[Call node] Add support for href with action

packages/javascript/src/index.ts

@@ -58,6 +58,7 @@ export {
 } from './models/embedded-flow';
 export type {
   EmbeddedFlowComponent,
+  EmbeddedFlowComponentAction,
   EmbeddedFlowResponseData,
   EmbeddedFlowExecuteRequestConfig,
   FlowExecutionError,

packages/javascript/src/models/__tests__/embedded-flow.test.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {describe, expect, it} from 'vitest';
+import {
+  EmbeddedFlowComponent,
+  EmbeddedFlowComponentAction,
+  EmbeddedFlowComponentType,
+  EmbeddedFlowEventType,
+} from '../embedded-flow';
+
+describe('EmbeddedFlowComponentAction', () => {
+  it('accepts a ref-only action (defaults to SUBMIT semantics at the renderer)', () => {
+    const action: EmbeddedFlowComponentAction = {ref: 'action_signup'};
+    expect(action.ref).toBe('action_signup');
+    expect(action.eventType).toBeUndefined();
+  });
+
+  it('accepts an explicit TRIGGER eventType', () => {
+    const action: EmbeddedFlowComponentAction = {
+      eventType: EmbeddedFlowEventType.Trigger,
+      ref: 'action_signup',
+    };
+    expect(action.eventType).toBe('TRIGGER');
+  });
+
+  it('accepts a string eventType for forward-compatibility', () => {
+    const action: EmbeddedFlowComponentAction = {
+      eventType: 'CUSTOM_EVENT',
+      ref: 'action_signup',
+    };
+    expect(action.eventType).toBe('CUSTOM_EVENT');
+  });
+});
+
+describe('EmbeddedFlowComponent.action', () => {
+  it('is optional — a plain rich-text component has no action', () => {
+    const component: EmbeddedFlowComponent = {
+      id: 'text_1',
+      label: '<p>Hello</p>',
+      type: EmbeddedFlowComponentType.RichText,
+    };
+    expect(component.action).toBeUndefined();
+  });
+
+  it('can carry an action wiring on a RICH_TEXT component', () => {
+    const component: EmbeddedFlowComponent = {
+      action: {eventType: EmbeddedFlowEventType.Submit, ref: 'action_signup'},
+      id: 'text_1',
+      label: '<p>Have an account? <a data-action-ref="action_signup">Sign in</a></p>',
+      type: EmbeddedFlowComponentType.RichText,
+    };
+    expect(component.action?.ref).toBe('action_signup');
+    expect(component.action?.eventType).toBe('SUBMIT');
+  });
+});

packages/javascript/src/models/embedded-flow.ts

@@ -244,6 +244,23 @@ export enum EmbeddedFlowEventType {
   Trigger = 'TRIGGER',
 }
 
+/**
+ * Optional action wiring for otherwise-passive components such as RICH_TEXT. When
+ * set on a RICH_TEXT component, sentinel-marked anchors (`<a data-action-ref="...">`)
+ * inside the sanitized HTML dispatch a flow action instead of navigating.
+ *
+ * @experimental This interface may change in future versions
+ */
+export interface EmbeddedFlowComponentAction {
+  /** Reference of the flow action to dispatch when the sentinel anchor is clicked. */
+  ref: string;
+  /**
+   * Event type controlling submission semantics. `TRIGGER` bypasses client-side
+   * validation; `SUBMIT` runs validation. Defaults to `SUBMIT` when omitted.
+   */
+  eventType?: EmbeddedFlowEventType | string;
+}
+
 /**
  * Enhanced component interface for embedded flow components.
  *
@@ -268,6 +285,14 @@ export enum EmbeddedFlowEventType {
  * @experimental This interface may change in future versions
  */
 export interface EmbeddedFlowComponent {
+  /**
+   * Optional flow-action wiring for otherwise-passive components. On RICH_TEXT
+   * components, sentinel-marked anchors (`<a data-action-ref="...">`) inside the
+   * sanitized HTML dispatch this action. When absent, the component remains pure
+   * display.
+   */
+  action?: EmbeddedFlowComponentAction;
+
   /**
    * Alignment of children along the cross axis (for Stack components).
    */

packages/react/src/components/presentation/auth/AuthOptionFactory.tsx

@@ -21,6 +21,7 @@ import {
   FieldType,
   FlowMetadataResponse,
   EmbeddedFlowComponent,
+  EmbeddedFlowComponentAction,
   EmbeddedFlowComponentType,
   EmbeddedFlowTextVariant,
   EmbeddedFlowEventType,
@@ -523,10 +524,69 @@ const createAuthComponentFromFlow = (
     }
 
     case EmbeddedFlowComponentType.RichText: {
+      const richTextAction: EmbeddedFlowComponentAction | undefined = component.action;
+
+      const dispatchRichTextAction = (): void => {
+        if (!richTextAction || !options.onSubmit) {
+          return;
+        }
+        const eventTypeValue = String(richTextAction.eventType ?? EmbeddedFlowEventType.Submit);
+        const shouldSkipValidation: boolean = eventTypeValue.toUpperCase() === String(EmbeddedFlowEventType.Trigger);
+        const syntheticAction: EmbeddedFlowComponent = {
+          eventType: eventTypeValue,
+          id: `${component.id}_action`,
+          ref: richTextAction.ref,
+          type: EmbeddedFlowComponentType.Action,
+        };
+        const formData: Record<string, string> = {};
+        Object.keys(formValues).forEach((field: string) => {
+          formData[field] = formValues[field];
+        });
+        options.onSubmit(syntheticAction, formData, shouldSkipValidation);
+      };
+
+      // Sentinel-anchor contract: only anchors carrying `data-action-ref` equal to
+      // richTextAction.ref dispatch the action. Anchors without the sentinel (or with
+      // a non-matching one) are treated as ordinary links and are ignored here.
+      const isMatchingSentinelAnchor = (anchor: HTMLAnchorElement): boolean =>
+        anchor.getAttribute('data-action-ref') === richTextAction?.ref;
+
+      const handleRichTextClick: React.MouseEventHandler<HTMLDivElement> | undefined = richTextAction
+        ? (event: React.MouseEvent<HTMLDivElement>): void => {
+            const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');
+            if (!anchor || !isMatchingSentinelAnchor(anchor)) {
+              return;
+            }
+            event.preventDefault();
+            dispatchRichTextAction();
+          }
+        : undefined;
+
+      const handleRichTextKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined = richTextAction
+        ? (event: React.KeyboardEvent<HTMLDivElement>): void => {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+              return;
+            }
+            const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');
+            if (!anchor || !isMatchingSentinelAnchor(anchor)) {
+              return;
+            }
+            event.preventDefault();
+            dispatchRichTextAction();
+          }
+        : undefined;
+
       return (
+        // Sentinel anchors are made keyboard-operable via the container's onKeyDown
+        // (Enter/Space activate the matching anchor). Authors should ensure the anchor
+        // is focusable (`href` or `tabIndex`); the click+keydown delegation covers both
+        // pointer and keyboard activation once focus lands on the anchor.
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div
           key={key}
           className={richTextClass}
+          onClick={handleRichTextClick}
+          onKeyDown={handleRichTextKeyDown}
           // Manually sanitizes with `DOMPurify`.
           // IMPORTANT: DO NOT REMOVE OR MODIFY THIS SANITIZATION STEP.
           dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(resolveEmojiUrisInHtml(resolve(component.label)))}}

packages/react/src/components/presentation/auth/__tests__/AuthOptionFactory.test.tsx

@@ -0,0 +1,174 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@testing-library/react';
+import {EmbeddedFlowComponent, EmbeddedFlowComponentType, EmbeddedFlowEventType} from '@thunderid/browser';
+import {describe, expect, it, vi} from 'vitest';
+import {renderSignInComponents} from '../AuthOptionFactory';
+
+const richTextWithLink = (label: string, action?: {ref: string; eventType?: string}): EmbeddedFlowComponent => ({
+  action,
+  id: 'text_1',
+  label,
+  type: EmbeddedFlowComponentType.RichText,
+});
+
+const renderInto = (
+  component: EmbeddedFlowComponent,
+  onSubmit?: (submitted: EmbeddedFlowComponent, data?: Record<string, string>, skipValidation?: boolean) => void,
+): {container: HTMLElement} => {
+  const elements = renderSignInComponents(
+    [component],
+    {empty: '', username: 'alice'},
+    {},
+    {},
+    false,
+    true,
+    () => undefined,
+    {onSubmit},
+  );
+  return render(<div>{elements}</div>);
+};
+
+describe('AuthOptionFactory rich-text action', () => {
+  it('renders a plain rich-text component without any click handler', () => {
+    const onSubmit = vi.fn();
+    const {container} = renderInto(
+      richTextWithLink('<p>Have an account? <a href="/signin" data-action-ref="action_signin">Sign in</a></p>'),
+      onSubmit,
+    );
+
+    const anchor = container.querySelector<HTMLAnchorElement>('a[data-action-ref="action_signin"]')!;
+    expect(anchor).not.toBeNull();
+    anchor.click();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('dispatches a synthetic action with SUBMIT semantics when the sentinel anchor is clicked', () => {
+    const onSubmit = vi.fn();
+    const {container} = renderInto(
+      richTextWithLink('<p>Have an account? <a href="/signin" data-action-ref="action_signin">Sign in</a></p>', {
+        eventType: EmbeddedFlowEventType.Submit,
+        ref: 'action_signin',
+      }),
+      onSubmit,
+    );
+
+    container.querySelector<HTMLAnchorElement>('a[data-action-ref="action_signin"]')!.click();
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    const call = onSubmit.mock.calls[0] as [EmbeddedFlowComponent, Record<string, string>, boolean];
+    expect(call[0].type).toBe(EmbeddedFlowComponentType.Action);
+    expect(call[0].ref).toBe('action_signin');
+    expect(call[0].eventType).toBe('SUBMIT');
+    expect(call[1]).toEqual({empty: '', username: 'alice'});
+    expect(call[2]).toBe(false);
+  });
+
+  it('bypasses validation when the wired eventType is TRIGGER', () => {
+    const onSubmit = vi.fn();
+    const {container} = renderInto(
+      richTextWithLink('<p><a data-action-ref="action_signup">Sign up</a></p>', {
+        eventType: EmbeddedFlowEventType.Trigger,
+        ref: 'action_signup',
+      }),
+      onSubmit,
+    );
+
+    container.querySelector<HTMLAnchorElement>('a[data-action-ref="action_signup"]')!.click();
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    const call = onSubmit.mock.calls[0] as [EmbeddedFlowComponent, Record<string, string>, boolean];
+    expect(call[2]).toBe(true);
+  });
+
+  it('defaults to SUBMIT semantics when the eventType is omitted', () => {
+    const onSubmit = vi.fn();
+    const {container} = renderInto(
+      richTextWithLink('<p><a data-action-ref="action_signup">Sign up</a></p>', {ref: 'action_signup'}),
+      onSubmit,
+    );
+
+    container.querySelector<HTMLAnchorElement>('a[data-action-ref="action_signup"]')!.click();
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    const call = onSubmit.mock.calls[0] as [EmbeddedFlowComponent, Record<string, string>, boolean];
+    expect(call[0].eventType).toBe('SUBMIT');
+    expect(call[2]).toBe(false);
+  });
+
+  it('walks up from a descendant to the nearest anchor before dispatching', () => {
+    const onSubmit = vi.fn();
+    const {container} = renderInto(
+      richTextWithLink('<p><a data-action-ref="action_signup"><span class="child">Sign up</span></a></p>', {
+        ref: 'action_signup',
+      }),
+      onSubmit,
+    );
+
+    container.querySelector<HTMLSpanElement>('span.child')!.click();
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    const call = onSubmit.mock.calls[0] as [EmbeddedFlowComponent, Record<string, string>, boolean];
+    expect(call[0].ref).toBe('action_signup');
+  });
+
+  it('ignores clicks on anchors whose data-action-ref does not match the wired ref', () => {
+    const onSubmit = vi.fn();
+    const {container} = renderInto(
+      richTextWithLink('<p><a data-action-ref="action_other">Other</a></p>', {ref: 'action_signup'}),
+      onSubmit,
+    );
+
+    container.querySelector<HTMLAnchorElement>('a[data-action-ref="action_other"]')!.click();
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('ignores clicks on anchors that lack the data-action-ref sentinel', () => {
+    const onSubmit = vi.fn();
+    const {container} = renderInto(
+      richTextWithLink('<p>Have an account? <a href="/plain" target="_blank">Sign up</a></p>', {ref: 'action_signup'}),
+      onSubmit,
+    );
+
+    container.querySelector<HTMLAnchorElement>('a')!.click();
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('ignores clicks outside any anchor in an action-bearing rich text', () => {
+    const onSubmit = vi.fn();
+    const {container} = renderInto(
+      richTextWithLink('<p><span class="outside">Not a link</span></p>', {ref: 'action_signup'}),
+      onSubmit,
+    );
+
+    container.querySelector<HTMLSpanElement>('span.outside')!.click();
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('does not throw when onSubmit is omitted from options', () => {
+    const {container} = renderInto(
+      richTextWithLink('<p><a data-action-ref="action_signup">Sign up</a></p>', {ref: 'action_signup'}),
+    );
+
+    expect(() => container.querySelector<HTMLAnchorElement>('a')!.click()).not.toThrow();
+  });
+});