Using hint with enhanceSelectElement

[ShahSheel]

I have read through the documentation and using hint and there is no option to specify a hint using a enhanceSelectElement

Eg:

accessibleAutocomplete.enhanceSelectElement({defaultValue: '',
  selectElement: document.querySelector('#foobar'),
  hint: 'Begin searching. Use arrow keys to navigate options. Press Enter to select.' //Doesn't work
});

Using a <label> with ariaDescribeBy property will not work as the current functionality seems to prevent screen readers announcing this

<label class="form-label" for="foobar">Foobar</label> 
<span class="form-hint" id="hint-instructions">Begin searching. Use arrow keys to navigate options. Press Enter to select.</span> 
<select aria-describedby="hint-instructions" aria-label="Select a foobar" class="form-control" id="foobar" name="foobar" role="combobox">
    <option value="1">1</option>
</select>

If removing the JS function, then will announce properly as normal but the issue is it needs to use enhanceSelectElement.

[ShahSheel]

Any insight into how to tackle this issue? Were blocked on this from trying to reach compliance at the moment

[edwardhorsford]

We've discussed this a bit on slack, but I'm adding an answer here in case others find this issue.

I think the reason there's no hint option is because enhanceSelectElement is meant for enhancing existing markup. If the existing select you're enhancing has a hint, then it will get copied to the new component.

From our discussions, it sounds like you want the hint that the new component has to be different than the select hint - this isn't supported unfortunately. But you can write your own jus to modify hints however you like.

I think the two ways of doing this would be:

• Before initialising the autocomplete, use js to loop through all selects of type autocomplete on the page, and update their hints with whatever you want.
• After initialising the autocompletes, loop through all autocompletes on the page, and update their hints with whatever you want.

[edwardhorsford]

As an aside: I believe the autocomplete already includes instructions for how to use it for screen reader users. So you shouldn't need to add your own or show them visibily.

It's possible to modify these instructions if you like - it's the config option tAssistiveHint.

[ShahSheel]

Reverted to use 2.0.3 as mentioned in slack as 2.0.4 seems to break.

However this still doesn't get announced with assistive technologies.

Tested on Edge + Chrome using built in MacOS Voice Over.

Seems to be related to: #498 , #567

Demo'd version has the same issue: https://alphagov.github.io/accessible-autocomplete/examples/

 <select class="form-control" id="foo" name="subject">
   <option value="choose" selected>Choose location</option>
   <option value="eastmidlands">East Midlands</option>
   <option value="eastofengland">East of England</option>
   <option value="london">London</option>
   <option value="northeast">North East</option>
   <option value="northwest">North West</option>
   <option value="southeast">South East</option>
   <option value="southwest">South West</option>
   <option value="westmidlands">West Midlands</option>
   <option value="yorkshire">Yorkshire and the Humber</option>
 </select>

accessibleAutocomplete.enhanceSelectElement({
  selectElement: document.querySelector('#foo'),
});

This renders the autocomplete-progressiveEnhancement__assistiveHint span and updates input

<input 
aria-expanded="false"
aria-owns="autocomplete-progressiveEnhancement__listbox"
aria-autocomplete="both" 
aria-describedby="autocomplete-progressiveEnhancement__assistiveHint"
autocomplete="off" 
class="autocomplete__input autocomplete__input--default" 
id="autocomplete-progressiveEnhancement" 
name="" 
placeholder="" 
type="text" 
role="combobox" 
data-dashlane-rid="d60c70c61aab1431" 
data-form-type="">

<span id="autocomplete-progressiveEnhancement__assistiveHint" style="display: none;">When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.</span>

[ShahSheel]

Thanks for the help @edwardhorsford through slack.

Solution is to create a mutationObserver as this current component removes aria-describedby if the input field has a value.

Rough code can be used here:

  const inputElement = document.querySelector('.autocomplete__input');
   const observer = new MutationObserver((mutationsList) => {
     for (const mutation of mutationsList) {
       if (mutation.type === 'attributes' && mutation.attributeName === 'aria-describedby' && mutation.target === inputElement) {
         const hasAriaDescribedBy = inputElement.hasAttribute('aria-describedby');
         if (!hasAriaDescribedBy) {
           inputElement.setAttribute('aria-describedby', 'location__assistiveHint');
           break;
         }
       }

     }
   });
   observer.observe(inputElement, { attributes: true });