Breaking change

Di seguito saranno mostrate le principali breaking change di ogni versione.

2.14.0

Changelog completo

Autocompletamento

Nuova modalità di utilizzo del componente Autocomplete via codice.

Carousel

Lato JavaScript il componente Carousel deve essere importato tramite la classe Carousel e non più CarouselBI.

Generale

Il focus con la tastiera viene adesso settato con l’attributo datadata-focus-mouse invece che con la classe focus--mouse. Da tenere presente nel caso di un precedente utilizzo della classe focus--mouse per un controllo e/o un’ implementazione ulteriore di accessibilità.

2.13.0

Changelog completo

Input numerico

Le label degli input percentuale e valuta richiedono la classe input-symbol-label. Le precedenti classi input-number-percentage e input-number-currency sono state rimosse.

Steppers

Gli elementi di tipo <svg> non interattivi necessitano dell’aggiunta di aria-hidden="true".

Tab

Sono stati rimossi gli elementi delle liste con classe nav-item-filler per tutte le tab di tipo Card.

2.12.0

Changelog completo

Rating

• Aggiunto attributo aria-hidden="true" sulle icone perché lo scopo è già trasmesso agli strumenti assistivi dal testo con classe .visually-hidden.

Torna su

• Rimossi gli attributi tabindex="-1" e aria-hidden="true" per permettere il focus da tastiera e l’interazione da strumenti assistivi.
• Aggiunto attributo aria-label="Torna su" per comunicare lo scopo a strumenti assistivi.

2.11.0

Changelog completo

Input

Quando si utilizza un campo input diverso da submit, file, radio e checkbox è necessario sempre applicare la classe form-control.

Liste

Il codice markup è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:

• L’elemento .text è ora implementato come heading h e non semplice <span>. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.

Liste di immagini

Utilizzare i tag <figure> e <figcaption> per liste di immagini con didascalia.

Timeline

Il codice markup è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:

• L’elemento .pin-wrapper è ora implementato come heading h e non semplice div. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.
• L’elemento .pin-icon, se semanticamente rilevante, deve avere attributo role="img" e contenere un tag title che lo descriva.
• Gli elementi categoria e data hanno ora tag span visually-hidden che ne descrivono lo scopo.
• L’elemento .card-title è ora implementato con heading h4 per rispettare la gerarchia attuale. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.

2.10.0

Changelog completo

Checkbox

• Il “raggruppamento” di campi di input deve prevedere l’elemento nativo <fieldset>.
• Sostituire aria-labelledby con aria-describedby.

Input

Il campo di input di tipo Password è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:

• L’elemento input.input-password ha ora il corretto attributo aria-describedby al posto di aria-labelledby.
• L’elemento .password-icon diventa un button con role=switch e uso dell’attributo aria-checked per lo stato.
• Rivisto l’ordine degli elementi nell’HTML per rispecchiare la struttura corretta degli elementi.
• Alcuni elementi small o span diventano p, ad esempio per la personalizzazione con attributi data delle varianti più avanzate ci si rivolgerà verso l’elemento p.strength-meter-info e non più al generico small.form-text.
• Rimosso il controllo per il Caps-lock inserito, per non interferire con i tasti modificatori delle tecnologie assistive.
• Aggiunta una variante con misuratore di sicurezza e suggerimenti.

Liste

Il codice markup è stato rivisto in chiave accessibilità e robustezza. In particolare cosa cambia:

• L’elemento .link-list-heading è ora implementato come heading h e non semplice <span>. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.
• L’elemento .list-item-title è ora implementato come heading h e non semplice <span>. Dovrà avere il livello intestazione corretto a seconda della gerarchia in pagina.

Radio button

• Il “raggruppamento” di campi di input deve prevedere l’elemento nativo <fieldset>.
• Sostituire aria-labelledby con aria-describedby.

Toggles

• Il “raggruppamento” di campi di input deve prevedere l’elemento nativo <fieldset>.
• Sostituire aria-labelledby con aria-describedby.

2.8.0

Changelog completo

Avatar

Il toggle del dropdown diventa <button> invece di <a>.

Header

• Il toggle del dropdown diventa <button> invece di <a>.
• Gli altri elementi <a> che si comportano come toggle dropdown (eg. scelta Lingua), hanno l’aggiunta dell’attributo role="button".
• Il markup del Megamenu cambia come nel nuovo componente, per approfondire andare alla relativa pagina.

Input

Rimosso l’elemento con classe .input-group-prepend in favore dell’elemento con classe .input-group-text.

Liste

Gli elementi di tipo <a> dei collapse necessitano l’aggiunta dell’attributo role="button".

Megamenu

• tutti gli esempi del componente, anche quelli integrati nel componente header, sono stati rivisti: refactoring markup HTML, classi e stili nei file _megamenu.scss, _navigation.scss, _headernavbar.scss, _headernavbartheme.scss, _navigationtheme.scss
• rimossi esempi “con sezioni”
• rimosse classi .it-megamenu-footer, .it-external, .it-more, .divider, h3, .link-list-heading
• rimosse variabili obsolete e inutilizzate da _variables.scss

Navscroll

Gli elementi con classe .it-back-button diventano di tipo <button> invece di <a>. Gli elementi di tipo <a> dei collapse necessitano l’aggiunta dell’attributo role="button".

Paginazione

Il toggle del dropdown diventa <button> invece di <a>.

Sidebar

Gli elementi di tipo <a> dei collapse necessitano l’aggiunta dell’attributo role="button".

Transfer

Agli elementi di <a> occorre aggiungere l’attributo role="button".

2.4.0

Changelog completo

Callout

Il contenitore <div> con classe .callout deve essere seguito da un ulteriore contenitore <div> con classe .callout-inner. Seguire gli esempi e la successiva descrizione per capire la composizione del nuovo componente.

2.3.0

Changelog completo

Steppers

L’elemento con classe .steppers-index adesso è diventato uno <span> collocato fuori dalla lista <ul>.

2.2.0

Changelog completo

Input

Quando si utilizza l’attributo placeholder o l’input parte già valorizzato assicurarsi di aggiungere alla label la classe active per impedire la sovrapposizione della label al campo.

Generale

Per caricare i font utilizzando JavaScript occorre chiamare esplicitamente la funzione loadFonts passando il percorso della cartella dove si trovano i font.