@nikosdion Is it desired that it doesn't search for the module type, it searches for title and description, i.e. when I search for Article, it finds also the Statistics module, because it contains the work "article" in its description?

Correct. It only searches what you see on the page (the cards), not something you don’t see listed anywhere. Thing of it as what would happen if you used the search in page feature of your browser.

@nikosdion The search button or whatever it is which contains the "fa fa-search", is it by purpose that it is shown below the search box and not right (or in case or RTL left) beside it? And should that button have some function? Currently it doesn't.

It’s not a button. It’s just a visual cue that this is a search box. It is displayed next to the search box using BS4 addon classes. What is the window width where you have a problem? Maybe I can tweak it a bit.

@nikosdion Width=1200px: ok. Width=1195px: Search icon flows below the text box. But it only would need to do that at a width of some 400px or lower. Anyway, that's CSS, so if you say it shall be fixed with another PR I am ok with it.

I will address it. I need to play with BS4 classes. It’s a huge departure of the way BS2 and 3 handled things and I’m still getting my head wrapped around it.

I’m so glad I decided to commission my own CSS framework for my stuff Bearkat three years ago. BS4 would have killed me...

@nikosdion A reset button would be cool, too, to clear the search box, for those who are too silly to use a keyboard, or who are not old fashioned enough, depending on how you see it ;-)

@nikosdion Yes, migrating from BS2 or 3 to 4 can keep a few people very busy for a while, that's why I gave it up to work on such stuff after I had tried once.

If you can't / won't use the keyboard then by definition you are not using this feature. For anyone else keeping backspace pressed or CTRL-A and type is the way you go. The reset button makes no sense in this context.

Ok, was just an idea. PR works well for me. Shall I wait with test result until you've addressed the css thing?

Yes, please, I need to address the layout issue first.

If you can't / won't use the keyboard then by definition you are not using this feature.

I do not understand that comment.

I think it's because when not using the keyboard you won't enter a search word.

@brianteeman If you refuse to use a "keyboard" you are not entering text. By "keyboard" I mean "any kind of hardware or software which allows you to enter text in an input field", not the actual, physical keyboard. It could be a hardware keyboard, a touch keyboard, a voice to text interface or a switch interface (I'm not sure of the terminology, I mean what Dr. Stephen Hawkins was using to enter text). If I'm missing something feel free to tell me. My understanding of assistive technologies only goes that far.

OK thats alright then - for future reference I would have just written input device although I am not sure how else you could use an input box.

Anyway there is a markup bug with the use of input-append that I am working on a fix for you. The input and the search icon should be flush. Wont take me long

@brianteeman Thank you. "Input device" is the term I was looking for.

anyway fixed the bug for you

I have tested this item ✅ successfully on 58711ac

Maybe display a "No Matching Results" alert instead of blank area?

@Quy And automatically close this alert as soon as you backspace so it finds something?

E.e. if you search for "articlex", you get a match again as soon as you delete the "x". The whole thing is dynamic with every change in the text box.

So for me it only would be confusing to have that alert.

Update: Always imagine someone with thick fingers like me is using a tiny little smartphone ... an "articlew" or so happens soon.

The alert would be VERY problematic in small screen sizes. It would either be outside the current viewport OR it would end up pushing the search box near or below the fold, leading to a startling interface. Moreover, it's neither practical having to close a freaking alert manually (Joomla doesn't have a method of doing that automatically, only adding messages to the stack at the top of the page) every time I don't get a search result.

Besides, if you do NOT see any results the implied meaning is that nothing matched. Why reinvent a perfectly round wheel making it square...?

@nikosdion Before we can decide about the shape of the wheel which we want to invent, we have to discuss the colour ;-)

I have tested this item ✅ successfully on 32ed24f

I hope this PR will be merged soon so the endless scrolling for searching a module will have an end.

Amen to that. I built a site – for development, but just like I'd do a simple real world one – and this page was driving me insane!

Sometimes it is good if something drives someone mad who is skilled enough to make a PR ;-)

This comment is not to derail this PR as we dont do this anywhere in joomla and we should but its best to do it everywhere.

Besides, if you do NOT see any results the implied meaning is that nothing matched. Why reinvent a perfectly round wheel making it square...?

As a blind user I can't see that there are 2 results, 10 results or no results. Technically whenever you have something like this you should be announcing the number of results. The same is true for a select list that is filtered as you type. That should start as list of 16 items but as you type and the list gets shorter it should be announced as list of 4 items etc. It is a real pig to do. Most sites dont do it. Even the gov.uk site just do a "here are search results" and "no results". But it really is something that should be considered throughout joomla if we truly want to be accessible. Maybe the accessibility team will notice this and come up with a solution.

I have tested this item ✅ successfully on 32ed24f

RTC

@brianteeman I would like to do that. I just don't know how, at least through JavaScript. Looking at the MDN docs on ARIA live regions they need to be set up before the screen reader accesses the page, otherwise it won't know it's a live region. Can I have a visually hidden area e.g. with sr-only class and aria-live="polite" to convey that information to assistive technologies?

Also on the subject of this page's accessibility, does the screen reader even make sense of they keyboard navigation across cards? As far as I can see I can only tab through identically named “Select“ buttons without an aria label. If I get this right the only thing a non-sighted person would here is "select select select". That was the main reason I didn't try to do anything more regarding accessibility on that page. I felt it was getting out of scope if the core isn't really accessible there yet.

Thank you for the useful and constructive feedback! That was my intention – what defer does. Oops.

Regarding no need to capture the content loaded event that’s good to know. Simpler code is better.

I’ll update the PR tomorrow. It’s past midnight and I’m heading to bed.

Please remove the RTC label until I update the code. Thank you all!

1. yes the aria-live div has to exist on the page when it loads and then the assistive technology will recognise when that div is updated. If you look you will see that we have <div id="system-message-container" aria-live="polite">
   polite means wait for a gap in the announcement and then speak
   assertive means interrupt what you are doing
   Read this post to really work out what to do and what not to do https://technology.blog.gov.uk/2014/08/14/improving-accessibility-on-gov-uk-search/

2. Select
   <a href="/joomla-cms/administrator/index.php?option=com_modules&amp;task=module.add&amp;client_id=0&amp;eid=38" class="btn btn-primary" aria-label="Select module, Articles - Archived"> Select </a>
   Because there is an aria-label that is what is announced by the screen reader so all good there

3. On windows and mac its super easy to do a quick screenreader test as both os have built in screen readers that are very good.

@nikosdion Ping me tomorrow when ready again for test. Will be available.

@brianteeman Thank you for the detailed information. I would need to do the accessibility improvements as a separate PR, for 4.1 since the real solution would need a new feature. Right now the only way to convey live information to the screen reader is the system messages. However, the only core JS API for them is to add messages which stack. Every time you press a key I run the search. If you are typing "custom" you will get 7 messages: one before you start, six as you type. These messages are sticky which makes for a horrid experience for the sighted user. Trying to fix it with a timer is complicated and doesn't change the fact that a sighted user would have to annoyingly remove hands from keyboard, close the annoying message, rinse and repeat. Eventually they'd think that core developers are idiots and use the browser in-page search instead... which is what this PR tried to fix in the first place. The correct accessibility solution is to have an aria live area hidden from sighted users with sr-only and a core Joomla JS API to send messages to it. This is a new feature and I'm not sure it'd make it into 4.0 so I can't really tie this PR with it. Please remind me to work on that after 4.0 is released. I have a good understanding of what is required and how to do it and this long message here will help me refresh my memory in a few months :)

@richard67 @Quy I have updated the PR. The code is now defer instead of asyc and works without a DOMContentLoaded event. I updated the comment too so future developers bumping into the code understand the intent and the inner workings without scratching their heads (that's a habit I picked up as a business productivity consultant). Please re-test and set to RTC when you're ready.

As I said, about messages and accessibility: when 4.0 ships please open a new issue and assign it to me.

Small display hitch :

Can we get a Clear button?

@nikosdion I agree with you. Not only is it a big task but it needs to be generic and applied everywhere.

@infograf768 not a display hitch. It is not a button and read above for the reasoning why not a clear button

2 annotations/questions maybe not for nic.

1. keyboard navigation is broken (also for this PR) is this expected @brianteeman or I'm too dumb to use it? I expect that when I press tab I jump to the first module select button but get to my browser address bar.
2. It would be nice if the first module in list would be selected (added) if I press enter not sure if this is a11y conform (at least every launch manger does this on windows/linux/mac) and if this is easily possible

The search works for me really good, don't know if searching the description is practical or not.
thx

@HLeithner 1. I explicitly tested the keyboard navigation because that's how I use my computer: mostly with the keyboard. When you get to the new module page you are autofocused to the search box where you start typing. TAB takes you to the first displayed module. However, many Chromium browsers have a setting which allows you to select if you want to tab through all elements or just links. If you have enabled that option then TAB will take you to the address bar since there are no more links (anchor tags) after the current element.

2. This follows the first item. The way it works on a correctly configured browsers is type something, TAB, ENTER, magic. That's what I described in the PR and that's why I used the magic animation ;)

Regarding searching the description, it is practical. Think about this from the perspective of a new user. I want to display the number of articles. I start by typing "number". This does come up with Statistics, the module I am looking for. It's in the description, not the title. Searching the title would require me to know the module is called Statistics, in which case I'd be scrolling through the alpha sorted list. It also makes developers, core and 3PD, really think about the descriptions they write. Just restating the title is not enough. Think about how a novice user would be searching for your module and add these keywords to your module description i.e. what the description was intended for since the Mambo days. See it as reinforcing and rewarding best practices :)

However, many Chromium browsers have a setting which allows you to select if you want to tab through all elements or just links. If you have enabled that option then TAB will take you to the address bar since there are no more links (anchor tags) after the current element.

Exactly that was the problem thanks and solves more or less point 2

Regarding searching the description, it is practical. Think about this from the perspective of a new user. See it as reinforcing and rewarding best practices :)

While testing I didn't get any (for me) unexpected modules, that could be more "problematic" for 3rd party modules but then hey have to write proper descriptions as you say,

Just recorded some videos show tabs working correctly but I see you resolved it

@nikosdion Just noticed that we have very similar functionality in the treeselectmenu

@brianteeman They are similar in the way that a car and a moped are: they will both get from point A to B burning gasoline but they are not interchangeable. The DOM is very different, the search domains are very different, the way you show and hide elements are very different. If this was Joomla 3, treeselectmenu would be Chosen. You couldn't use Chosen to filter the module list, could you? Even though conceptually it's the same process from the user's perspective the required implementations are a universe apart.

ok fair enough - just spotted it and thought I should mention it (ps it was j4)

@brianteeman Understood and thank you for your comment. Yeah, I did get it was J4. I used Chosen as an example from the previous major version because it's something that's been with us for 8 years and we have reached to the point that we intuitively understand what it can and cannot do. I was basically saying that treeselectmenu (J4) and Chosen (J3) do the same thing. And since what I want to do cannot be done with Chosen you now understand why it can't be done with treeselectmenu. It made sense in my head ?

Sometimes I think I am in your head

I have tested this item ✅ successfully on 70b4bc7

Last few changes are minor things. With Richards tests and the original good tests I'm merging this. Thankyou very much @nikosdion !