Add keyboard-accessible flexible divider manipulation for Section 508 compliance

Hi,

The dividers inside flexible layouts cannot be manipulated with Panels 6.x-3.8. The following patch makes the dividers keyboard selectable and binds keyboard events to the code that allows altering of the spacers. The end result is that the spacer can be tabbed to with the keyboard and moved left and right with the arrow keys.

RCS file: /home/cvs/edgov_redesign/www_2_1_1/sites/all/modules/panels/plugins/layouts/flexible/flexible-admin.js,v
retrieving revision 1.1.1.1
diff -u -b -B -r1.1.1.1 flexible-admin.js
--- flexible-admin.js   8 Nov 2010 17:19:24 -0000       1.1.1.1
+++ flexible-admin.js   28 Dec 2010 16:09:53 -0000
@@ -189,6 +189,9 @@
   function splitterMove(event) {
     var diff = splitter.startX - event.pageX;
     var moved = 0;

+    if (event.keyCode == 37) diff = 10;
+    if (event.keyCode == 39) diff = -10;
+
     // Bah, javascript has no logical xor operator
     if ((splitter.left_unit && !splitter.right_unit) ||
       (!splitter.left_unit && splitter.right_unit)) {
@@ -355,6 +362,14 @@
     });
   };

+  function splitterKeyPress(event) {
+
+    splitterStart(event);
+    splitterMove(event);
+    splitterEnd(event);
+
+  };
+
   this.getSizes = function() {
     splitter.left_width = $splitter.children('.panels-flexible-splitter-left-width').html();
     splitter.left_scale = $splitter.children('.panels-flexible-splitter-left-scale').html();
@@ -380,8 +396,8 @@
   splitter.right = $(splitter.right_class);

   $splitter
-    .bind("mousedown", splitterStart);
-
+    .bind("mousedown", splitterStart)
+    .bind("keydown", splitterKeyPress);
 };

 /**
Index: flexible.inc
===================================================================
RCS file: /home/cvs/edgov_redesign/www_2_1_1/sites/all/modules/panels/plugins/layouts/flexible/flexible.inc,v
retrieving revision 1.2
diff -u -b -B -r1.2 flexible.inc
--- flexible.inc        30 Nov 2010 19:37:43 -0000      1.2
+++ flexible.inc        28 Dec 2010 16:16:00 -0000
@@ -578,7 +578,8 @@
     $right_class = $left_class;
   }

-  $output = '<div class="panels-flexible-splitter flexible-splitter-for-' . $left_class . '">';
+  $output = '<div tabindex="0"
+    class="panels-flexible-splitter flexible-splitter-for-' . $left_class . '">';

   // Name the left object
   $output .= '<span class="panels-flexible-splitter-left">';