Migrate header search to a Stimulus controller (basic version)

[lb-]

• Removes the jQuery slide animation so content will be instantly replaced (we do not appear to have the animation for content replacement in the search results within modals and other similar places so I assumed it was not something worth rebuilding)
• Removes the autofocus behaviour on the search fields as this is not helpful for screen readers / keyboard control
• Sets the aria-busy attribute on the results container while loading
• Includes support for window.header if provided
• Base implementation for 🎛️ Migrate header search Stimulus Controller #9950

---

• Do the tests still pass?
• Does the code comply with the style guide?
• For front-end changes: Did you test on all of Wagtail’s supported environments? Chrome 109, Firefox 109, Safari 16.1 on macOS 13.0

[squash-labs]

Manage this branch in Squash

Test this branch here: https://lb-featurestimulus-header-sear-zipx1.squash.io

[lb-]

Thinking that w-inject may be better for this controller - as it's not just for search but rather injection of html from a response.

Other name ideas; w-frame (inspired from Turbo) or w-swap (inspired from HTMX) or w-update.

[lb-]

@thibaudcolas I have cleaned this up a bunch more - would love to get your initial pass on feedback for this when you get the chance.

[lb-]

@thibaudcolas I have updated this implementation to set aria-busy on the target container while 'loading', I opted out of setting aria-live="polite" on the elements though as it appears we have inconsistent header implementations so we end up with confusing screen reader output.

Happy to fix this also but I think it may increase the scope of this PR, happy to raise a new issue once this is merged.

Example (with aria-live)

match results - works great as that uses a h2 on the results with role=alert.

It also reads 'busy' if the screen reader has 'time'.

no results - works great as that uses a h2 on the results also

clear search - does not work well at all, it reads the entire content (no h2)

https://github.com/wagtail/wagtail/blob/main/wagtail/images/templates/wagtailimages/images/results.html#L5

[lb-]

@laymonage ok should be good for another review.

I can do another smoke test for the aria-busy, I do recall (been a while) I had to slow down the voice read rate but I did validate that the screen reader correctly read out that the content had been updated.

As for the legacy window.headerSearch support, I have added more support here with an afterLoad method, so that if any window.headerSearch is used AND its termInput finds an input without a controller attached to its form. Then it will set up the right data attributes automatically.

I still think it's not worth doing the upgrade notes as part of this PR though, I hope to get another PR done after this one which will remove ALL window.headerSearch inline script usage and replace with the data attribute approaches. However, the goal is to have this PR be able to go to release if that next PR is not yet done.

[laymonage]

A few more things that I should've noticed earlier (sorry!), and some comments on the naming before we get this in (as it'll be harder to change later). Once those are resolved, I think this should be ready to be merged 😄

[lb-]

@laymonage ready for another round, thank you for taking the time to review this thoroughly. I feel like this is a really fine tuned approach now, let me know if anything stands out.

[laymonage]

Looking very solid here, thanks for continuing to work on this! So happy to see all the controller code covered by tests. One small typo but I think that can be fixed as you merge this. (I can also merge if you want.)

Thanks again!

[lb-]

Thank you @laymonage - I know it's a big job to review some of these PRs.

I am excited to see us start to have a baseline of shared, reusable JS behaviours built with a similar approach... and unit tested :D