feat: Switch to pagefind component UI

[MoritzWeber0]

In pagefind v1.5.0, a completely new component UI library was added. While the old default UI remains supported, the recommendation is to switch to the new UI. It provides better accessibility, customization and has a modern touch. This is the implementation for the FIP Guide. It makes many things simpler, so I could remove a lot of custom code that was needed before for the same behavior.

It does also resolve #538: LKA is now listed as result and Schweiz is ranked as first result in the German search.

[netlify]

✅ Deploy Preview for fipguide ready!

Name	Link
🔨 Latest commit	cc1ba82
🔍 Latest deploy log	https://app.netlify.com/projects/fipguide/deploys/69dde17179795a00089f0c6d
😎 Deploy Preview	https://deploy-preview-837--fipguide.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Hi there! 👋

Thank you for your contribution to the FIP Guide! 🚀
We appreciate your effort in making rail staff travel information more accessible. 🚄

Checklist before merging:

• Added a description to the Pull Request
• Checked the License of new pictures (non-commercial use without attribution)
• Modified content in English
• Modified content in German
• Modified content in French

[therobrob]

This pagefind-update is really cool! So we're getting rid of some custom code :)
I’ve left some thoughts in the comments. Further more:

• the aria-label of the input element isn’t fitting: "Suche diese Seite" => "durchsuche diese Seite. We should overwrite it, what do you think?
• the screenreader read out the # from the .pf-heading-chip elements (for example "Nummernzeichen Wissenswertes“). Could we hide it fore screenreaders?
• does the pagefind version support an aria-live feature? I think we should announce the search results after typing in the search term.

[MoritzWeber0]

This pagefind-update is really cool! So we're getting rid of some custom code :) I’ve left some thoughts in the comments. Further more:

• the aria-label of the input element isn’t fitting: "Suche diese Seite" => "durchsuche diese Seite. We should overwrite it, what do you think?

There is already an open PR for it, I would just wait until it's merged: Pagefind/pagefind#1096

• the screenreader read out the # from the .pf-heading-chip elements (for example "Nummernzeichen Wissenswertes“). Could we hide it fore screenreaders?

There was a way by overwriting the content of the ::before element, so it should be hidden now.

• does the pagefind version support an aria-live feature? I think we should announce the search results after typing in the search term.

Looks like they don't want to implement it, at least that's the only comment I could find regarding to it: Pagefind/pagefind#162 (comment)

[MoritzWeber0]

The comments should be addressed now :)

[therobrob]

There are two little this left, i’d like to address.

Do you think the localization-issue on behalf of pagefind is solved soon? Otherwise we can merge this PR before and update pagefind later on :)

Regarding aria-live: my idea is to announce, that the search results changed, not what exactly changed in the search results. I understood the pagefind-MR to mean that aria live should announce all changed results. But we can leave this unaddressed for now, i think there is no serious violation. :)

[MoritzWeber0]

Do you think the localization-issue on behalf of pagefind is solved soon? Otherwise we can merge this PR before and update pagefind later on :)

They are usually fast in merging PRs, so I would do it the way proposed: Merge this PR and then update pagefind once the new version is released.

Regarding aria-live: my idea is to announce, that the search results changed, not what exactly changed in the search results. I understood the pagefind-MR to mean that aria live should announce all changed results. But we can leave this unaddressed for now, i think there is no serious violation. :)

Makes sense to me, but sounds like a bit of effort, so feel free to track it as issue if you want :)

[MoritzWeber0]

Done, I also replaced the border with outline (like we do it for the teasers), otherwise there were cases with two borders / outlines.

EDIT: Now the border is gone, I'll fix it tomorrow morning.

[therobrob]

Everything looks great now, thanks a lot! 🫶