Gör om hamburgerikonen till ett "X" när menyn är öppen

[JohannaOlin]

Beskrivning

Vi behöver göra det tydligare för besökaren hur hen stänger hamburgermenyn.

Skisser

• [ ] https://projects.invisionapp.com/share/TXNDSCO8YMA#/screens/314264073

Acceptanskriterier

• [ ] Gör om hamburgerikonen till ett "X" när menyn är öppen

Standard AC:s

• [ ] Lösningen fungerar på alla skärmar (mobil, tablet, pc)
• [ ] Lösningen har kodgranskats av en kollega
• [ ] Eventuellt nya komponenter har dokumenterats och syns på design.regionhalland.se
• [ ] Storyn har synkats med övriga produktägare
• [ ] Lösningen går i linje med WCAG 2.0 AA

Övrig information

[viktor-sarge]

Denna är klar och ligger i branchen 255NewBurger. Skall återställa funktionen att klick utanför menyn stänger menyn så är det klart. Sedan bör det på lite aria-logik på menyn så småningom så den blir tillgänglig.

[viktor-sarge]

Synlig på stage nu - lägger i QA

[JohannaOlin]

@regionhallandviktor Det kanske inte har med denna PBI att göra, men i Chrome får hamburgermenyn en ruta runt sig när man har klickat på den. Det ser bättre ut i de andra webbläsarna.

[viktor-sarge]

@JohannaOlin Tror att det kan bero på att den är en button och att Chrome försöker vara tydlig. Vi kan prova något annat element om du vill - eller se om vi kan styla den så att den inte har någon border när den är klickad.

[viktor-sarge]

Ta bort är enkelt. Men det saboterar tillgängligheten. Det finns lösningar (både ny pseudo-klass i CSS som heter :focus-visible[1] [2] och javascript-baserade manuella lösningar[3] som sniffar vem som använder tangentbord vs mus.) Lösningen med :focus-visible fungerar ännu bara i Chrome 67 om man manuellt aktiverar den, men det finns en polyfill som vi kunde använda tills dess att standarden är implementerad. Men det är i så fall en egen story. Tills vidare är det enklast att lämna saker som de är eftersom det gör det omöjligt att se att knappen fått fokus om vi tar bort fokusringen. Lägger därför tillbaka den i befintligt skick.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

[2] https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo

[3] https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

[viktor-sarge]

En viktig kommentar verkar ha försvunnit. Jag försöker återskapa ur minnet:

Att ta bort ringen är enkelt, men saboterar tillgängligheten. Fokusringen finns för att det skall vara synligt för de som använder tangentbordet vilket element som är aktivt/fått fokus. Det finns lösningar men de är för stora för att ta in som en del av den här storyn. Jag lägger därför tillbaka den i QA med en anmärkning om möjliga lösningar som en egen story:

• Att använda :focus-visible.[1] [2] Gör det möjligt att styra utseendet för de som behöver det, t.ex. tangentbordsanvändare. Då är det browsern som får ansvaret för att avgöra när fokusringen skall visas. Detta är en ny funktion som än så länge bara finns i Chrome 67 om användaren själv aktiverar den, men det finns en polyfill [3] som vi kunde använda medan standarden får fäste i nya versioner av webbläsarna.

• Använda en logik som tar höjd för för att tangentbordsanvändare är lätta att känna igen genom sitt bruk av [tab]-tangenten. Tex kan vi låna av https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

[2] https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo

[3] https://github.com/wicg/focus-visible

[viktor-sarge]

(Suck - efter flera minuter dök nu första kommentaren upp. Sega häkla nät)