Keyboard control for collapsible blocks.

developmentseed · Oct 20, 2010 · 21f720a · 21f720a
1 parent 7072870
commit 21f720a
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 3 deletions.
diff --git a/ginkgo.css b/ginkgo.css
@@ -15,6 +15,15 @@ object {
 .content-wrapper,
 .block-content { word-wrap:break-word; }
 
+/**
+ * Backport of .element-invisible class from D7.
+ */
+.element-invisible {
+  position:absolute !important;
+  clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip:rect(1px, 1px, 1px, 1px);
+  }
+
 /**
  * "Power" hover classes ==============================================
  */
@@ -34,8 +43,11 @@ table td.active,
 .block .menu a:hover { background-color:#ecf4f8; }
 
 .dropdown-blocks .block-toggle li a:hover,
+.dropdown-blocks .block-toggle li a:focus,
 .dropdown-blocks .block-toggle ul.links li a:hover,
+.dropdown-blocks .block-toggle ul.links li a:focus,
 .dropdown-blocks .block-toggle div.item-list li a:hover,
+.dropdown-blocks .block-toggle div.item-list li a:focus,
 .pager li.pager-current,
 .more-link a:hover {
   color:#fff;

diff --git a/js/ginkgo.js b/js/ginkgo.js
@@ -105,16 +105,38 @@ Drupal.behaviors.ginkgo = function (context) {
   $('div.toggle-blocks:not(.processed)')
     .addClass('processed')
     .each(function() {
+      // Click handler.
       $('.block-title', this).click(function() {
-        if (!$(this).is('.toggle-active')) {
+        var title = $(this);
+        if (!title.is('.toggle-active')) {
           $('div.toggle-blocks .block-title').removeClass('toggle-active');
           $('div.toggle-blocks div.block-toggle div.block-content').hide();
-          $(this).addClass('toggle-active').siblings('div.block-content').show();
+          title.addClass('toggle-active').siblings('div.block-content').show();
         }
         else {
-          $(this).removeClass('toggle-active').siblings('div.block-content').hide();
+          title.removeClass('toggle-active').siblings('div.block-content').hide();
         }
         return false;
       });
+
+      // Focus handler for equivalent keyboard control.
+      $('.block-title > a.toggle', this).focus(function() {
+        var title = $(this).parent();
+        $('div.toggle-blocks .block-title').removeClass('toggle-active');
+        $('div.toggle-blocks div.block-toggle div.block-content').hide();
+        title.addClass('toggle-active').siblings('div.block-content').show();
+        return false;
+      });
+    });
+    // Attach handler to all elements that might receive focus. If they are not
+    // in an actively toggled block we can assume that focus has "left" that
+    // block and hide it.
+    $('body:not(.ginkgoProcessed)').each(function() {
+        $(this).addClass('.ginkgoProcessed');
+        $('a, input, textarea, select', this).focus(function() {
+            if (!$(this).parents('.block:has(.toggle-active)').size()) {
+                $('.toggle-active').removeClass('toggle-active').siblings('div.block-content').hide();
+            }
+        });
     });
 };
diff --git a/template.php b/template.php
@@ -111,6 +111,9 @@ function ginkgo_preprocess_block(&$vars) {
   // i.e. show its contents rather than a toggle trigger label.
   if (in_array($vars['block']->region, array('header', 'page_tools', 'space_tools'))) {
     $vars['attr']['class'] .= empty($vars['block']->subject) ? ' block-widget' : ' block-toggle';
+
+    // Add invisible link element for toggling block via keyboard.
+    $vars['title'] = l(t('Toggle'), $_GET['q'], array('fragment' => $vars['attr']['id'], 'attributes' => array('class' => 'toggle element-invisible'))) . $vars['title'];
   }
   if ($vars['block']->region === 'palette') {
     // Palette region requires module-level jQuery UI, Cookie, JSON includes.

diff --git a/templates/designkit.tpl.php b/templates/designkit.tpl.php
@@ -1,8 +1,11 @@
 <style type='text/css'>
 .atrium-welcome-links a:hover,
 .dropdown-blocks .block-toggle li a:hover,
+.dropdown-blocks .block-toggle li a:focus,
 .dropdown-blocks .block-toggle ul.links li a:hover,
+.dropdown-blocks .block-toggle ul.links li a:focus,
 .dropdown-blocks .block-toggle .item-list li a:hover,
+.dropdown-blocks .block-toggle .item-list li a:focus,
 .pager li.pager-current,
 .more-link a:hover,
 #global,