From e18a461298bf0cb65c91c0faf278ab21e63f3641 Mon Sep 17 00:00:00 2001
From: Marius Olbertz <marius.olbertz@gmail.com>
Date: Thu, 7 Jul 2016 17:42:59 +0200
Subject: [PATCH] Enhanced keyboard navigation for Offcanvas.

On open not the first element within the side panel, but the whole panel should receive focus.
If the first interactive element is focussed the user might miss some content above it, e.g. the panel heading.
Also added usage of handleKey() to the component to close the panel.
Moved the panel focussing outside of the transitionEnd listener because this was never called and it also works outside...
---
 js/foundation.offcanvas.js | 55 +++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 5e7b3cf8f..1ab73c8f8 100644
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -27,7 +27,11 @@ class OffCanvas {
     this._init();
     this._events();
 
-    Foundation.registerPlugin(this, 'OffCanvas');
+    Foundation.registerPlugin(this, 'OffCanvas')
+    Foundation.Keyboard.register('OffCanvas', {
+      'ESCAPE': 'close'
+    });
+
   }
 
   /**
@@ -193,13 +197,16 @@ class OffCanvas {
     }
 
     if (this.options.autoFocus) {
-      this.$element.one(Foundation.transitionend(this.$element), function() {
-        _this.$element.find('a, button').eq(0).focus();
-      });
+      this.$element.attr('tabindex', '-1');
+      this.$element.focus();
+      
+      /*this.$element.one(Foundation.transitionend(this.$element), function() {
+        _this.$element.focus();
+      });*/
     }
 
     if (this.options.trapFocus) {
-      $('[data-off-canvas-content]').attr('tabindex', '-1');
+      this.$element.attr('tabindex', '-1');
       this._trapFocus();
     }
   }
@@ -214,15 +221,14 @@ class OffCanvas {
         last = focusable.eq(-1);
 
     focusable.off('.zf.offcanvas').on('keydown.zf.offcanvas', function(e) {
-      if (e.which === 9 || e.keycode === 9) {
-        if (e.target === last[0] && !e.shiftKey) {
-          e.preventDefault();
-          first.focus();
-        }
-        if (e.target === first[0] && e.shiftKey) {
-          e.preventDefault();
-          last.focus();
-        }
+      var key = Foundation.Keyboard.parseKey(e);
+      if (key === 'TAB' && e.target === last[0]) {
+        e.preventDefault();
+        first.focus();
+      }
+      if (key === 'SHIFT_TAB' && e.target === first[0]) {
+        e.preventDefault();
+        last.focus();
       }
     });
   }
@@ -304,13 +310,18 @@ class OffCanvas {
    * @function
    * @private
    */
-  _handleKeyboard(event) {
-    if (event.which !== 27) return;
-
-    event.stopPropagation();
-    event.preventDefault();
-    this.close();
-    this.$lastTrigger.focus();
+  _handleKeyboard(e) {
+    Foundation.Keyboard.handleKey(e, 'OffCanvas', {
+      close: () => {
+        this.close();
+        this.$lastTrigger.focus();
+        return true;
+      },
+      handled: () => {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    });
   }
 
   /**
@@ -370,7 +381,7 @@ OffCanvas.defaults = {
   revealOn: null,
 
   /**
-   * Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
+   * Force focus to the offcanvas on open. If true, will focus the opening trigger on close. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.
    * @option
    * @example true
    */
-- 
2.47.2