Apply accessibility attributes to suggestion template

[dfrencham]

When the suggestion template is customised, the accessibility related attributes are no longer applied.

This results in screen readers not reading the selected element. This behaviour has been observed in JAWS 18 running under Internet Explorer 11.

The Aria-activedescendant attribute is used to link the input text field to the current selection. I have updated dataset.js to apply the id (generated by guid()) in the event a user customises the template.

Example of user generated template:

templates: {
    suggestion: function (data) {
        if (data.isUserEntered) {
            return '<div style="font-weight:bold">Use entered address:<br/>' + data.searchPickListDescription + '</div>';
        }
        else {
            return '<div class="matching-address">' + data.searchPickListDescription + '</div>';
        }
    }
}

[jlbooker]

👍 Thanks @dfrencham

@colinrotherham, Any chance you'd have time to review this?

[colinrotherham]

Hi @jlbooker, @dfrencham,

Sorry it's been a while since I contributed to this project. The change looks pretty good, but typeahead.js has got a good test suite. Can you add tests added for this change?

Without tests, there's nothing to stop this change (accidentally) being broken in future.

[dfrencham]

Hi @colinrotherham,

No problem I'll add tests later today.

[colinrotherham]

I must also add my attention's been elsewhere, the UK Government Digital Service accessible-autocomplete component has recently been tested by the Digital Accessibility Centre.

Testing has been carried out with JAWS, Dragon NaturallySpeaking, Zoomtext, VoiceOver, NVDA.

Blog posts here:

Initial launch
https://designnotes.blog.gov.uk/2017/04/20/were-building-an-autocomplete/

Follow up this week
https://accessibility.blog.gov.uk/2018/05/15/what-we-learned-from-getting-our-autocomplete-tested-for-accessibility/

Some great tips in there for this repo too. Keep up the good work.

//cc @edwardhorsford

[dfrencham]

@colinrotherham I've added a couple of unit tests.

I've seen your gov.uk autocomplete - I've actually emailed the link to my co-workers a few months ago as a potential replacement auto complete component. Excellent work! 👍

We currently use the (old) twitter-autocomplete in our production environment. We have a lot of event handlers adding various aria roles and attributes to allow JAWS/NVDA compatibility.

Switching to this fork of that component solves some async issues around JAWS/IE, and lets me remove all the custom event handlers (as you are adding all the accessible markup).

For reference, we are using this component on some Australia government applications with user counts in the millions.

[colinrotherham]

Thanks @dfrencham that's great. Always good to hear.

@jlbooker I'm not set up with Grunt anymore, but I'm happy if you say everything passes 👍

[dfrencham]

Any updates on this? Thanks

[colinrotherham]

Hi @dfrencham, I don't have permission to approve this merge without @jlbooker sorry.

Can you npm publish under a namespace for now so you can bundle it into your sites?

[dfrencham]

I already have it deployed on our sites 👍

When it is merged, then I'll move our sites to use the main version. I'll just have to be patient and wait for @jlbooker to have some availability. Cheers.

[jlbooker]

Thanks! @dfrencham, and appreciate your patience. Sorry for the long delay!

[dfrencham]

@jlbooker Better late than never! Cheers mate.