When TABing through the page if at least one value has already been added, no label is communicated to ATs.

[dac514]

During a recent accessibility audit, we were told that, when TABing through the page if at least one value has already been added, no label is communicated to ATs.

Test case:

<div class="custom-metadata-field taxonomy_multi_select" data-slug="pb_authors">
  <label for="pb_authors">Author(s)</label>
  <div class="pb_authors" id="pb_authors-1">
    <select name="pb_authors[]" id="pb_authors" class="custom-metadata-select2" data-placeholder="Choose author(s)..." multiple>
      <option value="nicolo-machiavelli" selected='selected'>Nicolo Machiavelli</option>
      <option value="sheldon">Sheldon Smith</option></select>
  </div>
  <span class="description">
    <a class="button" href="edit-tags.php?taxonomy=contributor">Create New Contributor</a>
  </span>
</div>

$custom_metadata_field.find( '.custom-metadata-select2' ).each(function(index) {
  $(this).select2({ placeholder : $(this).attr('data-placeholder'), allowClear : true });
});

Executive summary: selected='selected'

The reason is because TABing lands the user on a .select2-search__field input. It currently renders like this in Chrome like:

<input class="select2-search__field" type="text" tabindex="0" autocomplete="off" 
autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" 
aria-autocomplete="list" placeholder="" style="width: 0.75em;">

(Looks different when no item is selected)

<input class="select2-search__field" type="text" tabindex="0" autocomplete="off" 
autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" 
aria-autocomplete="list" placeholder="Choose author(s)..." style="width: 398px;">

Maybe use text from <label for="xxx"> because <select id="xxx" is known? Maybe an aria-label="<placeholder>"? Better ideas?