Increase clickable area for inline checkboxes

[brynwhyman]

I think it makes sense to update the styling so the whole cell/padding for column's inline editable checkbox is selectable.

Things to consider when doing this:

• We may need to add a label for the checkbox in order to make it clickable
• The label needs to be accessible and not confuse screenreaders
• The checkbox identifies the column header as its label at the moment, we'd need to change that to the label

[brynwhyman]

Originally raised in: silverstripe/silverstripe-ckan-registry#101

From @ScopeyNZ:

I agree it belongs on GridFieldExtensions. I think there should be a variant (probably through configuration) that allows label-less checkboxes in columns. It can still be screen reader friendly with appropriate html attributes. I personally would prefer that it also involve making the whole table cell the label for the checkbox - ie. making a click anywhere on the cell toggle the checkbox.

[robbieaverill]

cc @nglasl @nyeholt how do you feel about this change?

[nglasl]

@robbieaverill this change sounds good to me. I've used checkboxes in cells previously, and they've always been much nicer to use when the entire cell was clickable. It's also possible to capture this click event in the cell and toggle the checkbox based on that using JS (assuming we can target it reliably); I can't foresee any accessibility issues with that approach since it should remain how it is now for the most part (e.g. keyboard accessible and no label changes). Thoughts?

[robbieaverill]

Yeah sounds good. So it's probably worth checking whether we need to add a label to go with the checkbox for screenreaders - if so, update the styles etc so the label takes up the whole column. If not, we could do as @nglasl suggested and use a JS click handler on the table cell to trigger a change on the checkbox.