User tests: Successful: Unsuccessful:
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.
Smart Search > Search
menu item (Smart Search > Search Suggestions
global setting must be enabled)No title / aria-label attribute present on Awesomplete list
Title attribute present on Awesomplete list
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
Status | New | ⇒ | Pending |
Category | ⇒ | JavaScript Repository NPM Change |
Title |
|
@JackKellyUK right now the label you're applying will only work for English language. What I'll suggest is either
Joomla.getOptions('finder-search')
to pass also the translated string for the labeldata-ul-label="<?php echo Text::_('SOME_STRING'); ?>"
and grab the text from thereAlthough 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)
Category | JavaScript Repository NPM Change | ⇒ | JavaScript Repository NPM Change Front End com_finder Language & Strings Modules |
Labels |
Added:
a11y
NPM Resource Changed
?
|
@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 thereAlthough 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
The new string should probably just be "Search Results" - otherwise it will be "list of Results list"
Labels |
Added:
Language Change
|
This pull request has been automatically rebased to 4.3-dev.
Labels |
Added:
bug
PR-4.3-dev
?
Removed: ? |
Awesomplete has not been updated in over 3 years, although the issue has been fixed in that library...
Joomla is using the latest version:
Line 45 in 87012fa
Joomla is using the latest version:
Line 45 in 87012fa
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.
i must be missing something as i dont see any fix upstream just an open issue
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).
This pull request has been automatically rebased to 4.4-dev.
Title |
|
Labels |
Added:
PBF
Small
PR-4.4-dev
Removed: PR-4.3-dev ? |
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?
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
This pull request has been automatically rebased to 5.2-dev.
Title |
|
What am I missing here as I dont see an accessibility issue