Iframe accessibility improvements: Add title attribute and auto-focus when UI is showing (#158)

* IFrame accessibility improvements

* Re-focus previous activeElement when UI is hidden

* Update '@magic-sdk/commons' dependencies

Author: smithki

packages/commons/package.json

@@ -17,8 +17,8 @@
   "module": "dist/module/index.js",
   "types": "dist/commonjs/index.d.ts",
   "peerDependencies": {
-    "@magic-sdk/provider": "^3.0.1",
-    "@magic-sdk/types": "^2.0.1",
+    "@magic-sdk/provider": "^4.0.2",
+    "@magic-sdk/types": "^3.0.1",
     "tslib": "^2.0.3"
   },
   "gitHead": "1ef062ea699d48d5e9a9375a93b7c147632b05ca"

packages/web/src/iframe-controller.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-expressions */
 /* eslint-disable no-underscore-dangle */
 
 import { ViewController, createDuplicateIframeWarning, createURL, createModalNotReadyError } from '@magic-sdk/provider';
@@ -46,6 +47,7 @@ function checkForSameSrcInstances(parameters: string) {
  */
 export class IframeController extends ViewController {
   private iframe!: Promise<HTMLIFrameElement>;
+  private activeElement: any = null;
 
   protected init() {
     this.iframe = new Promise((resolve) => {
@@ -54,6 +56,7 @@ export class IframeController extends ViewController {
           const iframe = document.createElement('iframe');
           iframe.classList.add('magic-iframe');
           iframe.dataset.magicIframeLabel = createURL(this.endpoint).host;
+          iframe.title = 'Secure Modal';
           iframe.src = createURL(`/send?params=${encodeURIComponent(this.parameters)}`, this.endpoint).href;
           applyOverlayStyles(iframe);
           document.body.appendChild(iframe);
@@ -76,11 +79,15 @@ export class IframeController extends ViewController {
   protected async showOverlay() {
     const iframe = await this.iframe;
     iframe.style.display = 'block';
+    this.activeElement = document.activeElement;
+    iframe.focus();
   }
 
   protected async hideOverlay() {
     const iframe = await this.iframe;
     iframe.style.display = 'none';
+    if (this.activeElement?.focus) this.activeElement.focus();
+    this.activeElement = null;
   }
 
   public async postMessage(data: any) {

packages/web/test/spec/iframe-controller/hideOverlay.spec.ts

@@ -11,9 +11,30 @@ test.beforeEach((t) => {
 test('Change display style to `none`', async (t) => {
   const overlay = createIframeController();
 
-  (overlay as any).iframe = { style: { display: 'block' } };
+  (overlay as any).iframe = {
+    style: { display: 'block' },
+  };
 
   await (overlay as any).hideOverlay();
 
   t.deepEqual((overlay as any).iframe, { style: { display: 'none' } });
 });
+
+test('If `activeElement` exists and can be focused, calls `activeElement.focus()`', async (t) => {
+  const overlay = createIframeController();
+
+  const focusStub = sinon.stub();
+
+  (overlay as any).activeElement = {
+    focus: focusStub,
+  };
+
+  (overlay as any).iframe = {
+    style: { display: 'block' },
+  };
+
+  await (overlay as any).hideOverlay();
+
+  t.true(focusStub.calledOnce);
+  t.is((overlay as any).activeElement, null);
+});

packages/web/test/spec/iframe-controller/init.spec.ts

@@ -51,6 +51,7 @@ test.serial('Appends header with style, appends body with iframe, and resolves i
   t.true(classListAddStub.calledWith('magic-iframe'));
   t.deepEqual(iframe.dataset, { magicIframeLabel: 'auth.magic.link' });
   t.is(iframe.src, `${MAGIC_RELAYER_FULL_URL}/send?params=${ENCODED_QUERY_PARAMS}`);
+  t.is(iframe.title, 'Secure Modal');
 });
 
 test.serial('Displays warning in console upon duplicate iframes', async (t) => {

packages/web/test/spec/iframe-controller/showOverlay.spec.ts

@@ -11,9 +11,43 @@ test.beforeEach((t) => {
 test('Change display style to `block`', async (t) => {
   const overlay = createIframeController();
 
-  (overlay as any).iframe = { style: { display: 'none' } };
+  (overlay as any).iframe = {
+    style: { display: 'none' },
+    focus: () => {},
+  };
 
   await (overlay as any).showOverlay();
 
-  t.deepEqual((overlay as any).iframe, { style: { display: 'block' } });
+  t.is((overlay as any).iframe.style.display, 'block');
+});
+
+test('Calls `iframe.focus()`', async (t) => {
+  const overlay = createIframeController();
+
+  const focusStub = sinon.stub();
+  (overlay as any).iframe = {
+    style: { display: 'none' },
+    focus: focusStub,
+  };
+
+  await (overlay as any).showOverlay();
+
+  t.true(focusStub.calledOnce);
+});
+
+test('Saves the current `document.activeElement`', async (t) => {
+  const overlay = createIframeController();
+
+  browserEnv.stub('document.activeElement', 'qwertyqwerty');
+
+  (overlay as any).iframe = {
+    style: { display: 'none' },
+    focus: () => {},
+  };
+
+  t.is((overlay as any).activeElement, null);
+
+  await (overlay as any).showOverlay();
+
+  t.is((overlay as any).activeElement, 'qwertyqwerty');
 });