Bug #103458
open
Epic #98290: [UX] - Keep the house clean
UX inconsistency - the "lens" button on several search bars is disabled until something is entered on the field
0%
Description
The following modules have a "search bar" with a "lens" icon (which is a button)
- DB Check module > full search
- Recycler module
- Configuration module
- Workspaces module
The icon is disabled until something is entered on the input field.
Instead on the list and filelist module, the icon is clickable from the beginning.
[I have not checked other places]
Is there a reason for a different behavior? Should the behavior become more consistent?
Updated by Simon Schaufelberger 9 months ago
- Related to Bug #103457: UI inconsistency - search icon wrong position on Form module added
Updated by Simon Schaufelberger 9 months ago
- Category changed from Backend JavaScript to Backend User Interface
Updated by Simon Schaufelberger 9 months ago
ยท Edited
In these modules there is some JavaScript involved while for the rest it's just plain HTML. I've also noticed that for the Configuration module it's even a real time search. You don't need to submit the form.
Updated by Riccardo De Contardi 9 months ago
- Related to Bug #103459: UI inconsistency - filter search bar on CE wizard and Install tool look different added
Updated by Riccardo De Contardi 9 months ago
Simon Schaufelberger wrote in #note-3:
In these modules there is some JavaScript involved while for the rest it's just plain HTML. I've also noticed that for the Configuration module it's even a real time search. You don't need to submit the form.
Right, my bad. That means
- it should be prepended with a "Filter by" maybe (see #103459)
- a placeholder should be added "Search for any TCA term" ?
Updated by Ayke Halder 14 days ago
- Related to Task #104876: Use role=button and aria-disabled for anchor-buttons created via LinkButton added
Updated by Ayke Halder 14 days ago
Same topic here:
https://review.typo3.org/c/Packages/TYPO3.CMS/+/85997/comments/13a353c9_a1b0855c
Especially about (not) disabling the search-button.
In some cases the "search"-button might also be used like a "reload"-button.
Reload (sometimes) also makes sense in case the search-term is empty.
- So the search-button might be enabled all the time.
- The hidden label of the button might be changed to "Load result"/"Show result" instead of "Search".
- In case that there are other search-options than the a search-term-field: The search/reload-button could be visually positioned as a separate button without connection to the search-field.
In general we should also account for the "loading"-state of these search buttons:
E.g. disable the button while loading and/or change the label to "Search. Result already loading. Waiting for loading to finish."
And take into account that focusing of diabled buttons is not always working then:
https://a11ysupport.io/tests/html_button(type-button--disabled)#:~:text=Grading%20method
After result-loading has finished, jump (focus) to the result.
Some info about:
- Delay times and when to use e.g. spinner (+1 sec): https://www.pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback
- [ Search autosuggest: https://uxmag.com/articles/best-practices-designing-autosuggest-experiences ]