Ability to clear keyword/search filter with one click

I see a new .svg was added to the branch, and googling a piece of it, it seems that it has been taken from the Bootstrap project.
Does the author's license allows redistribution of this, without authoring?

The clear button seems to respond as a clear button should:
> user types in the search box, the clear button appears;
> user clicks on the clear button, the search box is cleared, the clear button dissapears, and the browse window reloads to the empty search;
> user types in the search box, the clear button appears;
> user deletes the search query, the search button dissapears.

Apart from the possible icon licensing task, there seem to be missing just one little thing. If the query string is too big, the search and clear buttons stays over the text.

As suggested above, I'd make sure that the typed characters won't reach the "x" nor the search icon, albeit I doubt people will perform such long searches, but it's good to fix it anyway.

Also, as the "x" is clickable, but the pointer doesn't change, it'd be great to make it change, as when you hover over the search icon.

Added some padding to the input, and changed the pointer.

I'll review it.

The changes look pretty good to me.
Just one thing @mpaulo. The MR is not currently mergeable.

Do we need a new rebase every time a new issue modifies the tracked built files?

Correct, we do need to do it I'm afraid for this project.

I reviewed the code again and tested it all in gitpod and I'm happy with the changes.
Marking it RTBC.

When using a screenreader, the new button is conveyed as just "button". Assistive tech needs to know what this button does.

In the category buttons below, the remove buttons do this properly, so the same approach should be fine here.

I gave the image an alt text, and described the button with an aria-label aria-label="Clear search".

Although I'm not sure if there is a better way to do this (e.g. using the .visually-hidden class), this looks just as other buttons on the page.

I know it's a bit tricky sometimes, but you should wait until the tests come green before marking it as "Need review". Otherwise it might take longer for people to review it.

It seems like you need to run one of the prettier commands.

[warn] src/Search.svelte
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

Having said that, the tests will come red until #3312537: Tests started failing in MR is fixed, but at least it'll be a different error.

Sorry about that. Makes sense!

Tested it again on drupalpod and it works as expected. Code also looks good (thanks for all the rebuildings and addressing the feedback!).
I'd mark it as RTBC but I'd like @bnjmnm to give the thumbs up to make sure we are doing everything needed for screen readers, etc.

This should be good context to make this module great in looking.

Removed default search (x) icon. PR still needs a rebase.

The cs spell is failing due to cross.svg saying Forbidden word (grey)

You can just add the word to the dictionary: https://git.drupalcode.org/issue/project_browser-3310884/-/blob/3310884-...

Or give a pantone value for the color instead.

I created a new DrupalPod instance with Drupal 10.1 and the standard profile.
After adding text to the input field I was able to verify that #9 is not an issue anymore. As overlapping text still allows one to click the X and it works as expected by clearing the search results.

The test seems to work as expected checking whether there are results before searching for a string that has no results and comparing their outcome.