diff --git a/packages/web-embed-api/README.md b/packages/web-embed-api/README.md index ea194933..429d90f9 100644 --- a/packages/web-embed-api/README.md +++ b/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. diff --git a/packages/web-embed-api/src/index.ts b/packages/web-embed-api/src/index.ts index 98405408..d2e9c5c3 100644 --- a/packages/web-embed-api/src/index.ts +++ b/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; } })