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);

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sherakama’s picture

Issue summary: View changes
drunken monkey’s picture

Issue tags: +Accessibility

Did 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.

mgifford’s picture

Issue tags: +aria

Great 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

mgifford’s picture

mgifford’s picture

Adding the issue in Core with Datalists.

drunken monkey’s picture

Status: Active » Needs review
FileSize
700 bytes

@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!

sherakama’s picture

FileSize
1.37 KB

This 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.

mgifford’s picture

@drunken monkey I'm still looking into this. It seems reasonable, but haven't run into this pattern before.

drunken monkey’s picture

FileSize
791 bytes

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.

Makes 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).

sherakama’s picture

Status: Needs review » Reviewed & tested by the community

#9 Makes sense to me.

Thanks for this. Lets get these patches in.

drunken monkey’s picture

Status: Reviewed & tested by the community » Fixed

Excellent, good to hear, thanks for reviewing!
Committed.
Thanks again, everyone!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

joaogarin’s picture

Component: Code » General code

Hello,

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