Commit f174e9cc authored by webchick's avatar webchick

#448292 by Frank Ralf, David_Rothstein, mgifford, Everett Zufelt, Bojhan,...

#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.
parent 453fab02
......@@ -4277,6 +4277,7 @@ function drupal_add_tabledrag($table_id, $action, $relationship, $group, $subgro
// Add the table drag JavaScript to the page before the module JavaScript
// to ensure that table drag behaviors are registered before any module
// uses it.
drupal_add_js('misc/jquery.cookie.js', array('weight' => JS_DEFAULT - 2));
drupal_add_js('misc/tabledrag.js', array('weight' => JS_DEFAULT - 1));
$js_added = TRUE;
}
......
......@@ -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
});
};
/**
......
......@@ -80,6 +80,8 @@ function block_admin_display_form($form, &$form_state, $blocks, $theme) {
'#type' => 'weight',
'#default_value' => $block['weight'],
'#delta' => $weight_delta,
'#title_display' => 'invisible',
'#title' => t('Weight for @row', array('@row' => $block['info'])),
);
$form[$key]['region'] = array(
'#type' => 'select',
......
......@@ -137,7 +137,9 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
'#type' => 'textfield',
'#default_value' => $weight,
'#size' => 3,
),
'#title_display' => 'invisible',
'#title' => t('Weight for @row', array('@row' => $instance['label'])),
),
'hidden_name' => array(
'#type' => 'hidden',
'#default_value' => $instance['field_name'],
......@@ -171,6 +173,8 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
'#type' => 'textfield',
'#default_value' => $weight,
'#size' => 3,
'#title_display' => 'invisible',
'#title' => t('Weight for @row', array('@row' => $extra_field['label'])),
),
'edit' => array(
'#markup' => isset($extra_field['edit']) ? $extra_field['edit'] : '',
......@@ -226,6 +230,8 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
'#type' => 'textfield',
'#default_value' => $weight,
'#size' => 3,
'#title_display' => 'invisible',
'#title' => t('Weight for new field'),
),
'hidden_name' => array(
'#type' => 'hidden',
......@@ -263,6 +269,8 @@ function field_ui_field_overview_form($form, &$form_state, $entity_type, $bundle
'#type' => 'textfield',
'#default_value' => $weight,
'#size' => 3,
'#title_display' => 'invisible',
'#title' => t('Weight for added field'),
),
'hidden_name' => array(
'#type' => 'hidden',
......
......@@ -106,15 +106,16 @@ function _menu_overview_tree_form($tree) {
'#type' => 'weight',
'#delta' => 50,
'#default_value' => isset($form_state[$mlid]['weight']) ? $form_state[$mlid]['weight'] : $item['weight'],
'#title_display' => 'invisible',
'#title' => t('Weight for @row', array('@row' => $item['title'])),
);
$form[$mlid]['mlid'] = array(
'#type' => 'hidden',
'#value' => $item['mlid'],
);
$form[$mlid]['plid'] = array(
'#type' => 'textfield',
'#type' => 'hidden',
'#default_value' => isset($form_state[$mlid]['plid']) ? $form_state[$mlid]['plid'] : $item['plid'],
'#size' => 6,
);
// Build a list of operations.
$operations = array();
......
......@@ -75,6 +75,9 @@ div.tree-child,
div.tree-child-last {
background-position: -65px center;
}
.tabledrag-toggle-weight-wrapper {
text-align: left; /* RTL */
}
/**
* Multiselect form
......
......@@ -130,6 +130,12 @@ div.tree-child-last {
div.tree-child-horizontal {
background: url(../../misc/tree.png) no-repeat -11px center;
}
.tabledrag-toggle-weight-wrapper {
text-align: right; /* LTR */
}
.tabledrag-toggle-weight {
font-size: 0.9em;
}
/**
* Progress bar
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment