Improve screen reader support, ARIA etc

[colinrotherham]

The UK Home office (and Department for Work and Pensions) have been maintaining a fork of the old—abandoned—Twitter branch for a little while.

We're using the typeahead in a number of our services for searching for countries. We'd be interested in you pulling in our additional ARIA support for this fork.

It includes these changes:

1. Add an id attribute to each suggestion item
2. Add role="option" to each suggestion item
3. Add role="listbox" to the suggestions wrapper
4. Add role="combobox" to the main input field
5. Update aria-activedescendant on the input each time a suggestion is arrow-keyed etc
6. Add a instructional status message (role="status", aria-live set to polite)
7. Update dependencies (tests all pass, PhantomJS now runs on macOS Sierra)

What do you think?

[colinrotherham]

One note to add, due to grunt-sed needing grunt@~0.4, I've replaced it with grunt-replace.

This allowed me to upgrade the other dependencies (e.g. newer and better performing grunt-contrib-uglify) without being held back.

[jlbooker]

👍 Looks good to me, and thanks for the accessibility improvements!

[jlbooker]

@corejavascript/collaborators Can we get another review before we merge this?

[easternbloc]

[colinrotherham]

That's great, thanks.

Be wary about your other pull requests though, e.g. #54

An auto select feature may interrupt the "use up and down arrow keys to navigate" messaging we're now giving to screen readers. Pressing down may jump to the 2nd result, skipping the 1st one.

[jlbooker]

@colinrotherham Thanks for the heads up on that. Perhaps we should add the auto-select feature as an option (not enabled by default), and make a note of the potential issue in the docs.

[jlbooker]

Merging this, since we haven't heard from any other reviewers.

[colinrotherham]

Thanks @jlbooker

[A6Brgeuka]

Hey there, thanks for this feature
how can I hide this message, it breaks my design
I want to do it through config

@colinrotherham ^^

[colinrotherham]

@A6Brgeuka That content is needed for screen readers. It announces that results are available, otherwise it's not obvious.

Use the .visuallyhidden class to hide it for sighted people?

Something like:

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}