feat: WCAG compliant footer search

[ramboz]

Inline search suggestion is tackled separately in #131.

Fix #110

Test URLs:

• Before: https://main--delta--hlxsites.hlx.page/us/en/skymiles/how-to-earn-miles/overview
• After: https://issue-110--delta--hlxsites.hlx.page/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

• [ ] Re-run PSI Checks

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[askayastha22]

@ramboz Info text above the search bar is missing when the element is in focus.

[askayastha22]

@ramboz Below breakpoint 768px, the placeholder search text is too large.

[askayastha22]

@ramboz Nitpicking 🙂. The search bar has different style below breakpoint 768px.

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[ramboz]

@askayastha22

Info text above the search bar is missing when the element is in focus

This is similar to the behavior they had. It's just that the placeholder will move "up" once you start typing. Focusing alone won't do it. Thought it was a "minor" sacrifice for simplifying the code (as I can just check for the ::placeholder-visible pseudo selector instead of hacking this via JS)

The search bar has different style

Same reason :-p avoids a lot of CSS clutter and actually makes it properly accessible, otherwise the field is too small.

The initial footer JS is so "broken" as it is, I'm not even sure I'd want to mimic it's current behavior, and I don't think regular users would really complain about the changed experience. Let's see what feedback the UX review provides.

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview