Inline frame

[sujathakkgit]

Problem/Concern

Like to explore the options of FIGMA theme builder inheriting main frame settings set for WCAG in the inline frame (iframe).
Can it be done or the inline frame code needs to have separate theme builder settings of its own.

• link to problem content

Proposed Solution

[aaronreed708]

We probably need to gather more information here. I don't believe that an iframe will be affected by styling in the containing page in any scenario, but we need to get more information to see if we are not understanding the question.

[aaronreed708]

@aaronreed708 to follow up with the issue author.

[sujathakkgit]

Say I am using my own shopping site and in order to use shipping, I open an iframe of usps tracking in my website would figma be able to pass on the WCAG settings for say dyslexic and customize it in iframe or only usps.com can do it?

[aaronreed708]

Hi @sujathakkgit, so the value that Theme Builder has is that we will allow you to build a visually accessible design system comprised of JSON tokens or CSS. We also create a theme for MUI components that uses this styling. Once the design system is complete, the designer/developer can then take this design system and integrate it into their own applications.

So in your scenario, your shopping site would need to integrate the styling and/or load the MUI component theme. Similarly, the usps tracking application running in the iframe would need to integrate with a Theme Builder-created design system. And both applications would have to be built to load the same design system resources (e.g. from a common .css file). The resources couldn't be passed between the container and the frame, especially if they are served from different domains.

However, potentially, the container could share with the iframe profile/configuration information that could achieve a similar goal. For example, the shopping site could be built to use Theme Builder-created design systems and could also be built to recognize and implement the level of assistance that a user required (e.g. from some kind of user profile indicating the user's dyslexia or type of color blindness). It would use the styling that would offer the best results in that situation. There is no reason that the shopping site couldn't potentially pass the relevant profile information on to the usps tracking application (assuming that it knew how to convey this information to the application). So the shopping site could tell usps tracking to use its dyslexia theme or the appropriate color blindness theme if it happened to support such configurations. For example, it could load https://usps.tracking.com?dyslexia=true in the iframe. But it is just triggering a behavior that the tracking site already supported. It isn't passing that support into the iframe.

Please let me know if I'm not clearly conveying my thoughts. Certainly happy to explore this further with you.