Bootstrap search bar

[joelit]

Link to relevant issue(s), if any

• Related to Vocab search field in header bar #1514

Description of the changes in this PR

• Bootstrap dropdown list and JS functions for search language selection
• Updated cypress tests
• CSS for the new implementation
• Accessibility tests for the new implementation

Checklist

• phpUnit tests pass locally with my changes
• I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
• The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
• The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

[UnniKohonen]

Looks good so far. The only thing I would maybe change is using a <button> element instead of a <a> element in dropdown toggle.

CSS changes are still missing but I noticed some things that need to be fixed at least:

• color of the dropdown menu text should be dark blue
• hover highlight should be added to dropdown menu items
• cursor should probably be something different in dropdown menu
• text disappears when clicking on dropdown menu items
• the arrow on the button should be changed

[osma]

I tested this and it looks good. I found one minor issue in the HTML template: the button element probably shouldn't have a href attribute.

I noticed that one Cypress test failed during CI, but the failing test was unrelated to this PR. In fact, I just fixed those flaky tests today in PR #1652 which is already merged so all should be well.

[osma]

I don't think the href attribute is useful for a button element?

[joelit]

Missed that from the a-element style implementation. I'll fix it and merge.

[sonarqubecloud]

Quality Gate failed

Failed conditions
11.3% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud