Accessibility updates #264 - Add aria attributes to better support screen readers and keyboard navigation

[cooperfellows]

Summary

This adds a good chunk of ARIA attributes and other related attributes to the chosen elements to move towards making Chosen more accessible.

ARIA Labels and Other Helpful Attributes

• Adds the following aria elements to the search input box
  • role="combobox"
  • aria-haspopup (implicit when using the combobox role)
  • aria-expanded
  • aria-activedescendant="id_of_highlighted_option"
  • aria-owns="id_of_list_of_options"
  • aria-autocomplete="list"
  • aria-labeledby="id_of_field_label"
• Adds the following attributes to the list of options
  • id
  • role="listbox"
• Adds the following attributes to each individual option in the list of options
  • id
  • role="option"
  • aria-busy

Managing State

• Managing the aria-expanded attribute
  • In order to indicate when the search results should be relevant to assitive technology, we need to toggle the aria-expanded attribute as fields are activated/deactivated.
  • The easiest way to do this (AFAIK) is to adjust the attribute during the close_field and activate_field methods.
  • A simple switch from true to false or false to true in each of these methods is sufficient enough to keep the state updated

A complete description of the changes made, with the reasoning behind each attribute is available here:

• https://github.com/harvesthq/chosen/issues/264#issuecomment-215124540

References

• Accessibility issues with chosen #264

[tjschuck]

Thanks @cooperfellows!

Just linking a couple more related PRs: #2013 and #2047

[cooperfellows]

@tjschuck Happy to help, but I think there is a bug in the chosen.prototype.coffee. The build process flagged in in the detailed output, but claims it passed anyway. Let me take a look at it and get back to you.

TypeError: 'undefined' is not a function (evaluating 'this.search_field.attr("aria-expanded", true)') at

TypeError: 'undefined' is not a function (evaluating 'this.result_highlight.attr("id")') at

[stof]

.attr is a jquery method. Using it in the prototype version is wrong.

[stof]

btw, you used the proper Prototype methods in other places dealing with attributes, so this looks weird to me.

[cooperfellows]

Yea, I'm not a Prototype guy, I am seeing some other issues with the attribute values. It looks like I should be passing string "true" and string "false" not the boolean. At least according to:

• https://github.com/sstephenson/prototype/blob/5fddd3e/src/prototype/dom/dom.js#L2385

Working on an update now.

[cooperfellows]

I'm sorry this got so ugly. I was trying to finish this up before I take off for a week so I've been rushing things a bit more than I would like to. I missed one other .attr call which I've now corrected.

Let me know what else you want from my end, happy to help when I can. Thanks for the response and the pointers.

[miconley]

@pfiller Have you and your team taken a look? My team prefers to use this library but cannot until it's A11y-ready. Thanks!

[arvisto]

Hi Cooperfellows, could you give an update on your plans for the future of this pull request?

[cooperfellows]

Hi @arvisto I haven't been keeping this up to date with any other changes in Chosen. I have been using a version with all the changes I made in this PR in several of our production applications without any known issues.

To be clear though, not hearing about any issues does not mean there are none. Unfortunately I am too busy to make any updates to this for at least the next 6 months (some major projects at work). So for now this will most likely remain stagnant.

[arvisto]

@cooperfellows Thank you for the update. Hopefully these changes get merged in at some point, chosen would benefit greatly from adhering to accessibility standards, as most Canadian companies that have anything to do with the government have to adhere by law. But I think I'm preaching to the choir.

[ckpicker]

@cooperfellows Nicely done! Any idea when this is going to be merged? I would love to start using this asap.