Add Aria roles for accesibility

[cibernox]

Accesibility matters. This is a must.

[ghost]

Things you need to consider for accessibility (hint, it's not only aria roles)

• Being able to tab into the component. And respecting the tabindex property.
• Clicking on a label that has the for property set to the id property of the component, should activate the component. (The for, id combo also links the label to the component for the screenreader)
• Support aria-labeledby, aria-describedby and required.
• Needs to respect being disabled when a <fieldset> is set to disabled.

[jmacqueen]

Apologies if I am weighing in with things you already know...

This is a favorite reference for me when doing a11y-friendly work. I cannot recommend it highly enough. It nicely digests the relevant portions of the WCAG suggestions for accessibility AND it's broken down by component type with links to some vanilla JS implementations

https://www.w3.org/TR/wai-aria-practices-1.1/#combobox

The examples aren't a perfect matchup for what you have here, but the Dojo combobox with autocomplete does a really good job and isn't far off. role="combobox" is on the containing <div> and the use of aria-owns and aria-expanded are things I don't see referenced in this issue.

The other advantage of attributes like aria-disabled and aria-selected (as referenced in the Listbox section) is that you can select on them directly in your CSS instead of creating special classes for those states.

[cibernox]

@jmacqueen Thanks for the reference. @martndemus did already some work on it, but this is helpful.

[knownasilya]

Would love required support..

[ghost]

@knownasilya @jmacqueen I have to get back to the WIP pull request, I hope to get back to it this weekend. See #254