@mparticle/web-sdk 3.22.0 → 3.24.0

package/src/buttonTracking/buttonDescription.ts

@@ -1,11 +1,11 @@
 import { isFunction } from '../utils';
 import {
     hasComposedAncestor,
-    isUnsafeLabelSource,
     isUnsafeTextSource,
     isWalletElement,
+    someComposedAncestor,
 } from './controls';
-import { maskLabel } from './labelMasking';
+import { maskLabel, MAX_RAW_LABEL_LENGTH } from './labelMasking';
 
 // Describes a clicked button for auto button tracking: its masked name, icon,
 // hand-written identifiers and kind. Never reads form field values.
@@ -20,7 +20,6 @@ export type ButtonLabelSource =
     | 'labelledby'
     | 'aria'
     | 'text'
-    | 'label'
     | 'alt'
     | 'title'
     | 'value'
@@ -55,21 +54,155 @@ function elementKind(control: Element): ButtonElementKind {
     return control.matches('a[href]:not([role="button"])') ? 'link' : 'role';
 }
 
-function textOf(element: Element | null): string {
-    return element && !isUnsafeTextSource(element) && element.textContent
-        ? element.textContent.trim()
+const NOT_RENDERED =
+    'script, style, template, [hidden], [aria-hidden="true"], [inert]';
+
+// The most nodes read for one label source, and images looked at for one
+// button. Each costs a style lookup in the click handler.
+const MAX_READS = 64;
+
+function assignedNodes(element: Element): Node[] {
+    const slot = element as HTMLSlotElement;
+    return isFunction(slot.assignedNodes) ? slot.assignedNodes() : [];
+}
+
+// Left out of what is drawn by its parent: a light child of an open shadow host
+// that no slot takes, or a slot's own child while nodes are assigned to the
+// slot. A closed shadow root can't be seen, so its host's children count.
+function isUnslotted(node: Element | Text): boolean {
+    const parent = node.parentElement;
+    if (!parent) {
+        return false;
+    }
+    return parent.shadowRoot
+        ? !node.assignedSlot
+        : assignedNodes(parent).length > 0;
+}
+
+// Hides the element and all it holds, whatever their own style says.
+// Screen-reader-only text is clipped rather than hidden, so it is not. An SVG
+// title is never drawn but names its icon, so it is not either.
+function hidesSubtree(element: Element): boolean {
+    if (element.matches(NOT_RENDERED) || isUnslotted(element)) {
+        return true;
+    }
+    return (
+        !(element instanceof SVGTitleElement) &&
+        window.getComputedStyle(element).display === 'none'
+    );
+}
+
+// Visibility is inherited and a child can set it back to visible, so only the
+// element's own counts.
+function isVisible(element: Element): boolean {
+    const visibility = window.getComputedStyle(element).visibility;
+    return visibility !== 'hidden' && visibility !== 'collapse';
+}
+
+function isShown(element: Element, until?: Element): boolean {
+    return !someComposedAncestor(element, hidesSubtree, until);
+}
+
+// A shadow host shows a light child only through a slot, and only while
+// nothing from that slot up to the host hides it.
+function isShownThroughSlot(node: Element | Text, host: Element): boolean {
+    const slot = node.assignedSlot;
+    return !!slot && isShown(slot, host);
+}
+
+// Whitespace hides nothing, so a node holding only whitespace is taken as it
+// is, without a style lookup: an icon's paths cost nothing. A slot's text can
+// sit in the nodes assigned to it, so a slot is never blank.
+function isBlank(node: Element | Text): boolean {
+    return (
+        !/\S/.test(node.textContent || '') &&
+        !(
+            node instanceof Element &&
+            (node.matches('slot') || !!node.querySelector('slot'))
+        )
+    );
+}
+
+// The text a sighted user or a screen reader gets from an element, whitespace
+// collapsed. Undefined when that runs past what maskLabel keeps, takes more
+// than MAX_READS nodes to read, or takes in a form field through a slot, so a
+// label is never cut short at a node boundary.
+function renderedText(root: Element): string | undefined {
+    let text = '';
+    let reads = 0;
+    const append = (value: string) => {
+        text = (text + value).replace(/\s+/g, ' ');
+    };
+    const read = (element: Element): boolean => {
+        if (hidesSubtree(element)) {
+            return true;
+        }
+        const assigned = assignedNodes(element);
+        const nodes = assigned.length ? assigned : element.childNodes;
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i] as Element | Text;
+            const isText = node.nodeType === Node.TEXT_NODE;
+            if (!isText && !(node instanceof Element)) {
+                continue;
+            }
+            if (isBlank(node)) {
+                append(node.textContent);
+                continue;
+            }
+            if (++reads > MAX_READS) {
+                return false;
+            }
+            if (element.shadowRoot && !isShownThroughSlot(node, element)) {
+                continue;
+            }
+            if (isText) {
+                if (isVisible(node.assignedSlot || element)) {
+                    append(node.nodeValue);
+                }
+            } else if (
+                // Assigned nodes sit outside the label source, where its own
+                // form field check never looked.
+                (assigned.length && isUnsafeTextSource(node as Element)) ||
+                !read(node as Element)
+            ) {
+                return false;
+            }
+            if (text.trim().length > MAX_RAW_LABEL_LENGTH) {
+                return false;
+            }
+        }
+        return true;
+    };
+    return read(root) ? text.trim() : undefined;
+}
+
+// '' when the element can't name the button, undefined when its text can't be
+// read in full.
+function textOf(element: Element | null): string | undefined {
+    return element && !isUnsafeTextSource(element) && isShown(element)
+        ? renderedText(element)
         : '';
 }
 
+// The control itself is already known to be shown.
+function shownImageAlt(control: Element): string | undefined {
+    const images = control.querySelectorAll('img[alt]');
+    for (let i = 0; i < images.length && i < MAX_READS; i++) {
+        if (isShown(images[i], control) && isVisible(images[i])) {
+            return nonBlank(images[i].getAttribute('alt'));
+        }
+    }
+    return undefined;
+}
+
 function nonBlank(value: string | null): string | undefined {
     return value && value.trim() ? value : undefined;
 }
 
 // The button's name as a screen reader would read it, simplified: the first of
-// aria-labelledby, aria-label, own text (or an inner image's alt), title, for
-// inputs their value, and for checkboxes and radios their label's text. The text
-// sources are skipped for controls that hold form fields or more than four
-// children, so a typed value is never read.
+// aria-labelledby, aria-label, own text (or an inner image's alt), title, and
+// for inputs their value. The text sources are skipped for controls that hold
+// form fields or more than four children, so a typed value is never read.
 function accessibleName(
     control: Element
 ): { raw?: string; source: ButtonLabelSource } {
@@ -78,13 +211,15 @@ function accessibleName(
         const root = (isFunction(control.getRootNode)
             ? control.getRootNode()
             : document) as Document | ShadowRoot;
-        const text = labelledBy
+        const parts = labelledBy
             .split(/\s+/)
             .map(id =>
                 textOf(root.getElementById ? root.getElementById(id) : null)
-            )
-            .filter(part => !!part)
-            .join(' ');
+            );
+        if (parts.indexOf(undefined) !== -1) {
+            return { source: 'none' };
+        }
+        const text = parts.filter(part => !!part).join(' ');
         if (text) {
             return { raw: text, source: 'labelledby' };
         }
@@ -112,24 +247,16 @@ function accessibleName(
                 // What the browser shows on an input without a value.
                 return { raw: type, source: 'value' };
             }
-        } else if (type === 'checkbox' || type === 'radio') {
-            // The label the browser ties to the box, never the box's value.
-            const label = control.labels ? control.labels[0] : undefined;
-            const text =
-                label && !isUnsafeLabelSource(label) && label.textContent
-                    ? label.textContent.trim()
-                    : '';
-            if (text) {
-                return { raw: text, source: 'label' };
-            }
         }
-    } else if (readable) {
-        const text = textOf(control);
+    } else if (readable && isShown(control)) {
+        const text = renderedText(control);
+        if (text === undefined) {
+            return { source: 'none' };
+        }
         if (text) {
             return { raw: text, source: 'text' };
         }
-        const image = control.querySelector('img[alt]');
-        const alt = image ? nonBlank(image.getAttribute('alt')) : undefined;
+        const alt = shownImageAlt(control);
         if (alt) {
             return { raw: alt, source: 'alt' };
         }
@@ -248,9 +375,12 @@ function formIdentifier(control: Element): string | undefined {
 }
 
 // The browser's normalised type: a button defaults to 'submit' and an unknown
-// input type reads as 'text'. Wallet and role buttons are just 'button'.
-function controlType(control: Element, element: ButtonElementKind): string {
-    return element === 'button' || element === 'input'
+// input type reads as 'text'. A native button or input reports its own type, a
+// wallet-named one included; any other control, such as a role button or a
+// vendor's wallet element, reads as 'button'.
+function controlType(control: Element): string {
+    const tag = control.tagName.toLowerCase();
+    return tag === 'button' || tag === 'input'
         ? (control as HTMLButtonElement | HTMLInputElement).type
         : 'button';
 }
@@ -300,10 +430,44 @@ function describeLink(link: Element): ILinkDetails | undefined {
         : undefined;
 }
 
+// Checkboxes and radios, and the roles that act as them. A role can list
+// fallbacks, so any of its tokens counts.
+const CHOICE =
+    'input[type="checkbox"], input[type="radio"], [role~="checkbox"], [role~="radio"], ' +
+    '[role~="switch"], [role~="menuitemcheckbox"], [role~="menuitemradio"]';
+const RADIO_ROLE = '[role~="radio"], [role~="menuitemradio"]';
+
+function boxOf(element: Element): Element | null {
+    const box = element instanceof HTMLLabelElement ? element.control : element;
+    return box && box.matches(CHOICE) ? box : null;
+}
+
+// The box a click on this control picks. One the click passed through below
+// the control comes first: querySelector can't reach a slotted box, a box in a
+// shadow root or the box of a label inside the control, and a row can hold
+// more than one box. Else the control itself, the box it labels, or the first
+// one it wraps, as on an option row whose name repeats the option's text.
+function choiceOf(
+    control: Element,
+    path: Array<EventTarget | null>
+): Element | null {
+    for (const target of path) {
+        if (target === control) {
+            break;
+        }
+        const box = target instanceof Element ? boxOf(target) : null;
+        if (box) {
+            return box;
+        }
+    }
+    return boxOf(control) || control.querySelector(CHOICE);
+}
+
 // Describes a clicked control for auto button tracking. A link counts only when page
 // views can't see the click, and carries its link type.
 export function describeButtonClick(
-    control: Element
+    control: Element,
+    path: Array<EventTarget | null> = []
 ): IButtonClick | undefined {
     let link: ILinkDetails | undefined;
     if (control.matches('a[href]:not([role="button"])')) {
@@ -313,31 +477,57 @@ export function describeButtonClick(
         }
     }
     const element = elementKind(control);
-    const name = accessibleName(control);
-    const label = maskLabel(name.raw);
+    const box =
+        control instanceof HTMLInputElement &&
+        (control.type === 'checkbox' || control.type === 'radio')
+            ? control
+            : undefined;
+    // A box's text sent with its state is the shopper's answer, and the text
+    // can be a name, an address or a sensitive choice, so a box goes by its
+    // hand-written identifiers alone. So does a control acting as one or
+    // wrapping one, and a label, whose click the browser passes on to its box
+    // as a second event.
+    const choice = box || choiceOf(control, path);
+    // A checkbox's identifiers name its question, which its state answers. A
+    // radio's id, test id and the panel it opens name the option picked, so
+    // only the name of its input, the question, goes with it. A wrapper's own
+    // name, or a role radio's, can name the option instead.
+    const radio =
+        choice instanceof HTMLInputElement
+            ? choice.type === 'radio'
+            : !!choice && choice.matches(RADIO_ROLE);
+    const named = !radio
+        ? control
+        : choice instanceof HTMLInputElement
+        ? choice
+        : null;
+    const name = choice ? undefined : accessibleName(control);
+    const label = name ? maskLabel(name.raw) : undefined;
     return {
         label,
         labelSource: label ? name.source : 'none',
         // Kept on its own as well: it often says more than the visible text,
         // such as which item a remove button removes.
-        ariaLabel: maskLabel(control.getAttribute('aria-label')),
-        icon: iconHint(control),
-        elementId: stableIdentifier(control.getAttribute('id')),
-        elementName: stableIdentifier(control.getAttribute('name')),
-        testId: firstIdentifier(control, TEST_ID_ATTRIBUTES),
-        controls: controlsIdentifier(control),
+        ariaLabel: choice
+            ? undefined
+            : maskLabel(control.getAttribute('aria-label')),
+        icon: choice ? undefined : iconHint(control),
+        elementId: radio
+            ? undefined
+            : stableIdentifier(control.getAttribute('id')),
+        elementName: stableIdentifier(named && named.getAttribute('name')),
+        testId: radio
+            ? undefined
+            : firstIdentifier(control, TEST_ID_ATTRIBUTES),
+        controls: radio ? undefined : controlsIdentifier(control),
         form: formIdentifier(control),
         element,
-        type: controlType(control, element),
+        type: controlType(control),
         linkType: link ? link.type : undefined,
         linkDomain: link ? link.domain : undefined,
         fileExtension: link ? link.fileExtension : undefined,
         // The box as the click left it: the browser toggles it before the click
         // reaches listeners, and puts it back if the click is cancelled.
-        checked:
-            control instanceof HTMLInputElement &&
-            (control.type === 'checkbox' || control.type === 'radio')
-                ? control.checked
-                : undefined,
+        checked: box ? box.checked : undefined,
     };
 }

package/src/buttonTracking/buttonTracker.ts

@@ -8,7 +8,7 @@ import {
     classifyIntent,
     classifyIntentFrame,
 } from './checkoutIntent';
-import { findControl } from './controls';
+import { findControl, isExcludedPath } from './controls';
 
 // State lives on `window`, like APV, so a re-executed bundle never doubles the
 // listeners. Inspect `window.__mpBtn__` in a console to see if one is live.
@@ -16,6 +16,8 @@ export const WIN_BTN_KEY = '__mpBtn__';
 
 const THROTTLE_MS = 2000;
 const SUBMIT_AFTER_COMMIT_CLICK_MS = 1000;
+// Apple Pay must begin inside the tap's own handler, so the tap is this recent.
+const APPLE_PAY_AFTER_CLICK_MS = 1000;
 const PATH_LIMIT = 12;
 // A ceiling, not a dedupe: a held Enter key or browser automation fires a
 // trusted click per repeat, and each one is forwarded to every kit.
@@ -74,6 +76,61 @@ const afterNextPaint = (fn: () => void): void => {
     }
 };
 
+// Apple Pay's session opens only from a shopper's tap, whatever button the page
+// draws for it, so its opening is a wallet tap no label or name rule can miss.
+// The wrapper keeps the page's own begin under this key, to put it back.
+const APPLE_PAY_HOOK = '__mpApplePayHook__';
+
+const applePayPrototype = (win: Window) => {
+    const session = win['ApplePaySession'];
+    return session && session.prototype;
+};
+
+// Wraps ApplePaySession.prototype.begin once per window, so the active tracker
+// hears that a session began. The wrapper reads no arguments and no payment
+// data, and returns or throws exactly what the original does. Nothing here can
+// throw into SDK init: a throwing getter or a frozen prototype leaves Apple Pay
+// as it was.
+const hookApplePay = (win: Window): void => {
+    try {
+        const prototype = applePayPrototype(win);
+        const begin = prototype && prototype.begin;
+        if (!isFunction(begin) || begin[APPLE_PAY_HOOK]) {
+            return;
+        }
+        const opened = function(this: unknown, ...args: unknown[]) {
+            const result = begin.apply(this, args);
+            try {
+                const tracker = getActiveButtonTracker();
+                if (tracker) {
+                    tracker.onApplePayBegin();
+                }
+            } catch (e) {
+                // A session the page began is never disturbed by tracking.
+            }
+            return result;
+        };
+        // Not enumerable, so the marker doesn't show among the method's own keys.
+        Object.defineProperty(opened, APPLE_PAY_HOOK, { value: begin });
+        prototype.begin = opened;
+    } catch (e) {
+        // Apple Pay stays as the page set it up.
+    }
+};
+
+// Puts the page's own begin back, unless another script has wrapped it since.
+const unhookApplePay = (win: Window): void => {
+    try {
+        const prototype = applePayPrototype(win);
+        const begin = prototype && prototype.begin;
+        if (isFunction(begin) && isFunction(begin[APPLE_PAY_HOOK])) {
+            prototype.begin = begin[APPLE_PAY_HOOK];
+        }
+    } catch (e) {
+        // Apple Pay stays as it is.
+    }
+};
+
 const CAPTURE_PASSIVE: AddEventListenerOptions = {
     capture: true,
     passive: true,
@@ -89,6 +146,14 @@ export class ButtonTracker {
     // Bumped on reset so classification queued before it is dropped.
     private generation = 0;
     private lastCommitClick = -Infinity;
+    // The latest trusted click: whether the page excluded it, and the intent it
+    // already carries to the kit, with its source, if any.
+    private lastClick: {
+        t: number;
+        excluded: boolean;
+        kind: CheckoutIntentKind | undefined;
+        source: CheckoutIntentSource | undefined;
+    } | null = null;
     private lastSent: { [kind: string]: { t: number; pathname: string } } = {};
     private pagePath: string | null = null;
     private pageEvents = 0;
@@ -144,9 +209,54 @@ export class ButtonTracker {
             win[WIN_BTN_KEY] = {};
         }
         win[WIN_BTN_KEY].tracker = this;
+        // Only where checkout intent can reach the kit; a shopper who opts back in mid-page gets no session
+        // signal until the next page load.
+        if (!this.isKitSuppressed()) {
+            hookApplePay(win);
+        }
         this.log('listening');
     }
 
+    // An Apple Pay session begun right after a tracked tap counts as a wallet
+    // tap for the kit; one begun with no such tap, or from a tap the page
+    // excluded, does not. A tap that reads as a confirm tap reaches the kit as
+    // one. It is delivered on a timer, not after the next paint, since the
+    // payment sheet may hold painting back: a tap that already reads as a
+    // wallet goes now under its own rule, and the throttle drops the copy
+    // queued for the paint.
+    public onApplePayBegin(): void {
+        const t = Date.now();
+        const click = this.lastClick;
+        if (
+            !this.active ||
+            !click ||
+            click.excluded ||
+            click.kind === 'commit' ||
+            t - click.t > APPLE_PAY_AFTER_CLICK_MS ||
+            this.isKitSuppressed()
+        ) {
+            return;
+        }
+        const pathname = window.location.pathname;
+        const generation = this.generation;
+        setTimeout(() => {
+            if (generation !== this.generation) {
+                return;
+            }
+            try {
+                this.emit(
+                    'wallet',
+                    click.kind === 'wallet' ? click.source : 'api',
+                    'apple_pay',
+                    t,
+                    pathname
+                );
+            } catch (e) {
+                this.log('[error] Apple Pay delivery threw: ' + e);
+            }
+        }, 0);
+    }
+
     public teardown(): void {
         const win = btnWindow();
         if (win) {
@@ -165,6 +275,7 @@ export class ButtonTracker {
             const state = win[WIN_BTN_KEY];
             if (state && state.tracker === this) {
                 state.tracker = undefined;
+                unhookApplePay(win);
             }
         }
         this.active = false;
@@ -186,6 +297,7 @@ export class ButtonTracker {
         this.generation++;
         this.pending = [];
         this.lastCommitClick = -Infinity;
+        this.lastClick = null;
         this.lastSent = {};
         this.pagePath = null;
         this.pageEvents = 0;
@@ -266,13 +378,15 @@ export class ButtonTracker {
         let unconfirmedCommit = false;
         if (layer === 'click') {
             // The composed path is only populated during dispatch.
-            const control = findControl(
-                isFunction(event.composedPath)
-                    ? event.composedPath().slice(0, PATH_LIMIT)
-                    : []
-            );
+            const path = isFunction(event.composedPath)
+                ? event.composedPath().slice(0, PATH_LIMIT)
+                : [];
+            const excluded = isExcludedPath(path);
+            const control = excluded ? undefined : findControl(path, true);
             if (control) {
-                click = logsEvents ? describeButtonClick(control) : undefined;
+                click = logsEvents
+                    ? describeButtonClick(control, path)
+                    : undefined;
                 if (click && click.checked !== undefined) {
                     box = control as HTMLInputElement;
                 }
@@ -283,6 +397,7 @@ export class ButtonTracker {
                 kind = intent ? intent.kind : undefined;
                 source = intent ? intent.source : undefined;
             }
+            this.lastClick = { t, excluded, kind, source };
         } else if (layer === 'submit') {
             const submitter = (event as Event & { submitter?: Element | null })
                 .submitter;

package/src/buttonTracking/checkoutIntent.ts

@@ -4,6 +4,7 @@ import {
     isQuietIntentControl,
     isRoktElement,
     isUnsafeTextSource,
+    isWalletNamedControl,
     vendorButtonKind,
 } from './controls';
 
@@ -13,7 +14,8 @@ export type CheckoutIntentKind =
     | 'commit'
     | 'wallet'
     | 'checkout_step'
-    | 'frame';
+    | 'frame'
+    | 'cart';
 
 const checkoutPath = /(?:^|\/)(?:checkouts?|payment|order|kasse|paiement|commander?|pago)(?:\/|$)/i;
 // English look-alikes are whole words; the other languages stay substring
@@ -79,6 +81,14 @@ const steps = new RegExp(
         ].join('|') +
         ')$'
 );
+const CART_NOUN = '(?:(?:my|your|the) )?(?:shopping )?(?:cart|bag|basket)';
+// "Add to bag", "View cart", "Shopping bag", "Bag", and a count badge such as
+// "1 item in bag", which reads "item in bag" once digits are stripped.
+const cartLabels = new RegExp(
+    '^(?:add(?: [^ ]+){0,5} to ' + CART_NOUN +
+        '|(?:(?:view|open|go to) )?' + CART_NOUN + '(?: items?)?' +
+        '|items? in ' + CART_NOUN + ')$'
+);
 const WALLET_NAMES =
     'apple pay|google pay|paypal|venmo|amazon pay|shop pay|klarna|afterpay|clearpay|cash app(?: pay)?|affirm|sezzle|samsung pay';
 const WALLET_VERBS =
@@ -200,10 +210,25 @@ function labels(element: Element): string[] {
         .filter((label): label is string => !!label);
 }
 
+// A cart button is often a bare icon, so its title names it when nothing else
+// does. Only the cart rule reads the title.
+function isCartControl(control: Element, cores: string[]): boolean {
+    const title = cores.length ? undefined : normalize(control.getAttribute('title'));
+    return (title ? [coreLabel(title)] : cores).some(text => cartLabels.test(text));
+}
+
 // Which rule recognised the intent: a vendor's own markup, a phrase in the
-// label, a wallet's bare name, a hosted frame, or a form submitted after a
-// confirm click.
-export type CheckoutIntentSource = 'vendor' | 'label' | 'brand' | 'frame' | 'submit';
+// label, a wallet's bare name, a hosted frame, a form submitted after a confirm
+// click, a merchant button named after its wallet, or a payment sheet the page
+// opened.
+export type CheckoutIntentSource =
+    | 'vendor'
+    | 'label'
+    | 'brand'
+    | 'frame'
+    | 'submit'
+    | 'name'
+    | 'api';
 
 export interface ICheckoutIntent {
     kind: Exclude<CheckoutIntentKind, 'frame'>;
@@ -226,20 +251,34 @@ function isCommitLabel(text: string, isLink: boolean, pathname: string): boolean
 // Classifies a clicked or submitting control found by findControl, in order:
 // pickers, toggles and pay-later messages never count; a vendor's own wallet
 // button counts before any label rule; a confirm label on any source counts
-// before the look-alike exclusions veto; then wallet phrases and steps.
+// before the look-alike exclusions veto; then a wallet-named control, wallet
+// phrases and steps. A cart label, links included, counts only where none of
+// those do.
 export function classifyIntent(
     control: Element,
     pathname: string
 ): ICheckoutIntent | undefined {
     const vendor = vendorButtonKind(control);
-    if (isQuietIntentControl(control, vendor === 'wallet') || vendor === 'none') {
+    if (vendor === 'none') {
         return undefined;
     }
     if (vendor) {
-        return { kind: vendor, source: 'vendor' };
+        return isQuietIntentControl(control, vendor === 'wallet')
+            ? undefined
+            : { kind: vendor, source: 'vendor' };
     }
     const texts = labels(control);
     const cores = texts.map(coreLabel);
+    const cart: ICheckoutIntent | undefined = isCartControl(control, cores)
+        ? { kind: 'cart', source: 'label' }
+        : undefined;
+    if (isQuietIntentControl(control, false, !!cart)) {
+        return undefined;
+    }
+    // A bag button that opens a flyout counts only as a cart click.
+    if (cart && control.hasAttribute('aria-expanded')) {
+        return cart;
+    }
     const isLink = control.matches('a[href]:not([role="button"])');
     if (cores.some(text => isCommitLabel(text, isLink, pathname))) {
         return { kind: 'commit', source: 'label' };
@@ -249,7 +288,10 @@ export function classifyIntent(
             .concat(cores)
             .some(text => englishExclusions.test(text) || otherExclusions.test(text))
     ) {
-        return undefined;
+        return cart;
+    }
+    if (isWalletNamedControl(control)) {
+        return { kind: 'wallet', source: 'name' };
     }
     const isButton = !isLink && control.matches(CONTROL_SELECTOR);
     for (const text of cores) {
@@ -263,7 +305,7 @@ export function classifyIntent(
             return { kind: 'checkout_step', source: 'label' };
         }
     }
-    return undefined;
+    return cart;
 }
 
 export function classifyIntentControl(