Hello,
A recent thread discussion on autocomplete accessibility and search has identified some conventions that are slightly different from those in this module and Drupal. I am asking for the following changes:
1. Change the autocomplete text field's role to combobox
2. Change the parent wrapper of the autocomplete text field's role to 'search' instead of 'application'
At the moment I am accomplishing these items through a form alter. For item number 1 it was pretty easy. In hook_form_alter():
...
$form["search_api_views_fulltext"]["#attributes"]["role"] = "combobox";
...
#2 Was a bit trickier. It looks like Drupal's autocomplete.js file is the culprit for adding the application role. To change this I attached a new javascript file to the autocomplete field and added a Drupal attach behaviour that ran after autocomplete.
In hook_form_alter()
$form["search_api_views_fulltext"]["#attached"]['js'][] = drupal_get_path("module", "my_module") . "/my_module.js";
In my_module.js
(function ($) {
/**
* Attaches the autocomplete behavior to all required fields.
*/
Drupal.behaviors.my_module = {
attach: function (context, settings) {
// Change the autocomplete search box container role to 'search'
// ----------------------------------------------------------------
var input = $("input[role='combobox'].form-autocomplete", context);
if (!input.length) {
return;
}
var parent = input.parent();
parent.attr("role", "search");
// ----------------------------------------------------------------
}
};
})(jQuery);
Comment | File | Size | Author |
---|---|---|---|
#9 | 2458629-9--aria_roles.patch | 791 bytes | drunken monkey |
#7 | 2458629-7--aria_roles.patch | 1.37 KB | sherakama |
#6 | 2458629-6--aria_roles.patch | 700 bytes | drunken monkey |
Comments
Comment #1
sherakama CreditAttribution: sherakama commentedComment #2
drunken monkeyDid you also create an issue in Drupal Core? If so, could you please provide a link to it? It would be great if we could just follow Drupal Core behavior there.
Accessibility is definitely important, but as I'm not very familiar with it I don't just want to make changes I don't understand, risking to make things worse rather than better. And in Core, I'd hope enough knowledgable people would chime in.
Comment #3
mgiffordGreat that Graham Armfield of Coolfields.co.uk started that thread. He's a big WordPress guy. Glad they are looking at this.
In Drupal 8 we're just leveraging jQuery UI at the moment (which is recommended in the thread). A lot was done in Drupal 7 to improve the autocomplete, but in general they are pretty bad in most systems. Drupal is pretty good, but there's always room for improvement.
There have been a few changes to ARIA since Drupal 7 Core was released.
Links referenced from that thread include:
http://www.w3.org/TR/wai-aria/roles#combobox
http://whatsock.com/tsg/ - See the ARIA Combobox for link for more.
http://jqueryui.com/autocomplete/#custom-data - in D8
http://assets.cms.gov/resources/framework/3.3/Pages/#autocomplete
It would be good to look at Comboboxes as well as the example from the USA gov.
Also worth looking at:
http://wet-boew.github.io/wet-boew/demos/datalist/datalist-en.html
Comment #4
mgiffordAnother option worth looking at is datalists http://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-e...
Comment #5
mgiffordAdding the issue in Core with Datalists.
Comment #6
drunken monkey@mgifford: Thanks for chiming in! So, do the suggestions from the original post make sense to you?
As said, I don't know much about ARIA, so I'd just like some confirmation.
After reading up on it a bit, though, they do seem to make sense to me, so attached is a patch that should implement them. (We are nearing the point where it's cleaner to just copy-paste and overwrite the whole Core
autocomplete.js
file, but whatever …)Please test whether this results in the desired changes, and keeps working for you!
Comment #7
sherakama CreditAttribution: sherakama commentedThis looks great for the search api.
I think it needs a slight change. Just in case there is another autocomplete field on the same page as the search autocomplete field I feel it is important to set the combobox role on the SearchAPIAutocompleteSearch:alterElement method and only on this field set the parent wrapper's role to search. There may be another autocomplete that is not a search.
Patch attached.
Comment #8
mgifford@drunken monkey I'm still looking into this. It seems reasonable, but haven't run into this pattern before.
Comment #9
drunken monkeyMakes sense, you're right. However, based on #2503613-1: Fix issues with multiple search fields on the same page, an (in my opinion) even better solution is possible, because we can easily recognize which autocomplete fields come from this module. Patch attached.
This also doesn't set the
role
attribute if Javascript is disabled, which I think is important (since without Javscript, it's just a textfield, no combobox).Comment #10
sherakama CreditAttribution: sherakama commented#9 Makes sense to me.
Thanks for this. Lets get these patches in.
Comment #11
drunken monkeyExcellent, good to hear, thanks for reviewing!
Committed.
Thanks again, everyone!
Comment #14
joaogarin CreditAttribution: joaogarin at jobiqo - job board technology commentedHello,
I am currently working on a site that focuses on accessibility, currently the only accessibility issue I have is with this particular input. Here is the info for this https://dequeuniversity.com/rules/axe/2.4/aria-required-children?applica...
Its essentially that an element with the combobox role should have a listbox child associated.
maybe one of you guys has some official info on why this was added? or how it could / should be fixed? I will try to find out more as well, and if and when I find it will gladly provide a patch.
Cheers
Joao Garin