feat: title and allow in web embed iframes

packages/web-embed-api/README.md

@@ -33,6 +33,15 @@ The optional `config` object has the following interface:
 ```ts
 interface IFormsortWebEmbedConfig {
   useHistoryAPI?: boolean; // Default: false
+  /**
+   * iframe title attribute for accessibility
+   */
+  iframeTitle?: string;
+  /**
+   * iframe allow attribute for permissions
+   * e.g. "camera;"
+   */
+  iframeAllow?: string;
   autoHeight?: boolean; // Default: false
   style?: {
     width?: CSSStyleDeclaration['width'];
@@ -55,8 +64,14 @@ interface IFormsortWebEmbedConfig {
 
 - `style`: CSS properties to be applied to the iframe container.
 
+- `iframeTitle`: Optional string to set the iframe's title attribute for accessibility. If not provided, the embed will attempt to set a title from the flow's document title when available.
+
+- `iframeAllow`: Optional string to set the iframe's allow attribute for permissions (for example: `"camera;"`).
+
 - `authentication.idToken`: When the Flow requires an ID token, this can be used to provide it.
 
+- `origin`: When present, loads the flow from your custom domain instead of the default formsort domain.
+
 ### `loadFlow(clientLabel: string, flowLabel: string, variantLabel?: string, queryParams?: Array<[string, string]>) => void`
 
 Starts loading a Formsort variant, or a flow.

packages/web-embed-api/src/index.ts

@@ -27,26 +27,42 @@ interface IFormsortWebEmbed {
 
 interface IFormsortWebEmbedConfig extends IFormsortEmbedConfig {
   useHistoryAPI?: boolean;
+  /**
+   * iframe title attribute for accessibility
+   */
+  iframeTitle?: string;
+  /**
+   * iframe allow attribute for permissions
+   * e.g. "camera;"
+   */
+  iframeAllow?: string;
 }
 
 const DEFAULT_CONFIG: IFormsortWebEmbedConfig = {
   useHistoryAPI: false,
 };
 
+const DEFAULT_ALLOW = 'camera;';
+
 const FormsortWebEmbed = (
   rootEl: HTMLElement,
   config: IFormsortWebEmbedConfig = DEFAULT_CONFIG
 ): IFormsortWebEmbed => {
   const iframeEl = document.createElement('iframe');
-  const { style } = config;
+  const { style, iframeAllow = DEFAULT_ALLOW, iframeTitle } = config;
   let loadedOrigin: string;
   iframeEl.style.border = 'none';
+  iframeEl.allow = iframeAllow || DEFAULT_ALLOW;
   if (style) {
     const { width = '', height = '' } = style;
     iframeEl.style.width = width;
     iframeEl.style.height = height;
   }
 
+  if (iframeTitle) {
+    iframeEl.title = iframeTitle;
+  }
+
   rootEl.appendChild(iframeEl);
 
   const setSize = (width?: string | number, height?: string | number) => {
@@ -86,7 +102,7 @@ const FormsortWebEmbed = (
   });
 
   messagingManager.addEventListener(SupportedAnalyticsEvent.FlowLoaded, (payload) => {
-    if (payload.documentTitle) {
+    if (payload.documentTitle && !iframeEl.title) {
       iframeEl.title = payload.documentTitle;
     }
   })