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

  1. Review this workaround
  2. Test this workaround against more complex scenarios
  3. If it passes, include in the module's JavaScript file, modules/shs/js/shs.js (unless it belongs elsewhere)
CommentFileSizeAuthor
Capture.PNG14.81 KBtimfletcher

Comments

timfletcher created an issue. See original summary.

timfletcher’s picture

Issue summary: View changes
timfletcher’s picture

Issue summary: View changes
timfletcher’s picture

Title: New select dropdown generated by SHS does not update the corresponding label element » New <select> dropdown generated by SHS does not update the corresponding label element
timfletcher’s picture

Issue summary: View changes