Add aria-label to div wrapper

[robbiegod]

Is your feature request related to a problem? Please describe. We use a 508 scanner (SortSite) and the results from the scan are: ARIA control has no label. It refers to the div autoComplete wrapper.

<div class="autoComplete_wrapper" role="combobox" aria-owns="lookup-autoComplete" aria-haspopup="true" aria-expanded="false">

Thoroughly Describe the solution you'd like

1, Add a default aria-label value to the autoComplete_wrapper. 2, Add a value to the config that can be set to customize the value of aria-label if developer wants to customize the message.

Something like:

wrapper: true, wrapperlabel: 'My custom aria label',

OR:

wrapper: {
enabled: true, 
ariaLabel: "My custom aria label."
},

Please provide a few use cases for this feature Improves accessibility by giving the screen reader something to announce to the user.

Please Describe alternatives you've considered For the time being, we have added this code to our script, but because it gets added after the autocomplete loads, the SortSite scanner doesn't seem to be able to pick it up.

document.querySelector("#autocompleteInput").addEventListener("init", function (event) {
    var autoCompleteWrapper = document.querySelector(".autoComplete_wrapper");
    if (autoCompleteWrapper) {
        autoCompleteWrapper.setAttribute("aria-label", "Location form autocomplete");
    }
});

I feel its better to have the value the in the config since autoComplete is building that wrapper completely already.