Feature proposal: Copy aria-label attribute to select 2 input field

[cdaveb]

Currently if you set an aria-label attribute on your select menu for a multiple select, the aria-label is not copied to the select2 input field. It would be useful if this could be copied for improved accessibility.

[dagoss]

+1 When checking for WCAG compliance, I noticed that all of those inputs lack a label. I have not yet found a decent workaround for this.

I'd also like to see the aria-labelledby attribute copied from the original <select> to the select2 <input>.

Example

<div class="form-group">
  <label for="my_select" id="my_select_label">My label</label>
  <select id="my_select" aria-labelledby="my_select_label">...</select>
  <!-- copy the aria-labelledby -->
  <input class="select2-search_field" aria-labelledby="my_select_label">
</div>

As a really gross hack, I ended up doing this:

$(".select2-search__field").attr("aria-label", function(){
  return $(this).closest(".form-group").children("label").text()
})

Aside: I don't really understand the point of .select2-hidden_accessible on the original <select> element because it also gets tabindex="-1" and aria-hidden="true".

[Sachin4dotnet]

Hi @dagoss ,
I am not sure how your hack worked for you but its not worked for me. But thanks for the idea you gave.
I have got issue "Label text is empty." while checking for WCAG 2.0 AAA compliances. When I digged into, I found that there is no for the <input type="search"... created. So I have created label dynamically from jQuery by following code -

jQuery(document).ready(function () {
    jQuery(".select2-search__field").each(function () {
        var select_name = "select2-search__field_" + jQuery(this).attr("aria-labelledby");
        // add attribute ID = "select2-search__field_" + its label id
        jQuery(this).attr("id", select_name);
        // find parent <li> and add label for="select2-search__field_" + its label id 
        jQuery(this).closest("li.select2-search").append('<label for="' + select_name + '" class="hide">Test</label></div>');
    });
});

I have added label in parent

but if you have any other tag then you can replace that.

Thanks and appreciate your efforts.

[dagoss]

@Sachin4dotnet It probably didn't work for you because my jquery selector was looking for a container .form-group (I'm using Bootstrap).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kevin-brown]

Reopening this since I think it's a valid accessibility request for Select2.

[WanetaOliviertqf12]

Hi is there a way to set attributes tabindex & aria-hidden on a multiple select, to improved accessibility?

<select class="select2-hidden_accessible" tabindex="-1" aria-hidden="true">

to have

tabindex="0" aria-hidden="false".

As @dagoss mentioned above

Aside: I don't really understand the point of .select2-hidden_accessible on the original element because it also gets tabindex="-1" and aria-hidden="true".

[torronen]

+1 for this issue, it is very important under new accessibility laws for European Union, possibly California and others.

[kevin-brown]

I'm pretty sure the tabindex property is already copied over:

select2/src/js/select2/selection/base.js

Lines 24 to 31 in cd545a4

	if (Utils.GetData(this.$element[0], 'old-tabindex') != null) {
	this._tabindex = Utils.GetData(this.$element[0], 'old-tabindex');
	} else if (this.$element.attr('tabindex') != null) {
	this._tabindex = this.$element.attr('tabindex');
	}
	$selection.attr('title', this.$element.attr('title'));
	$selection.attr('tabindex', this._tabindex);

Aside: I don't really understand the point of .select2-hidden_accessible on the original <select> element because it also gets tabindex="-1" and aria-hidden="true".

Because browsers suck at consistency so we need to allow screen readers to be able to focus on the original <select> so we can re-route it appropriately. We try our best to get it to disappear as much as possible for screen readers but taking it out of the document flow seemed to really mess them up, so we hide it off screen instead. Long history there.

---

This feature request remains open, likely expanding the scope to reasonable ARIA attributes and not just the original aria-label request.

[sidnc86]

Has this issue been addressed yet?

[sidnc86]

I was able to tackle this using the Adapters. Had to write my own "ariaLabelledbyAdapter" and then override the bind() method in case of DropdownAdapter and had to override update() method for SelectionAdapter to get it working.