Fix dropdown for language selector as a template for other dropdowns

[Rieven]

Changes

• KAT is now using showing different implementation of drop downs. The way we are suppose to use it: https://minvws.github.io/nl-rdo-manon/components/collapsible

The problem with this implementation is that we cannot use icons in the dropdown, the reason why is that we use the data-open-label and data-close-label to set the dropdown text, but we can only insert text as values.

We use now buttons to trigger the dropdown, making it more flexible to add text to button with icons.

We need to make sure that the accessibility attributes and values are also set.

This PR is a first approach to use both the Manon style and also the use of buttons including WCAG compatibility.

according to: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

I have used some of these attributes to comply with WCAG. This PR shows a change of only 1 dropdown, a way to use this to all other drop downs across KAT

Demo

QA notes

Make sure that the new CSS and JS is build:
cd rocky
nvm use 18 (you must have nodejs 18+ installed)
yarn (install yarn)
yarn dev (activate yarn)

---

Code Checklist

• All the commits in this PR are properly PGP-signed and verified.
• This PR only contains functionality relevant to the issue.
• I have written unit tests for the changes or fixes I made.
• I have checked the documentation and made changes where necessary.
• I have performed a self-review of my code and refactored it to the best of my abilities.

• Tickets have been created for newly discovered issues.
• For any non-trivial functionality, I have added integration and/or end-to-end tests.
• I have informed others of any required .env changes files if required and changed the .env-dist accordingly.
• I have included comments in the code to elaborate on what is not self-evident from the code itself, including references to issues and discussions online, or implicit behavior of an interface.

---

Checklist for code reviewers:

Copy-paste the checklist from the docs/source/templates folder into your comment.

---

Checklist for QA:

Copy-paste the checklist from the docs/source/templates folder into your comment.

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud