Improve UI of results count

would it make sense to move the count outside the filterbox same height like the list and grid buttons? either aligned to the left as the exact opposite of list/grid or place or place it right before? but in general a +1 to move it somewhere else.

The random data plugin tab shows the wrong count when we switch to the source plugin tab.
As suggested, when we move the count

Correct count when we on random data count (correct count is 6)

Incorrect count when switched to a different tab (incorrect count 1)

Changed the location of the "search results".

Random data plugin shows wrong count because random number of projects are fetched .
Reference for above:-https://git.drupalcode.org/project/project_browser/-/blob/1.0.x/modules/project_browser_devel/src/Plugin/ProjectBrowserSource/RandomDataPlugin.php#L151
Random data plugin is only for testing purpose.

Nice thanks for working on this. I've applied successfully MR274. A few observations and thoughts.

1. i like the addition of the results in the row of the list and grid buttons as suggested in #2

2. i've noticed when you narrow down the viewport that result count disappears?

3. would it make sense to announce the result count with drupal.announce? something like for example 4262 results for drupal.org (mocked). cuz currently the result are only available if you actively tab through to the according project source tab. it would be easier to process if you type in a search and get the results announced directly to you.

4. And i have to admit i havent even noticed that without the patch the project source tabs have a result count as well. why show the results for each tab and source at all? with the other result count moved out of the filter component and closer to the tabs it is also sort of redundant for the active source. and why show the results for all the project source tabs? what is the benefit? wouldn't it be clearer to output only the results count for the active project source?

I'd also remove the count number from the plugin tabs as it can be misleading due to the fact that some filters are common to all plugins and some others are specific per plugin (ie: categories). The result count is still displayed in the new position (changes in this MR), but there is no need to have it in the plugin tabs.

thanks! I've applied the latest changes. a few details i would note.

1. the results count and the list and grid buttons aren't in the same row anymore. They are stacked. one row the results count left aligned and the list and grid buttons in the next row right aligned.

2. if you change the reading direction in the devtools the stacking is more apparent due to the misplacement of the list button

3. about adding results for [plugin source] at the end of the results count. i am not sure. i see the point for screenreader users with a small working memory. sighted users with small working memory have always the fallback to quickly revisit the active plugin source tab as a reminder about the active plugin source context. for screen reader users it is more challenging. but then there is alsothe point trying to communicate the same information for everyone. then adding the context at the end of the count would make sense. but i am not sure. would perhaps tend to wrap the results for [plugin source] in a visually hidden span still. but as i said not sure what the best choice would be. what others think?

I have addressed all the feedbacks mentioned in #15. The second point in #15 is covered inRTL support

Result count AT work is done as part of Update the screen readers about change in result count.. Suggested some small feedback.

#3323531: Update the screen readers about change in result count. is merged and changes needs to be done as per that issue (output tag is removed).
It would be good if required changes are done in a new MR.

It does not announce the latest changes.

We can also announce the results on changing the tabs which is currently not happening .

@bnjmnm We have this function refreshLiveRegion() in Search.svelte component and we want to access this function in ProjectBrowser.svelte. Is there any easier way to do that .
I have already tried using some methods using stores and importing the ProjectBrowser.svelte component(which is not permitted because of the cyclic nature) in Search.svelte.

We have this function refreshLiveRegion() in Search.svelte component and we want to access this function in ProjectBrowser.svelte. Is there any easier way to do that .
I have already tried using some methods using stores and importing the ProjectBrowser.svelte component(which is not permitted because of the cyclic nature) in Search.svelte.

Just move the function to ProjectBrowser.svelte and pass it down to Search.svelte. I did that here. It can now be used by ProjectBrowser.svelte, add it where you need to.

I tried to rebase but when compiling svelte it was complaining about unused selectors and styles, so that means I probably did something wrong. I'll leave the rebase to you guys as I don't want to mess anything up.

Marking back to NR since @Utkarsh_33 fixed the tests

Thanks for the rebasing!! I bet it wasn't an easy one.

Code looks good, mostly moving code between files and adding a useful label for screen readers.
Tested it with drupalpod as well and it all worked as expected.

Marking it RTBC.

The development status was showing up twice. Fixed that, hope I didn't break anything else

Oh dear, how did I miss that. Thanks Tim!

Merged!