feat(a11y): support adding a title attribute to the iframe

COMUI-752
purecloudlabs · Dec 3, 2021 · fb267ec · fb267ec
1 parent ef8597d
commit fb267ec
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/client-app-example/ifc-cli.config.js b/client-app-example/ifc-cli.config.js
@@ -17,7 +17,8 @@ module.exports = function(frameRouter) {
         )}`,
         assignedRoute: '/app2',
         allow: 'camera http://localhost:8080;', // optional
-        sandbox: 'allow-presentation allow-modals' // optional
+        sandbox: 'allow-presentation allow-modals', // optional
+        title: 'iframe Application 2 Example' // optional, but needed for accessibility
       }
     },
     {

diff --git a/src/FrameManager.ts b/src/FrameManager.ts
@@ -107,6 +107,21 @@ class FrameManager {
     this._iframe.setAttribute('sandbox', newSandbox);
   }
 
+  /**
+   * String for the `title` attribute to be added to the <iframe> element
+   * Ex: "Manage Preferences"
+   *
+   * See [<iframe> Accessibility Concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#accessibility_concerns)
+   *
+   * @param title String for the `title` attribute added to the `<iframe>` element.
+   */
+  public setFrameTitle(title?: string): void {
+    if (typeof title !== 'string') {
+      title = '';
+    }
+    this._iframe.setAttribute('title', title);
+  }
+
   /**
    * Navigates the wrapped iframe to the provided location in a
    * way that does not affect the host application's history.

diff --git a/src/HostRouter.ts b/src/HostRouter.ts
@@ -34,7 +34,8 @@ export class HostRouter {
           url: applyRoute(client.url, clientRoute),
           assignedRoute: client.assignedRoute,
           allow: client.allow,
-          sandbox: client.sandbox
+          sandbox: client.sandbox,
+          title: client.title
         };
       }
     });
@@ -60,6 +61,8 @@ export interface ClientTarget {
   allow?: string;
   /** iframe's sandbox directive to be merged with defaults */
   sandbox?: string;
+  /** iframe's title attribute */
+  title?: string;
 }
 
 /**
@@ -100,6 +103,11 @@ export interface ClientRegistration {
    * for this client. Values wll be merged with built-in defaults.
    */
   sandbox?: string;
+  /**
+   * Sets the iframe's [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#accessibility_concerns) attribute.
+   * This is required for accessibility.
+   */
+  title?: string;
 }
 
 /**
@@ -151,7 +159,8 @@ function parseRegistration(key: string, value: ClientRegistration): ClientInfo {
     url: value.url,
     assignedRoute: normalizeRoute(value.assignedRoute),
     allow: value.allow,
-    sandbox: value.sandbox
+    sandbox: value.sandbox,
+    title: value.title
   };
 }
 

diff --git a/src/elements/frame-router.ts b/src/elements/frame-router.ts
@@ -128,6 +128,9 @@ export default class FrameRouterElement extends HTMLElement {
       this._frameManager.setFrameAllow(
         (clientInfo && clientInfo.allow) || undefined
       );
+      this._frameManager.setFrameTitle(
+        (clientInfo && clientInfo.title) || undefined
+      );
 
       this.dispatchEvent(
         new CustomEvent('frameTransition', { detail: newLocation })