Hopfällbart sökformulär till flexibelt sidhuvud

[considadam]

Denna pull request introducerar en ny funktion för ett kollapsbart sökformulär. Sökformuläret är utformat för att vara lättillgängligt, responsivt och användarvänligt.

Nyckelfunktioner

• Kollapsbar design: Sökformuläret kan växlas mellan öppet och stängt, vilket möjliggör en renare gränssnitt när det inte används.
• Animations effekter: Mjuka övergångar när sökformuläret öppnas och stängs, vilket förbättrar den övergripande användarupplevelsen.
• Fokusstyrning: Fokuserar automatiskt på sökfältet när det öppnas och fångar fokus inom sökformuläret för att förhindra att användarna navigerar bort medan formuläret är öppet.
• ARIA-tillgänglighet: Rätt ARIA-attribut (aria-hidden och aria-expanded) implementeras för att säkerställa att sökformuläret är tillgängligt för skärmläsare.
• Anpassade händelser: Utsänder anpassade händelser (searchFormOpened och searchFormClosed) för enklare integration med andra komponenter eller funktioner som kan bero på sökformulärets tillstånd.
• Klick utanför hantering: Stänger sökformuläret när man klickar utanför det, vilket ger ett intuitivt sätt för användarna att avvisa formuläret.
• Tangentbordsåtkomst: Stöder tangentbordsnavigation, vilket låter användare öppna sökformuläret med utlösarknappen och stänga det med Escape-tangenten.

Alingsås Kommun ser fram emot att bidra med denna funktion till hela Municipio-communityt. Vi välkomnar gärna feedback och förslag på förbättringar för att säkerställa att funktionen uppfyller alla krav och håller hög kvalitet inför en potentiell merge.

[sonarcloud[bot]]

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

[sebastianthulin]

Hi 🥷!

Thank you for your contributions. We have some minor concerns regarding this PR, but will make changes in https://github.com/helsingborg-stad/Municipio/pull/1065 (since we cannot modify an existing pull-request).

We have found that the following needs to be fixed:

• No support for multiple search forms (users may add a search form for mobile mode, and desktiop mode). Suggested code, may not work with multiple forms rendered.
• Using 8px base grid; We will make minor changes to the css, so that we utilize the 8px base spacing better.
• Minor graphical issues regarding z-index overlapping in some configurations.

This PR will be scheduled for release with Municipio 4.8.0 (W42 Release).

Grate work! 🥇

[sebastianthulin]

Closed. PR https://github.com/helsingborg-stad/Municipio/pull/1065 merged.