feat: new megamenu a11y

[Fupete]

Fixes: #995

Descrizione

Riprogettato componente Megamenu accessibile by default. Lavorazione ispirata dai lavori e test sul sito Designers Italia. Già PR draft: https://github.com/italia/bootstrap-italia/pull/1025 (chiusa per pulizia e refactoring).

Changelog

• [x] Riprogettato componente Megamenu (tutte le varianti e temi).
• [x] Corretto componente Header laddove integri Megamenu (tutte le varianti e temi).

Grazie a @cfabry e Michele Landolfo per i contributi e le segnalazioni durante la progettazione del megamenu per il sito Designers Italia.

Stato delle lavorazioni

UI Kit Italia

• [x] In parallelo la riprogettazione del componente di UI Kit Italia, a cura di @zetareticoli, vedi https://github.com/italia/design-ui-kit/issues/107

To do

• [x] Fixare colore "freccetta di attacco" del megamenu aperto
  • [x] Non apparte nel tema scuro (versione con navbar theme-light-desk
• [x] Altre cose di "pulizia" scss:
  • [x] rimuovere/deprecare variabili non più usate e/o usare variabili laddove disponibili al posto di valori assoluti;
  • [x] refactoring degli scss
    • [x] rimuovere it-vertical it-more etc
    • [x] verifica relazioni tra più file scss con le stesse classi e proprietà (eg. _nav, navigation, themi per headernav e nav...)
• [x] Verifica finale seguendo il workflow per migliorare l'accessibilità dei componenti (cc @cfabry)

Future activities:

(cc @zetareticoli @astagi) - Aggiornare megamenu nel markup index.html degli esempi, template vuoto, ....

• Valutare semiboldper le voci menu della navbar (es. sito Designers Italia).
• Valutare negli esempi di Header Completo di aggiungere componente Skiplinks.
• Verificare nel megamenu come si comporterebbero le classi .heading-link-wrapper e .footer-link-wrapper nel caso volessimo dargli sfondo colorato. Probabilmente da fare refactoring di padding e margini.
• Verificare tutte le varianti del componente Header (gerarchia, semantica e accesso alla navbar) rispetto ai lavori fatti su Designers Italia.

Checklist

• [x] Le modifiche sono conformi alle linee guida di design.
• [x] Il codice è coerente con le indicazioni di progetto.
• [x] Le modifiche sono state verificate sui Browser supportati e per diverse risoluzioni dello schermo.
• [x] Sono stati effettuati test di accessibilità in ottemperanza a quanto descritto nell'area "Accessibilità" delle linee guida di design.
• [x] La documentazione è stata aggiornata.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
bootstrap-italia	✅ Ready (Inspect)	Visit Preview	Dec 15, 2023 2:25pm

[Fupete]

@astagi questa PR è prnta per essere rivista e mergiata per me. Possiamo spostare le "Future activities" in issue dedicate più avanti. @cfabry se vuoi dare un'occhiata anche a questa PR di integrazione del nuovo megamenu sei benvenuto.

[Fupete]

@astagi prima di mergiare è da rivedere la nota sulla feat breaking change nella documentazione dell'header. Ti ho inviato una nota su slack ✋. A dopo 🍝 .