[terra-embedded-content-consumer] - Show focus indicator on iframe of the embedded content when it has focus

package.json

@@ -134,6 +134,6 @@
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.1.4",
-    "xfc": "^1.2.1"
+    "xfc": "git+https://github.com/kolkheang/xfc.git#display-frame-focus-indicator"
   }
 }

packages/terra-embedded-content-consumer/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added visual focus indicator (outline style) on the iframe when it has focus.
+
 ## 3.39.0 - (October 3, 2023)
 
 * Added

packages/terra-embedded-content-consumer/package.json

@@ -24,11 +24,12 @@
   "peerDependencies": {
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
-    "xfc": "^1.2.1"
+    "xfc": "git+https://github.com/kolkheang/xfc.git#display-frame-focus-indicator"
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.5.8",
+    "style-to-object": "^0.4.2"
   },
   "scripts": {
     "compile": "babel --root-mode upward src --out-dir lib --copy-files",

packages/terra-embedded-content-consumer/src/EmbeddedContentConsumer.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Consumer } from 'xfc';
+import parse from 'style-to-object';
+import styles from './EmbeddedContentConsumer.module.scss';
 
 const propTypes = {
   /**
@@ -94,6 +96,10 @@ class EmbeddedContentConsumer extends React.Component {
       Object.assign(frameOptions.iframeAttrs, { title: this.props.title });
     }
 
+    const focusStyleStr = `outline: ${styles.focusOutline}`;
+    const blurStyleStr = `outline: ${styles.blurOutline}`;
+    frameOptions.focusIndicator = { focusStyleStr, blurStyleStr };
+
     // Mount the provided source as the application into the content wrapper.
     this.xfcFrame = Consumer.mount(this.embeddedContentWrapper, this.props.src, frameOptions);
 
@@ -102,6 +108,24 @@ class EmbeddedContentConsumer extends React.Component {
       this.props.onMount(this.xfcFrame);
     }
 
+    // Cover other scenario where xfc frame style doesn't apply
+    // such as when `srcdoc` attribute is used which doesn't work
+    // within xfc's JSONRPC communication.
+    this.xfcFrame?.iframe?.contentWindow?.addEventListener('focus', () => {
+      const styleObj = parse(focusStyleStr);
+      Object.entries(styleObj).forEach(([key, value]) => {
+        this.xfcFrame.iframe.style[key] = value;
+      });
+    }, true);
+
+    // Listen for blur event and callback function to apply the style
+    this.xfcFrame?.iframe?.contentWindow?.addEventListener('blur', () => {
+      const styleObj = parse(blurStyleStr);
+      Object.entries(styleObj).forEach(([key, value]) => {
+        this.xfcFrame.iframe.style[key] = value;
+      });
+    }, true);
+
     // Attach the event handlers to the xfc frame.
     this.addEventListener('xfc.launched', this.props.onLaunch);
     this.addEventListener('xfc.authorized', this.props.onAuthorize);

packages/terra-embedded-content-consumer/src/EmbeddedContentConsumer.module.scss

@@ -0,0 +1,15 @@
+// Themes
+@import './clinical-lowlight-theme/EmbeddedContentConsumer.module';
+@import './orion-fusion-theme/EmbeddedContentConsumer.module';
+
+:local {
+  /* stylelint-disable terra/custom-property-name */
+  $blur-outline: var(--terra-embedded-content-consumer-blur-outline, none);
+  $focus-outline: var(--terra-embedded-content-consumer-focus-outline, 2px dashed #000);
+
+  :export {
+    /* stylelint-disable property-no-unknown */
+    blurOutline: $blur-outline;
+    focusOutline: $focus-outline;
+  }
+}

packages/terra-embedded-content-consumer/src/EmbeddedContentProviderTestTemplate.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import '../../../initalizeXFC';
 import './ProviderIframe.module.scss';
 import './ProviderTestTemplate.module.scss';
 

packages/terra-embedded-content-consumer/src/clinical-lowlight-theme/EmbeddedContentConsumer.module.scss

@@ -0,0 +1,6 @@
+:local {
+  .clinical-lowlight-theme {
+    --terra-embedded-content-consumer-focus-outline: 2px dashed #b2b5b6;
+    --terra-embedded-content-consumer-blur-outline: none;
+  }
+}

packages/terra-embedded-content-consumer/src/orion-fusion-theme/EmbeddedContentConsumer.module.scss

@@ -0,0 +1,6 @@
+:local {
+  .orion-fusion-theme {
+    --terra-embedded-content-consumer-focus-outline: 2px solid #3496cf;
+    --terra-embedded-content-consumer-blur-outline: none;
+  }
+}

packages/terra-embedded-content-consumer/tests/jest/EmbeddedContentConsumer.test.jsx

@@ -169,32 +169,34 @@ describe(EmbeddedContentConsumer, () => {
 
     frame.unmount();
   });
-});
-
-it('sets appropriate config option when resizeConfig.scrolling is true', () => {
-  const embeddedContentConsumer = (
-    <div>
-      <EmbeddedContentConsumer
-        src="https://www.google.com/"
-        options={{ resizeConfig: { scrolling: true } }}
-      />
-    </div>
-  );
-
-  const wrapper = shallow(embeddedContentConsumer);
-  expect(wrapper).toMatchSnapshot();
-});
 
-it('sets appropriate config option when resizeConfig.scrolling is false', () => {
-  const embeddedContentConsumer = (
-    <div>
-      <EmbeddedContentConsumer
-        src="https://www.google.com/"
-        options={{ resizeConfig: { scrolling: false } }}
-      />
-    </div>
-  );
-
-  const wrapper = shallow(embeddedContentConsumer);
-  expect(wrapper).toMatchSnapshot();
+  describe('scrolling', () => {
+    it('sets appropriate config option when resizeConfig.scrolling is true', () => {
+      const embeddedContentConsumer = (
+        <div>
+          <EmbeddedContentConsumer
+            src="https://www.google.com/"
+            options={{ resizeConfig: { scrolling: true } }}
+          />
+        </div>
+      );
+
+      const wrapper = shallow(embeddedContentConsumer);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('sets appropriate config option when resizeConfig.scrolling is false', () => {
+      const embeddedContentConsumer = (
+        <div>
+          <EmbeddedContentConsumer
+            src="https://www.google.com/"
+            options={{ resizeConfig: { scrolling: false } }}
+          />
+        </div>
+      );
+
+      const wrapper = shallow(embeddedContentConsumer);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
 });

packages/terra-embedded-content-consumer/tests/jest/__snapshots__/EmbeddedContentConsumer.test.jsx.snap

@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EmbeddedContentConsumer scrolling sets appropriate config option when resizeConfig.scrolling is false 1`] = `
+<div>
+  <EmbeddedContentConsumer
+    options={
+      Object {
+        "resizeConfig": Object {
+          "scrolling": false,
+        },
+      }
+    }
+    src="https://www.google.com/"
+  />
+</div>
+`;
+
+exports[`EmbeddedContentConsumer scrolling sets appropriate config option when resizeConfig.scrolling is true 1`] = `
+<div>
+  <EmbeddedContentConsumer
+    options={
+      Object {
+        "resizeConfig": Object {
+          "scrolling": true,
+        },
+      }
+    }
+    src="https://www.google.com/"
+  />
+</div>
+`;
+
 exports[`EmbeddedContentConsumer should render the embedded content consumer container 1`] = `
 <div>
   <EmbeddedContentConsumer
@@ -79,33 +109,3 @@ exports[`EmbeddedContentConsumer should render the embedded content consumer wit
   </EmbeddedContentConsumer>
 </div>
 `;
-
-exports[`sets appropriate config option when resizeConfig.scrolling is false 1`] = `
-<div>
-  <EmbeddedContentConsumer
-    options={
-      Object {
-        "resizeConfig": Object {
-          "scrolling": false,
-        },
-      }
-    }
-    src="https://www.google.com/"
-  />
-</div>
-`;
-
-exports[`sets appropriate config option when resizeConfig.scrolling is true 1`] = `
-<div>
-  <EmbeddedContentConsumer
-    options={
-      Object {
-        "resizeConfig": Object {
-          "scrolling": true,
-        },
-      }
-    }
-    src="https://www.google.com/"
-  />
-</div>
-`;

packages/terra-embedded-content-consumer/tests/wdio/embedded-content-consumer-spec.js

@@ -12,7 +12,7 @@ Terra.describeViewports('Embedded Content Consumer', ['tiny', 'large'], () => {
     });
 
     it('Provider triggers EventA message', () => {
-      const myFrame = $('iframe[src="/raw/provider/cerner-terra-framework-docs/embedded-content-consumer/providers/custom-event-provider"]');
+      const myFrame = $('iframe[id="custom-event-consumer-frame"]');
       browser.switchToFrame(myFrame);
 
       $('#EventA').click();
@@ -30,7 +30,7 @@ Terra.describeViewports('Embedded Content Consumer', ['tiny', 'large'], () => {
     });
 
     it('Provider triggers EventA message', () => {
-      const myFrame = $('iframe[src="/raw/provider/cerner-terra-framework-docs/embedded-content-consumer/providers/custom-events-provider"]');
+      const myFrame = $('iframe[id="custom-events-consumer-frame"]');
       browser.switchToFrame(myFrame);
 
       $('#EventA').click();
@@ -40,15 +40,15 @@ Terra.describeViewports('Embedded Content Consumer', ['tiny', 'large'], () => {
     });
 
     it('successfully replied with EventA message', () => {
-      const myFrame = $('iframe[src="/raw/provider/cerner-terra-framework-docs/embedded-content-consumer/providers/custom-events-provider"]');
+      const myFrame = $('iframe[id="custom-events-consumer-frame"]');
       browser.switchToFrame(myFrame);
 
       expect($('#embedded-content-consumer-reply')).toHaveTextContaining('eventA');
       browser.switchToParentFrame();
     });
 
     it('Provider triggers EventB message', () => {
-      const myFrame = $('iframe[src="/raw/provider/cerner-terra-framework-docs/embedded-content-consumer/providers/custom-events-provider"]');
+      const myFrame = $('iframe[id="custom-events-consumer-frame"]');
       browser.switchToFrame(myFrame);
 
       $('#EventB').click();
@@ -58,7 +58,7 @@ Terra.describeViewports('Embedded Content Consumer', ['tiny', 'large'], () => {
     });
 
     it('successfully replied with EventB message', () => {
-      const myFrame = $('iframe[src="/raw/provider/cerner-terra-framework-docs/embedded-content-consumer/providers/custom-events-provider"]');
+      const myFrame = $('iframe[id="custom-events-consumer-frame"]');
       browser.switchToFrame(myFrame);
 
       expect($('#embedded-content-consumer-reply')).toHaveTextContaining('eventB');
@@ -69,9 +69,9 @@ Terra.describeViewports('Embedded Content Consumer', ['tiny', 'large'], () => {
     it('has mounted, launched, and authorized elements', () => {
       browser.url('/raw/tests/cerner-terra-framework-docs/embedded-content-consumer/consumers/data-status-consumer');
       const timeout = browser.options.waitforTimeout + 5000;
-      $('iframe[src="/raw/provider/cerner-terra-framework-docs/embedded-content-consumer/providers/data-status-provider"]').waitForDisplayed({ timeout });
+      $('iframe[id="data-embedded-consumer-data-status"]').waitForDisplayed({ timeout });
 
-      const myFrame = $('iframe[src="/raw/provider/cerner-terra-framework-docs/embedded-content-consumer/providers/data-status-provider"]');
+      const myFrame = $('iframe[id="data-embedded-consumer-data-status"]');
       browser.switchToFrame(myFrame);
 
       expect($('#Mounted').isExisting());
@@ -105,4 +105,29 @@ Terra.describeViewports('Embedded Content Consumer', ['tiny', 'large'], () => {
       Terra.validates.element('Scroll content into view');
     });
   });
+
+  describe('visual focus indicator', () => {
+    it('shows visual focus indicator on the frame when clicked', () => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/embedded-content-consumer/consumers/basic-consumer-with-scrolling');
+      $('iframe[id="basic-consumer-with-scrolling"]').waitForDisplayed();
+
+      const myFrame = $('iframe[id="basic-consumer-with-scrolling"]');
+      browser.switchToFrame(myFrame);
+
+      const p = $('<p>');
+      p.scrollIntoView();
+      p.click();
+
+      browser.switchToParentFrame();
+
+      Terra.validates.element('focus indicator on the frame when clicked', { selector: '#site' });
+    });
+
+    it('shows visual focus indicator on the frame when tabbing through and focus is on the frame', () => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/embedded-content-consumer/consumers/basic-consumer');
+      browser.keys('Tab');
+
+      Terra.validates.element('focus indicator on the frame when tabbing through', { selector: '#site' });
+    });
+  });
 });

packages/terra-framework-docs/CHANGELOG.md

@@ -5,6 +5,9 @@
 * Added
   * Added documentation for FlowsheetDataGrid in `terra-data-grid`.
 
+* Updated
+  * Updated examples, and tests to show the visual focus indicator on the iframe of the embedded content
+
 ## 1.39.0 - (October 3, 2023)
 
 * Added

packages/terra-framework-docs/src/terra-dev-site/doc/embedded-content-consumer/example/BasicConsumer.jsx

@@ -4,14 +4,10 @@ import { Consumer } from 'xfc';
 import '../providers/EmbeddedContentConsumerCommon.module.scss';
 
 Consumer.init();
-
 const BasicConsumer = () => (
   <EmbeddedContentConsumer
     src="/terra-framework/#/raw/provider/cerner-terra-framework-docs/embedded-content-consumer/providers/basic-provider"
     title="Basic content example"
-    options={{
-      resizeConfig: { scrolling: true },
-    }}
   />
 );
 

packages/terra-framework-docs/src/terra-dev-site/doc/embedded-content-consumer/example/BasicConsumerWithScrolling.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import EmbeddedContentConsumer from 'terra-embedded-content-consumer';
 import { Consumer } from 'xfc';
+import '../providers/EmbeddedContentConsumerCommon.module.scss';
 
 Consumer.init();
 
@@ -9,7 +10,7 @@ const BasicConsumerWithScrolling = () => (
     src="/terra-framework/#/raw/provider/cerner-terra-framework-docs/embedded-content-consumer/providers/basic-provider"
     title="Basic content example of scrolling is enabled"
     options={{
-      resizeConfig: { scrolling: true, fixedWidth: '100%', fixedHeight: '100px' },
+      resizeConfig: { scrolling: true, fixedWidth: '100%', fixedHeight: '120px' },
     }}
   />
 );