[5.2] Awesomplete accessibility fix

[JackKellyUK]

Summary of Changes

Awesomplete is raising a Serious issue in axe for a missing title / aria-label attribute.

Added title attribute to results list.

There is an open issue about this, a fix looks to be implemented with the listLabel property, but it is currently unreleased.

Testing Instructions

• Setup Smart Search > Search menu item (Smart Search > Search Suggestions global setting must be enabled)
• Run axe browser plugin / find awesomplete list ul and check for title / aria-label attribute

Actual result BEFORE applying this Pull Request

No title / aria-label attribute present on Awesomplete list

Expected result AFTER applying this Pull Request

Title attribute present on Awesomplete list

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[brianteeman]

What am I missing here as I dont see an accessibility issue

[JackKellyUK]

What am I missing here as I dont see an accessibility issue

If you enter a search term that populates the list you should see that the name property is blank.

[dgrammatiko]

@JackKellyUK right now the label you're applying will only work for English language. What I'll suggest is either

• extend the Joomla.getOptions('finder-search') to pass also the translated string for the label
• or use a data-ul-label="<?php echo Text::_('SOME_STRING'); ?>" and grab the text from there

Although I'm the original author of the script (#21438) I think the whole script could be rewritten with way less code (eg the DOMContentLoaded event is harmful since the script is loaded either as a module or deferred, etc)

[wilsonge]

What am I missing here as I dont see an accessibility issue

Not sure. But wouldn't this be exposed once you've entered some text

[JackKellyUK]

@JackKellyUK right now the label you're applying will only work for English language. What I'll suggest is either

• extend the Joomla.getOptions('finder-search') to pass also the translated string for the label
• or use a data-ul-label="<?php echo Text::_('SOME_STRING'); ?>" and grab the text from there

Although I'm the original author of the script (#21438) I think the whole script could be rewritten with way less code (eg the DOMContentLoaded event is harmful since the script is loaded either as a module or deferred, etc)

Thanks for the suggestion. Does this implementation look correct to you? 8eefbd4

[dgrammatiko]

Thanks for the suggestion. Does this implementation look correct to you? 8eefbd4

LGTM

[brianteeman]

The new string should probably just be "Search Results" - otherwise it will be "list of Results list"

[HLeithner]

This pull request has been automatically rebased to 4.3-dev.

[obuisard]

Awesomplete has not been updated in over 3 years, although the issue has been fixed in that library...

[dgrammatiko]

Joomla is using the latest version:

joomla-cms/package.json

Line 45 in 87012fa

"awesomplete": "^1.1.5",

https://www.npmjs.com/package/awesomplete?activeTab=versions

[obuisard]

Joomla is using the latest version:

joomla-cms/package.json

Line 45 in 87012fa

"awesomplete": "^1.1.5",

https://www.npmjs.com/package/awesomplete?activeTab=versions

Indeed, which means the fix that has been done in that library is not included in Joomla, therefore the fix here is still relevant.

[brianteeman]

i must be missing something as i dont see any fix upstream just an open issue

[obuisard]

i must be missing something as i dont see any fix upstream just an open issue

No problem, Brian @brianteeman. My understanding is this:

At the Awesomplete project, has been created a PR LeaVerou/awesomplete#17200 that fixes the issue we are having in Joomla. Because our issue comes from the library we are using apparently. The PR that fixes the issue in Awesomplete has been merged, but after 1.1.5 was released, which is the version we are using (but also the last official update).

[HLeithner]

This pull request has been automatically rebased to 4.4-dev.

[drmenzelit]

After years of inactivity there is a new version of Awesomplete available: 1.1.7
https://www.npmjs.com/package/awesomplete?activeTab=versions

We should check, if we can update it in Joomla. @dgrammatiko what do you think?

[dgrammatiko]

The 1.1.7 has solved this with: LeaVerou/awesomplete@3c7ee84

	configure(this, {
		minChars: 2,
		maxItems: 10,
		autoFirst: false,
		data: _.DATA,
		filter: _.FILTER_CONTAINS,
		sort: o.sort === false ? false : _.SORT_BYLENGTH,
		container: _.CONTAINER,
		item: _.ITEM,
		replace: _.REPLACE,
		tabSelect: false,
		listLabel: "Results List", // <-- this
		statusNoResults: "No results found",
		statusXResults: "{0} results found", // uses index placeholder {0}
		statusTypeXChar: "Type {0} or more characters for results"
	}, o);

So this PR should just pass the listLabel: Text._('COM_FINDER_SEARCH_FORM_LIST_LABEL') to the initialization of the script. Probably use a FORM_FIELD_AUTOCOMPLETE_RESULTS or something similar (in the global translation files).
Probably it is easier to do another PR

[HLeithner]

This pull request has been automatically rebased to 5.2-dev.

[Hackwar]

@JackKellyUK Can you fix the conflicts and also implemented the requested changes?

[richard67]

Closing in favour of #44756 .

@JackKellyUK Thank you for your contribution.