Problem/Motivation
New select field generated by SHS JavaScript does not update the corresponding label.
This is bad for accessibility - the label 'for' attribute currently points to an invisible element (the original select field with style="display:none;"), rather than the one to which it should now relate:
Problem
<label for="edit-field-term-tid">Items</label> <<---- the FOR value refers to the hidden SELECT field
<div class="views-widget">
<div class="form-item form-type-select form-item-field-term-tid shs-wrapper-processed">
<select class="..." id="edit-field-term-tid" name="field_term_tid" style="display: none;">
// options
</select>
<select class="..." id="edit-field-term-tid-select-1" style="display: inline-block;">
// options
</select>
</div>
</div>
Desired solution
<label for="edit-field-term-tid-select-1">Items</label> <<---- the FOR value refers to the exposed SELECT field
<div class="views-widget">
<div class="form-item form-type-select form-item-field-term-tid shs-wrapper-processed">
<select class="..." id="edit-field-term-tid" name="field_term_tid" style="display: none;">
// options
</select>
<select class="..." id="edit-field-term-tid-select-1" style="display: inline-block;">
// options
</select>
</div>
</div>
Proposed resolution
I've fixed this with some simple jQuery in my site's main scripts file, that will only fire when SHS has processed a field.
It will automatically detect if an appropriate matching duplicate element has been added, then grab the label and update the for attribute.
$('.shs-processed').each(function() {
var $this = $(this),
$label = $('label[for="' + $this.attr('id') + '"]');
if ($this.next('select[id^="' + $this.attr('id') + '-"]').length) {
$shsSelect = $this.next('select');
$('label[for="' + $this.attr('id') + '"]').attr('for', $shsSelect.attr('id'));
}
});
Remaining tasks
- Review this workaround
- Test this workaround against more complex scenarios
- If it passes, include in the module's JavaScript file,
modules/shs/js/shs.js (unless it belongs elsewhere)
Comments
Comment #2
timfletcher commentedComment #3
timfletcher commentedComment #4
timfletcher commentedComment #5
timfletcher commented