Fix: CSS to animate popups, dialog for accessibility (fixes #600)

js/a11y/popup.js

@@ -1,4 +1,5 @@
 import Adapt from 'core/js/adapt';
+import logging from '../logging';
 
 /**
  * Tabindex and aria-hidden manager for popups.
@@ -94,6 +95,12 @@ export default class Popup extends Backbone.Controller {
     }
     this._floorStack.push($popupElement);
     this._focusStack.push($(document.activeElement));
+    if ($popupElement.is('dialog')) {
+      $popupElement[0].addEventListener('cancel', event => event.preventDefault());
+      $popupElement[0].showModal();
+      return;
+    }
+    logging.deprecated('a11y/popup opened: Use native dialog tag for', $popupElement);
     let $elements = $(config._options._tabbableElements).filter(config._options._tabbableElementsExcludes);
     const $branch = $popupElement.add($popupElement.parents());
     const $siblings = $branch.siblings().filter(config._options._tabbableElementsExcludes);
@@ -167,7 +174,11 @@ export default class Popup extends Backbone.Controller {
     if (this._floorStack.length <= 1) {
       return;
     }
-    this._floorStack.pop();
+    const $popupElement = this._floorStack.pop();
+    if ($popupElement.is('dialog')) {
+      $popupElement[0].close();
+      return this._focusStack.pop();
+    }
     $(config._options._tabbableElements).filter(config._options._tabbableElementsExcludes).each((index, item) => {
       const $item = $(item);
       let previousTabIndex = '';

js/app.js

@@ -22,6 +22,7 @@ import 'core/js/navigation';
 import 'core/js/startController';
 import 'core/js/DOMElementModifications';
 import 'core/js/tooltips';
+import 'core/js/shadow';
 import 'plugins';
 
 $('body').append(Handlebars.templates.loading());

js/drawer.js

@@ -18,6 +18,7 @@ class Drawer extends Backbone.Controller {
 
   onAdaptStart() {
     this._drawerView = new DrawerView({ collection: DrawerCollection });
+    this._drawerView.$el.insertAfter('#shadow');
   }
 
   onLanguageChanged() {

js/shadow.js

@@ -0,0 +1,37 @@
+import Backbone from 'backbone';
+import Adapt from 'core/js/adapt';
+import ShadowView from './views/ShadowView';
+
+class Shadow extends Backbone.Controller {
+
+  initialize() {
+    this.listenTo(Adapt, {
+      'adapt:start': this.onAdaptStart
+    });
+  }
+
+  onAdaptStart() {
+    this._shadowView = new ShadowView();
+    this._shadowView.$el.prependTo('body');
+  }
+
+  get isOpen() {
+    return this._shadowView?.isOpen ?? false;
+  }
+
+  async show() {
+    return this._shadowView?.showShadow();
+  }
+
+  async hide() {
+    return this._shadowView?.hideShadow();
+  }
+
+  remove() {
+    this._shadowView?.remove();
+    this._shadowView = null;
+  }
+
+}
+
+export default new Shadow();

js/transitions.js

@@ -1,5 +1,13 @@
 import logging from 'core/js/logging';
 
+/**
+ * Wait for one requestAnimationFrame to allow classes to settle
+ * @returns {Promise}
+ */
+export async function transitionNextFrame() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
+
 /**
  * Handler to await completion of active `CSSTransitions`.
  * An optional `transition-property` to await can be specified, else all properties will be evaluated.

js/views/ShadowView.js

@@ -0,0 +1,57 @@
+import Adapt from 'core/js/adapt';
+import Backbone from 'backbone';
+import { transitionNextFrame, transitionsEnded } from '../transitions';
+
+class ShadowView extends Backbone.View {
+
+  className() {
+    return 'shadow js-shadow u-display-none';
+  }
+
+  attributes() {
+    return {
+      id: 'shadow'
+    };
+  }
+
+  initialize() {
+    this._isOpen = false;
+    this.disableAnimation = Adapt.config.get('_disableAnimation') ?? false;
+    this.$el.toggleClass('disable-animation', Boolean(this.disableAnimation));
+    this.render();
+  }
+
+  render() {
+    const template = Handlebars.templates.shadow;
+    this.$el.html(template({ _globals: Adapt.course.get('_globals') }));
+    return this;
+  }
+
+  get isOpen() {
+    return this._isOpen;
+  }
+
+  async showShadow() {
+    this._isOpen = true;
+    this.$el.addClass('anim-show-before');
+    await transitionNextFrame();
+    this.$el.removeClass('u-display-none');
+    await transitionNextFrame();
+    this.$el.addClass('anim-show-after');
+    await transitionsEnded(this.$el);
+  }
+
+  async hideShadow() {
+    this._isOpen = false;
+    this.$el.addClass('anim-hide-before');
+    await transitionNextFrame();
+    this.$el.addClass('anim-hide-after');
+    await transitionsEnded(this.$el);
+    this.$el.addClass('u-display-none');
+    await transitionNextFrame();
+    this.$el.removeClass('anim-open-before anim-open-after anim-hide-before anim-hide-after');
+  }
+
+}
+
+export default ShadowView;