Fix: Drawer close animation. Drawer and notify open focus (#621)

js/deprecated.js

@@ -51,9 +51,9 @@ Adapt.on({
     logging.deprecated('Use drawer.remove, Adapt.trigger(\'drawer:remove\') will be removed in the future');
     drawer.remove();
   },
-  'drawer:closeDrawer'() {
+  'drawer:closeDrawer'($toElement) {
     logging.deprecated('Use drawer.close, Adapt.trigger(\'drawer:closeDrawer\') will be removed in the future');
-    drawer.close();
+    drawer.close($toElement);
   },
   'drawer:triggerCustomView'() {
     logging.deprecated('Use drawer.openCustomView(), Adapt.trigger(\'drawer:triggerCustomView\') will be removed in the future');

js/views/drawerView.js

@@ -78,12 +78,12 @@ class DrawerView extends Backbone.View {
   }
 
   setupEventListeners() {
-    this.onKeyUp = this.onKeyUp.bind(this);
-    $(window).on('keyup', this.onKeyUp);
-    this.el.addEventListener('click', this.onShadowClicked, { capture: true });
+    this.onKeyDown = this.onKeyDown.bind(this);
+    $(window).on('keydown', this.onKeyDown);
+    this.el.addEventListener('mousedown', this.onShadowClicked, { capture: true });
   }
 
-  onKeyUp(event) {
+  onKeyDown(event) {
     if (event.which !== 27) return;
     event.preventDefault();
     this.hideDrawer();
@@ -196,6 +196,8 @@ class DrawerView extends Backbone.View {
     Adapt.trigger('drawer:opened');
 
     this.$el.addClass('anim-show-before');
+    // focus on first tabbable element in drawer
+    a11y.focusFirst(this.$el, { defer: true });
     await transitionNextFrame();
     this.$el.addClass('anim-show-after');
     await transitionsEnded(this.$el);
@@ -227,28 +229,30 @@ class DrawerView extends Backbone.View {
     this.$el.addClass('anim-hide-after');
     await transitionsEnded(this.$el);
 
-    this.$el.removeClass('anim-show-before anim-show-after anim-hide-before anim-hide-after');
+    this._customView = null;
+    $('.js-nav-drawer-btn').attr('aria-expanded', false);
+    Adapt.trigger('drawer:closed');
 
     a11y.popupClosed($toElement);
     this._isVisible = false;
     a11y.scrollEnable('body');
+    this.$('.js-drawer-holder').removeAttr('role');
+
+    this.$el.removeClass('anim-show-before anim-show-after anim-hide-before anim-hide-after');
 
     this.$el
       .removeAttr('style')
       .addClass('u-display-none')
       .attr('aria-hidden', 'true')
       .attr('aria-expanded', 'false');
-    this.$('.js-drawer-holder').removeAttr('role');
-    this._customView = null;
-    $('.js-nav-drawer-btn').attr('aria-expanded', false);
-    Adapt.trigger('drawer:closed');
     this.setDrawerPosition(this._globalDrawerPosition);
   }
 
   remove() {
     this.hideDrawer();
     super.remove();
-    $(window).off('keyup', this.onKeyUp);
+    this.el.removeEventListener('mousedown', this.onShadowClicked, { capture: true });
+    $(window).off('keydown', this.onKeyDown);
     Adapt.trigger('drawer:empty');
     this.collection.reset();
   }

js/views/notifyPopupView.js

@@ -26,15 +26,15 @@ export default class NotifyPopupView extends Backbone.View {
 
   initialize({ notify }) {
     this.notify = notify;
-    _.bindAll(this, 'onShadowClicked', 'resetNotifySize', 'onKeyUp');
+    _.bindAll(this, 'onShadowClicked', 'resetNotifySize', 'onKeyDown');
     this.disableAnimation = Adapt.config.get('_disableAnimation') ?? false;
     this.$el.toggleClass('disable-animation', Boolean(this.disableAnimation));
     this.isOpen = false;
     this.hasOpened = false;
     this.setupEventListeners();
     this.render();
     const dialog = this.$('.notify__popup')[0];
-    dialog.addEventListener('click', this.onShadowClicked, { capture: true });
+    dialog.addEventListener('mousedown', this.onShadowClicked, { capture: true });
   }
 
   setupEventListeners() {
@@ -48,10 +48,10 @@ export default class NotifyPopupView extends Backbone.View {
   }
 
   setupEscapeKey() {
-    $(window).on('keyup', this.onKeyUp);
+    $(window).on('keydown', this.onKeyDown);
   }
 
-  onKeyUp(event) {
+  onKeyDown(event) {
     if (event.which !== 27) return;
     event.preventDefault();
     this.cancelNotify();
@@ -138,6 +138,8 @@ export default class NotifyPopupView extends Backbone.View {
     $('html').addClass('notify');
 
     this.$el.addClass('anim-show-before');
+    // Set focus to first accessible element
+    a11y.focusFirst(this.$('.notify__popup'), { defer: false });
     await transitionNextFrame();
     this.resetNotifySize();
     await transitionNextFrame();
@@ -206,7 +208,8 @@ export default class NotifyPopupView extends Backbone.View {
 
   remove(...args) {
     this.removeSubView();
-    $(window).off('keyup', this.onKeyUp);
+    this.el.removeEventListener('mousedown', this.onShadowClicked, { capture: true });
+    $(window).off('keydown', this.onKeyDown);
     super.remove(...args);
   }