#448292 by Frank Ralf, David_Rothstein, mgifford, Everett Zufelt, Bojhan, mohammed76, et al: Fixed Drag and Drop for table rows is not accessible to screen-reader users.

1 files changed, 101 insertions, 13 deletions

diff --git a/misc/tabledrag.js b/misc/tabledrag.js
index 5ee580ca0..62d8ae011 100644
--- a/misc/tabledrag.js
+++ b/misc/tabledrag.js
@@ -81,10 +81,29 @@ Drupal.tableDrag = function (table, tableSettings) {
 
   // Make each applicable row draggable.
   // Match immediate children of the parent element to allow nesting.
-  $('> tr.draggable, > tbody > tr.draggable', table).each(function() { self.makeDraggable(this); });
+  $('> tr.draggable, > tbody > tr.draggable', table).each(function () { self.makeDraggable(this); });
+
+  // Add a link before the table for users to show or hide weight columns.
+  $(table).before($('<a href="#" class="tabledrag-toggle-weight"></a>')
+    .attr('title', Drupal.t('Re-order rows by numerical weight instead of dragging.'))
+    .click(function () {
+      if ($.cookie('Drupal.tableDrag.showWeight') == 1) {
+        self.hideColumns();
+      }
+      else {
+        self.showColumns();
+      }
+      return false;
+    })
+    .wrap('<div class="tabledrag-toggle-weight-wrapper"></div>')
+    .parent()
+  );
 
-  // Hide columns containing affected form elements.
-  this.hideColumns();
+  // Initialize the specified columns (for example, weight or parent columns)
+  // to show or hide according to user preference. This aids accessibility
+  // so that, e.g., screen reader users can choose to enter weight values and
+  // manipulate form elements directly, rather than using drag-and-drop..
+  self.initColumns();
 
   // Add mouse bindings to the document. The self variable is passed along
   // as event handlers do not have direct access to the tableDrag object.
@@ -93,10 +112,14 @@ Drupal.tableDrag = function (table, tableSettings) {
 };
 
 /**
- * Hide the columns containing form elements according to the settings for
- * this tableDrag instance.
+ * Initialize columns containing form elements to be hidden by default,
+ * according to the settings for this tableDrag instance.
+ *
+ * Identify and mark each cell with a CSS class so we can easily toggle
+ * show/hide it. Finally, hide columns if user does not have a
+ * 'Drupal.tableDrag.showWeight' cookie.
  */
-Drupal.tableDrag.prototype.hideColumns = function () {
+Drupal.tableDrag.prototype.initColumns = function () {
   for (var group in this.tableSettings) {
     // Find the first field in this group.
     for (var d in this.tableSettings[group]) {
@@ -108,13 +131,13 @@ Drupal.tableDrag.prototype.hideColumns = function () {
       }
     }
 
-    // Hide the column containing this field.
+    // Mark the column containing this field so it can be hidden.
     if (hidden && cell[0] && cell.css('display') != 'none') {
       // Add 1 to our indexes. The nth-child selector is 1 based, not 0 based.
       // Match immediate children of the parent element to allow nesting.
       var columnIndex = $('> td', cell.parent()).index(cell.get(0)) + 1;
       var headerIndex = $('> td:not(:hidden)', cell.parent()).index(cell.get(0)) + 1;
-      $('> thead > tr, > tbody > tr, > tr', this.table).each(function(){
+      $('> thead > tr, > tbody > tr, > tr', this.table).each(function (){
         var row = $(this);
         var parentTag = row.parent().get(0).tagName.toLowerCase();
         var index = (parentTag == 'thead') ? headerIndex : columnIndex;
@@ -128,18 +151,83 @@ Drupal.tableDrag.prototype.hideColumns = function () {
         if (index > 0) {
           cell = row.children(':nth-child(' + index + ')');
           if (cell[0].colSpan > 1) {
-            // If this cell has a colspan, simply reduce it.
-            cell[0].colSpan = cell[0].colSpan - 1;
+            // If this cell has a colspan, mark it so we can reduce the colspan.
+            $(cell[0]).addClass('tabledrag-has-colspan');
           }
           else {
-            // Hide table body cells, but remove table header cells entirely
-            // (Safari doesn't hide properly).
-            parentTag == 'thead' ? cell.remove() : cell.css('display', 'none');
+            // Mark this cell so we can hide it.
+            $(cell[0]).addClass('tabledrag-hide');
           }
         }
       });
     }
   }
+
+  // Now hide cells and reduce colspans unless cookie indicates previous choice.
+  // Set a cookie if it is not already present.
+  if ($.cookie('Drupal.tableDrag.showWeight') === null) {
+    $.cookie('Drupal.tableDrag.showWeight', 0, {
+      path: Drupal.settings.basePath,
+      // The cookie expires in one year.
+      expires: 365
+    });
+    this.hideColumns();
+  }
+  // Check cookie value and show/hide weight columns accordingly.
+  else {
+    if ($.cookie('Drupal.tableDrag.showWeight') == 1) {
+      this.showColumns();
+    }
+    else {
+      this.hideColumns();
+    }
+  }
+};
+
+/**
+ * Hide the columns containing weight/parent form elements.
+ * Undo showColumns().
+ */
+Drupal.tableDrag.prototype.hideColumns = function () {
+  // Hide weight/parent cells and headers.
+  $('.tabledrag-hide', 'table.tabledrag-processed').css('display', 'none');
+  // Show TableDrag handles.
+  $('.tabledrag-handle', 'table.tabledrag-processed').css('display', '');
+  // Reduce the colspan of any effected multi-span columns.
+  $('.tabledrag-has-colspan', 'table.tabledrag-processed').each(function () {
+    this.colSpan = this.colSpan - 1;
+  });
+  // Change link text.
+  $('.tabledrag-toggle-weight').text(Drupal.t('Show row weights'));
+  // Change cookie.
+  $.cookie('Drupal.tableDrag.showWeight', 0, {
+    path: Drupal.settings.basePath,
+    // The cookie expires in one year.
+    expires: 365
+  });
+};
+
+/**
+ * Show the columns containing weight/parent form elements
+ * Undo hideColumns().
+ */
+Drupal.tableDrag.prototype.showColumns = function () {
+  // Show weight/parent cells and headers.
+  $('.tabledrag-hide', 'table.tabledrag-processed').css('display', '');
+  // Hide TableDrag handles.
+  $('.tabledrag-handle', 'table.tabledrag-processed').css('display', 'none');
+  // Increase the colspan for any columns where it was previously reduced.
+  $('.tabledrag-has-colspan', 'table.tabledrag-processed').each(function () {
+    this.colSpan = this.colSpan + 1;
+  });
+  // Change link text.
+  $('.tabledrag-toggle-weight').text(Drupal.t('Hide row weights'));
+  // Change cookie.
+  $.cookie('Drupal.tableDrag.showWeight', 1, {
+    path: Drupal.settings.basePath,
+    // The cookie expires in one year.
+    expires: 365
+  });
 };
 
 /**