Accessibility updates #264 - Add aria attributes to better support screen readers and keyboard navigation #2596
Conversation
|
Thanks @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.
|
|
|
|
btw, you used the proper Prototype methods in other places dealing with attributes, so this looks weird to me. |
|
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: Working on an update now. |
|
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. |
|
@pfiller Have you and your team taken a look? My team prefers to use this library but cannot until it's A11y-ready. Thanks! |
|
Hi Cooperfellows, could you give an update on your plans for the future of this pull request? |
|
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. |
|
@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. |
|
@cooperfellows Nicely done! Any idea when this is going to be merged? I would love to start using this asap. |
Changes inspired by kirstenmalin@4d0da63 Use the label element, aria-label, or aria-labelledby attributes from the select box for the text input field. Add attributes and ids such that a screen reader can know which element in the search results is highlighted so that it can be read: Attributes on the text input: aria-haspopup="true" aria-expanded="true" (needs to be changed dynamically as the field is activated/deactivated) role="combobox" aria-autocomplete="list" aria-owns="id_of_list_of_options" aria-activedescendant="id_of_highlighted_option" (change this value programatically when the highlighted option changes) aria-labeledby="id_of_field_label" Attributes on the list of options: id for use in the aria-owns attribute on the input Attributes on each option: role="option" id for use in the aria-activedescendant attribute on the input
Changes inspired by kirstenmalin@4d0da63 Use the label element, aria-label, or aria-labelledby attributes from the select box for the text input field. Add attributes and ids such that a screen reader can know which element in the search results is highlighted so that it can be read: Attributes on the text input: aria-haspopup="true" aria-expanded="false" (needs to be changed dynamically as the field is activated/deactivated) role="combobox" aria-autocomplete="list" aria-owns="id_of_list_of_options" aria-activedescendant="id_of_highlighted_option" (change this value programatically when the highlighted option changes) aria-labeledby="id_of_field_label" Attributes on the list of options: id for use in the aria-owns attribute on the input Attributes on each option: role="option" id for use in the aria-activedescendant attribute on the input
This is simply a pass through to the winnow_results function. There is an A11Y reason behind this, when a page loads, and chosen is activated, the results list is empty, so the aria labels are pointing to an empty list, which is flagged as an error in many web scanners. As soon as the results list is built (the first time the field is activated) the scanners stop complaining. The reason I chose to add it as a trigger, is for dynamic select lists. Normally, chosen:updated would be used when options are inserted, the problem is that you can't use chosen:updated until the results list has been built once, because it doesn't actually generate the results list. I have decided NOT to force a build on initialization to avoid adding overhead for those who don't need the A11Y work. Instead, the trigger needs to be called in your script wherever Chosen is initialized. If there is a better way to build the options list than this, please let me know, I am admittedly new to the Chosen source code.
Default to busy since there are no results until the field is activated. Upon activation of the field, set aria-busy to false.
Also add missing role="listbox" to chosen-results element
Since we are using aria-busy, there is no reason to build out the results early like before.
Was not hitting the right element in previous commit.
Fix incorrect syntax in prototype.coffee file when writing attribute values. (.writeAtribute, not .attr) According to prototype source (https://github.com/sstephenson/prototype/blob/5fddd3e/src/prototype/dom/dom.js#L2385) passing boolean false will remove the attribute, and passing boolean true will set the value of the attribute to the attribute name, not the value. So pass string "true" and string "false" instead.
Needed to fix prototype readAttribute call. Too used to jQuery...
Not all browsers are implementing this yet
cooperfellows
force-pushed
the
a11y-updates
branch
from
d020ba5 to
373cad2
Compare
cooperfellows
changed the title
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
Managing State
close_fieldandactivate_fieldmethods.A complete description of the changes made, with the reasoning behind each attribute is available here:
References