Known Issue with iframes

Overview

Lightning components in iframes may show up with the old non-accessible colors. Styling hooks for colors also may not work when under an iframe.

This issue is not specific to a particular page or cloud. This issue is related to iframes, which can be present in any of your pages.

We expect that Lightning components and Styling Hook color changes will work in an iframe in Summer ’24 (safe harbor). You can, however, make Lightning components and styling hooks work in Spring ’24 with the workaround below.

If you notice that a certain section of your page has old non-accessible colors, that part of your page might be loaded through an iframe.

Steps to reproduce

1. Open the developer tools of the browser and navigate to the Elements tab.

2. Check if the body tag of the page has the slds-wcag class. If so, search for Iframe tags.

3. If you find an iframe tag, verify whether the elements or components you observed for the old non-accessible colors are present inside the iframe.

4. If present, you are encountering the known issue.

5. If you don't find an iframe tag and the elements or components are in old non-accessible colors, please contact Salesforce with the details.

Workaround

Styling hooks and new color changes to components are currently scoped under the slds-wcag class, which is present on the body tag of the main page.

If you own the content inside the iframe, add slds-wcag to your iframe's body tag. This change will result in Lightning components displaying with the new accessible colors and styling hooks will work.

If you own a page with iframes, but do not own the content in the iframe, consider adding the following to your page:

checkForIframes: function () {
  // fetch the iframe
    var iframe = document.querySelector('iframe');
    if(iframe) {
        // wait for iframe to load
        iframe.addEventListener("load", function() {
            var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            // Add the class to the body tag of iframe
            iframeDocument && iframeDocument.querySelector("body") && iframeDocument.querySelector("body").classList.add('slds-wcag');
        });
    }
}

These workarounds should not be needed in Summer ’24 (safe harbor).