@incodetech/prizma-core-screens 0.2.20 → 0.2.22

package/dist/IdCaptureStageScreen.js

@@ -11,6 +11,20 @@ import { PrizmaScreenShell } from './ScreenShell';
 import './ScreenLayout.css';
 import './ViewfinderScreen.css';
 import './IdCaptureLayout.css';
+/**
+ * The manual-mode instruction, in the shape the strings table gives it: a list
+ * of steps becomes a real `<ol>` on the Tooltip's content slot (screen readers
+ * announce "list, 2 items"); a plain string goes through `tooltipText` and
+ * keeps its own line breaks. Nothing set, no bubble.
+ */
+const manualTooltipProps = (copy) => {
+    if (Array.isArray(copy)) {
+        return {
+            tooltip: (_jsx("ol", { children: copy.map((step, index) => (_jsx("li", { children: step }, index))) })),
+        };
+    }
+    return { tooltipText: copy };
+};
 /**
  * Purple stage state → Core `PrizmaIdCapture` state. The mapping is 1:1 except
  * `flash`, which Figma spells "flash" and Core spells `photo-flash`.
@@ -118,7 +132,7 @@ export const IdCaptureStageScreen = forwardRef(({ strings, documentType = 'id',
                     overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: [_jsx("div", { className: "id-capture-band id-capture-band--top", children: pillKind && pillCopy ? (_jsx("div", { className: "id-capture-stage__feedback", children: _jsx(PrizmaCaptureFeedback, { feedback: pillKind, title: pillCopy.title, subtitle: pillCopy.subtitle }) })) : (_jsxs(_Fragment, { children: [_jsx("h2", { className: "prizma-viewfinder__title", children: slice.title }), slice.instruction && !manual ? (_jsx("p", { className: "prizma-viewfinder__instruction", children: slice.instruction })) : null] })) }), _jsx(PrizmaIdCapture, { type: documentType, state: CAPTURE_STATE[state], isVertical: vertical, mode: "overlay", scrim: true, countdownValue: countdownValue, encryptedLabel: strings.encryptedLabel, announcement: strings.stage.stateLabels?.[state], still: still }), _jsx("div", { className: "id-capture-band", children: band ? _jsx("div", { className: "id-capture-stage__notice", children: band }) : null })] }), _jsx("div", { className: "prizma-screen-layout__capture-strip", children: _jsx(PrizmaCaptureManual, { className: "id-capture-stage__manual", variant: "id-capture", showButton: manual, showTooltip: manual, showHelpIcon: true, tooltipText: manual ? strings.stage.manualTooltip : undefined, ariaLabel: strings.stage.captureLabel, helpLabel: strings.stage.helpLabel, onCapture: () => onAction?.({ type: 'cta', screenId }), onHelp: () => onAction?.({ type: 'help', screenId }) }) }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
+                    .join(' '), children: [_jsx("div", { className: "id-capture-band id-capture-band--top", children: pillKind && pillCopy ? (_jsx("div", { className: "id-capture-stage__feedback", children: _jsx(PrizmaCaptureFeedback, { feedback: pillKind, title: pillCopy.title, subtitle: pillCopy.subtitle }) })) : (_jsxs(_Fragment, { children: [_jsx("h2", { className: "prizma-viewfinder__title", children: slice.title }), slice.instruction && !manual ? (_jsx("p", { className: "prizma-viewfinder__instruction", children: slice.instruction })) : null] })) }), _jsx(PrizmaIdCapture, { type: documentType, state: CAPTURE_STATE[state], isVertical: vertical, mode: "overlay", scrim: true, countdownValue: countdownValue, encryptedLabel: strings.encryptedLabel, announcement: strings.stage.stateLabels?.[state], still: still }), _jsx("div", { className: "id-capture-band", children: band ? _jsx("div", { className: "id-capture-stage__notice", children: band }) : null })] }), _jsx("div", { className: "prizma-screen-layout__capture-strip", children: _jsx(PrizmaCaptureManual, { className: "id-capture-stage__manual", variant: "id-capture", showButton: manual, showTooltip: manual, showHelpIcon: true, ...manualTooltipProps(manual ? strings.stage.manualTooltip : undefined), ariaLabel: strings.stage.captureLabel, helpLabel: strings.stage.helpLabel, onCapture: () => onAction?.({ type: 'cta', screenId }), onHelp: () => onAction?.({ type: 'help', screenId }) }) }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
 });
 IdCaptureStageScreen.displayName = 'IdCaptureStageScreen';
 export default IdCaptureStageScreen;

package/dist/IdCaptureStrings.d.ts

@@ -92,9 +92,11 @@ export interface IdCaptureStrings {
             title: string;
             instruction?: string;
         };
-        /** Manual mode — the tooltip bubble above the shutter
-         *  ("1. Fill the frame with your ID / 2. Press the button"). */
-        manualTooltip?: string;
+        /** Manual mode — the tooltip bubble above the shutter. A list of steps
+         *  renders as a numbered list (`["Fill the frame with your ID", "Press
+         *  the button"]`), which keeps the list semantics for screen readers; a
+         *  plain string renders as is, with `\n` breaking the line. */
+        manualTooltip?: string | string[];
         /** Accessible name of the shutter button (manual mode). */
         captureLabel?: string;
         /** Accessible name of the "?" help control. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/prizma-core-screens",
-  "version": "0.2.20",
+  "version": "0.2.22",
   "description": "Prizma Design System — SDK module screens: composed, responsive, brand-themeable React screens built from @incodetech/prizma-core-web.",
   "license": "UNLICENSED",
   "type": "module",
@@ -847,8 +847,8 @@
   },
   "dependencies": {
     "@incodetech/prizma-core-icons": "^0.4.0",
-    "@incodetech/prizma-core-tokens": "^0.18.0",
-    "@incodetech/prizma-core-web": "^0.18.0"
+    "@incodetech/prizma-core-tokens": "^0.19.0",
+    "@incodetech/prizma-core-web": "^0.19.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

package/src/IdCaptureStageScreen.tsx

@@ -21,6 +21,29 @@ import './ScreenLayout.css';
 import './ViewfinderScreen.css';
 import './IdCaptureLayout.css';
 
+/**
+ * The manual-mode instruction, in the shape the strings table gives it: a list
+ * of steps becomes a real `<ol>` on the Tooltip's content slot (screen readers
+ * announce "list, 2 items"); a plain string goes through `tooltipText` and
+ * keeps its own line breaks. Nothing set, no bubble.
+ */
+const manualTooltipProps = (
+  copy: string | string[] | undefined,
+): Pick<React.ComponentProps<typeof PrizmaCaptureManual>, 'tooltip' | 'tooltipText'> => {
+  if (Array.isArray(copy)) {
+    return {
+      tooltip: (
+        <ol>
+          {copy.map((step, index) => (
+            <li key={index}>{step}</li>
+          ))}
+        </ol>
+      ),
+    };
+  }
+  return { tooltipText: copy };
+};
+
 /**
  * Purple stage state → Core `PrizmaIdCapture` state. The mapping is 1:1 except
  * `flash`, which Figma spells "flash" and Core spells `photo-flash`.
@@ -297,7 +320,7 @@ export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScr
         showButton={manual}
         showTooltip={manual}
         showHelpIcon
-        tooltipText={manual ? strings.stage.manualTooltip : undefined}
+        {...manualTooltipProps(manual ? strings.stage.manualTooltip : undefined)}
         ariaLabel={strings.stage.captureLabel}
         helpLabel={strings.stage.helpLabel}
         onCapture={() => onAction?.({ type: 'cta', screenId })}

package/src/IdCaptureStrings.ts

@@ -116,9 +116,11 @@ export interface IdCaptureStrings {
     front: { title: string; instruction?: string };
     back: { title: string; instruction?: string };
     passport: { title: string; instruction?: string };
-    /** Manual mode — the tooltip bubble above the shutter
-     *  ("1. Fill the frame with your ID / 2. Press the button"). */
-    manualTooltip?: string;
+    /** Manual mode — the tooltip bubble above the shutter. A list of steps
+     *  renders as a numbered list (`["Fill the frame with your ID", "Press
+     *  the button"]`), which keeps the list semantics for screen readers; a
+     *  plain string renders as is, with `\n` breaking the line. */
+    manualTooltip?: string | string[];
     /** Accessible name of the shutter button (manual mode). */
     captureLabel?: string;
     /** Accessible name of the "?" help control. */