[terra-embedded-content-consumer] Update documentation to include acc…

…essibility guidance (#1904)

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

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added documentation relating to accessibility guidance for Embedded Content Consumer props.
+
 ## 3.40.0 - (November 9, 2023)
 
 * Added

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

@@ -19,7 +19,8 @@ const propTypes = {
    * The title of the content in the frame.
    *
    * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue) It is critical to screen reader users that the
-   * title of the frame is set to a meaningful title for the content inside the frame.
+   * title of the frame is set to a meaningful title for the content inside the frame, because the iframe content
+   * is not accessible without having a proper Title applied, the `title` prop will be required in a future release.
    */
   title: PropTypes.string, // TODO MVB - set `title` prop as required
   /**
@@ -64,15 +65,18 @@ const propTypes = {
    * of the content of the iframe even if `resizeConfig` option is set. It's
    * important to specify the `width` and `height` of the frame within `iframeAttrs`.
    *
-   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue) It is critical to keyboard only users that the
-   * embedded content is scrollable when it's not fully visible in the current viewport.
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue) Iframes that are scrollable but have no actionable elements inside the frames are not natively scrollable by keyboard-only users.
+   * It is critical to keyboard-only users that the embedded content is scrollable when it's not fully visible in the current viewport.
    *
    * `resizeConfig.scrolling` - Indicates whether the content inside of the iframe should be scrollable or not. The default is false.
    * When scrolling is set to `true`, it is possible to use keyboard navigation to scroll the content even when there is no
    * interactable element inside the content. When using `srcdoc` attribute, `scrolling` can be set to `'yes'` or `'no'` within `iframeAttrs`.
    *
    * See xfc consumer configuration for details: https://github.com/cerner/xfc
    *
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue) It is critical to keyboard-only users that they see where they are on the page.
+   * Terra Embedded Content Consumer adds a visible keyboard focus indicator to the content iframe by default to support these users when the iframe
+   * content has focus, (or is scrollable) but has no actionable elements inside it.
    */
   options: PropTypes.object,
   /**

packages/terra-framework-docs/CHANGELOG.md

@@ -24,7 +24,8 @@
   * Added `hasVisibleColumnHeaders` example for FlowsheetDataGrid.
   * Added examples and tests to `terra-data-grid` for sections in FlowsheetDataGrid.
   * Added documentation and examples for `terra-compact-interactive-list`.
-
+  * Added a section on accessibility to `terra-embedded-content-consumer` implementation guide.
+
 * Updated
   * Updated About page of `terra-table` to provide accessibility documentation for Home and End keys.
   * Removed alpha notice for FlowsheetDataGrid.

packages/terra-framework-docs/src/terra-dev-site/doc/embedded-content-consumer/EmbeddedContentConsumer.1.doc.mdx

@@ -1,4 +1,5 @@
 import { Badge } from 'terra-embedded-content-consumer/package.json?dev-site-package';
+import { Notice } from "@cerner/terra-docs";
 
 import EmbeddedContentConsumerPropsTable from 'terra-embedded-content-consumer/src/EmbeddedContentConsumer?dev-site-props-table';
 
@@ -56,6 +57,23 @@ Consumer.init();
 * [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
 * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
 
+## Accessibility
+
+<Notice variant="important" ariaLevel="3">
+
+#### Accessibility Guidance: Title
+
+For the purposes of accessibility compliance, it is **critical** to screen reader users that the title of the iframe is set, and describes the content inside the iframe. Without having a proper `title` set for the iframe, the content embedded within the iframe is not accessible. By having a title for the iframe, it helps to inform screen reader users about the content that is embedded inside of the iframe.
+
+#### Accessibility Guidance: Scrolling
+
+When using this Embedded Content Consumer component to embed another page, the default behavior is set to auto resize the content such that the content will display fully inside of the iframe. In scenarios where custom configuration of XFC is made to set a `fixedWidth` or `fixedHeight` or both `fixedWidth` and `fixedHeight` of the content, the content may not be fully visible in the viewport. For keyboard only users, it is critical that users can navigate to the iframe, and scroll using keyboard controls to view the content fully.
+
+When specifying a `fixedWidth` or `fixedHeight` [attribute for XFC](https://github.com/cerner/xfc#iframe-resizing-config), it's also necessary to set `scrolling` option to `true` so that the content can be scrolled when not fully displayed. This is required for accessibility for keyboard only users.
+
+See the [Embedded Content Consumer Props Table](#embedded-content-consumer-props-table) below for an example configuration.
+</Notice>
+
 ## Examples
 <BasicConsumer title='Basic Embedded Content Consumer' />
 <BasicConsumerWithSrcDoc title='Consumer with inline HTML content using `srcdoc`' />