Case study: un accordion che diventa schede

const desktopMedia = window.matchMedia('(min-width: 1000px)');

window.matchMedia riceve una condizione scritta come nelle media query del CSS e restituisce un oggetto che la controlla. Non cambia l’aspetto della pagina.

• desktopMedia.matches vale true se la condizione è vera in quel momento, false se non lo è. La navigazione lo legge al caricamento per decidere se usare il menu a comparsa o i link in linea.
• L’evento change arriva quando la risposta cambia, cioè quando la finestra attraversa i 1000px in un senso o nell’altro. Non arriva a ogni pixel di ridimensionamento. La navigazione lo ascolta con desktopMedia.addEventListener('change', …).

Il CSS usa @media per cambiare l’aspetto; JavaScript usa matchMedia quando deve cambiare anche il comportamento. Nella nuova sezione basterà il CSS.

• Nella Console scrivi desktopMedia.matches a due larghezze diverse: deve cambiare risposta a 1000px.
• Allarga la finestra da 999 a 1000px: la navigazione deve passare in linea esattamente lì.
• Cerca 63.25rem nel tuo CSS: non deve comparire più.

Una <section> con id="questa-pagina", dopo la hero, dentro <main>. Dagli aria-labelledby con l’id del titolo: così la sezione prende il nome dal suo titolo.

Dentro, un <header> per l’introduzione. Il titolo è un <h2>, perché l’<h1> della pagina è nella hero. Il paragrafo è un <p>.

L’etichetta è la stessa della hero: <p class="eyebrow"> con l’SVG del cursore. Non serve una classe nuova.

Lavoriamo dentro un design system: prima di scrivere una regola nuova, chiediti se esiste già una classe che fa la stessa cosa, o se la regola potrà servire anche in altre sezioni.

• Il titolo usa heading heading-size-4: un gradino della scala dei titoli, come heading-size-1 della hero.
• Il paragrafo usa text-size-200 e color-muted: dimensione del testo e colore secondario.
• La sezione usa theme-light (il tema chiaro, capitolo 3) e border-top.
• L’<header> usa container e border-inline: stessa larghezza della pagina e linee ai lati.
• Dentro l’<header>, un <div class="case-study-intro"> raccoglie etichetta, titolo e paragrafo. È l’unica classe che riguarda solo questa sezione.

Le classi che si possono usare ovunque hanno nomi generici (color-muted, border-inline); quelle di un solo componente hanno il suo nome come prefisso.

.case-study-intro è una colonna flex centrata (flex-direction: column, align-items: center, text-align: center) con gap fra i tre elementi.

Dagli una sola max-width, sul contenitore, e centralo con margin: 0 auto. Non servono larghezze massime separate su titolo e paragrafo. La larghezza massima è in em: dipende dalla lunghezza delle righe di testo.

Il padding verticale e orizzontale usa i token di spaziatura in pixel (capitolo 2).

In :root:

• i token di spaziatura che trovi in Figma e che non esistono ancora (--spacing-*);
• --heading-4-font-size, --heading-4-font-weight, --heading-4-line-height;
• --text-350-font-size, --text-350-line-height;
• --icon-size e --icon-color per le icone.

Utility, una regola ciascuna:

• .heading-size-4 e .text-size-350, che leggono i token tipografici. Sul titolo aggiungi text-wrap: balance: il browser distribuisce le parole su righe di lunghezza simile;
• .color-muted, che applica --color-muted;
• .border-inline, .border-block, .border-top, che disegnano le linee con --border-width e --color-border-muted;
• .icon (sotto).

Il tema è una decisione del design system, non di questa sezione. Una classe con un nome generico si può mettere su qualunque altra sezione chiara. Dentro metti solo i token che cambiano con il tema, più il colore del testo e del fondo.

Prova: cambia --color-cursor su .theme-light. Il cursore della sezione cambia, quello della hero no.

Una. Nel sito React di riferimento il desktop e il mobile usano due strutture diverse, ma cambia solo la disposizione: gli stessi titoli, gli stessi testi, la stessa voce (.breakdownTabs-item) scelta. Se scrivi una sola struttura, il CSS la dispone in due modi con le media query, e quando la finestra cambia larghezza la voce scelta e il focus restano dove sono.

• Le voci: <ul class="breakdownTabs-list"> con tre <li class="breakdownTabs-item">. La lista comunica che le voci sono tre e appartengono allo stesso gruppo.
• In ogni voce un <button type="button" class="breakdownTabs-button">: scegliere una voce è un’azione nella pagina, non porta a un altro indirizzo. type="button" dice che il pulsante non invia un modulo.
• Dopo il pulsante, un <p class="breakdownTabs-text"> con il testo della voce.

Dentro un <button> l’HTML ammette solo contenuto in linea: niente titoli, niente paragrafi. Per questo il testo sta fuori dal pulsante, e il titolo della voce è uno <span>, non un <h3>.

<button class="breakdownTabs-button" type="button">
  <svg class="icon" …>…</svg>
  <span class="breakdownTabs-title">
    <span class="text-size-350">Studiare il sistema</span>
    <svg class="icon breakdownTabs-toggle" …>…</svg>
  </span>
</button>

• L’icona della voce (.breakdownTabs-item), un SVG con classe icon.
• Uno <span class="breakdownTabs-title"> che raccoglie il titolo e il triangolo: in Figma stanno sulla stessa riga, con il triangolo a destra.
• Il titolo usa la utility text-size-350: non è un titolo HTML, è un testo con la dimensione di quel gradino della scala.
• Il triangolo è un’altra icona, con la classe aggiuntiva breakdownTabs-toggle.

Con una classe di stato, is-selected, sul <li> della prima voce (.breakdownTabs-item). Il prefisso is- distingue le classi che JavaScript aggiunge e toglie da quelle che descrivono un elemento.

Dai a ogni voce un id (breakdownTabs-item-study, breakdownTabs-item-layout, breakdownTabs-item-check): nel CSS ti serviranno per collegare ogni voce alla sua immagine.

Sopra la lista, in un <div class="breakdownTabs-visuals">: tutte e tre, ognuna con la classe breakdownTabs-visual e una classe che richiama l’id della sua voce (.breakdownTabs-item): breakdownTabs-visual-study per breakdownTabs-item-study, e così via. Il CSS ne mostrerà una alla volta.

Ogni immagine ha il suo testo alternativo, che descrive che cosa mostra. Scrivi anche width e height con le dimensioni del file: il browser conosce la proporzione prima di scaricarla.

Tutto il componente sta in <div class="breakdownTabs border-block">, con dentro <div class="breakdownTabs-content container border-inline">.

Apri la pagina: vedi tre immagini, tre pulsanti con l’aspetto predefinito e tre testi. Con Tab raggiungi i tre pulsanti. Il fondo è bianco anche senza tema, perché i colori scuri sono sulla hero e sulla navigazione, non su body.

Togli l’aspetto predefinito: border: 0, background: none, color: inherit, font: inherit, text-align: left, width: 100%, cursor: pointer. I pulsanti non ereditano il carattere e il colore dalla pagina: devi chiederlo tu.

Il pulsante è una colonna flex (flex-direction: column, align-items: flex-start) con gap fra l’icona e la riga del titolo. La riga del titolo, .breakdownTabs-title, è a sua volta un flex orizzontale largo quanto il pulsante: justify-content: space-between porta il triangolo a destra, align-items: center lo centra sul titolo anche quando il titolo cambia dimensione.

Padding, gap e distanze vengono da Figma, in em. Scrivile come custom properties su .breakdownTabs (per esempio --breakdownTabs-button-padding): sul desktop le cambierai in un punto solo.

Ogni voce (.breakdownTabs-item) ha un bordo inferiore e una linea superiore creata con ::before: un elemento assoluto, largo quanto la voce, alto --border-width. Serve position: relative sulla voce.

Nella voce scelta la linea cambia colore e diventa più spessa. Invece di cambiare height, puoi usare transform: scaleY(…) con transform-origin in alto: la linea cresce senza spostare il contenuto.

Il passaggio del mouse mette in evidenza la linea allo stesso modo, ma solo dentro @media (hover: hover) and (pointer: fine): su uno schermo tattile, dopo un tocco, la linea resterebbe evidenziata.

Il pulsante è solo una parte della voce (.breakdownTabs-item). Togli il contorno al pulsante e disegnalo sull’intera voce:

.breakdownTabs-button:focus-visible {
    outline: none;
}

.breakdownTabs-item:has(.breakdownTabs-button:focus-visible) {
    outline: var(--focus-outline-width) solid var(--color-focus);
    outline-offset: var(--focus-outline-offset);
}

:focus-visible si attiva con la tastiera, non dopo un clic del mouse. Usa gli stessi token del contorno di focus della lezione 02.

Nascondi i testi delle voci (.breakdownTabs-item) non scelte e mostra i triangoli solo se il componente ha la classe breakdownTabs-ready:

.breakdownTabs-ready .breakdownTabs-item:not(.is-selected) .breakdownTabs-text {
    display: none;
}

.breakdownTabs-ready .breakdownTabs-toggle {
    display: block;
}

Il triangolo di partenza ha display: none. La classe breakdownTabs-ready la aggiungerà JavaScript (capitolo 7). Senza JavaScript i pulsanti non cambiano voce: se i testi fossero già nascosti, nessuno potrebbe leggerli. Così, se lo script non si carica, la sezione resta leggibile per intero.

Per provare il CSS prima di scrivere il JavaScript, aggiungi a mano breakdownTabs-ready negli strumenti di sviluppo e sposta is-selected da una voce all’altra.

Tutto sta in @media (min-width: 1000px), la stessa soglia del menu.

.breakdownTabs-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

Tre colonne uguali: minmax(0, 1fr) permette alle colonne di restringersi anche con parole lunghe. Lo spazio fra le colonne è un token di spaziatura.

Dentro la media query cambia anche le custom properties del pulsante (padding, gap, distanza del testo) e le spaziature del contenitore e dell’immagine, prendendole dal frame desktop.

Riscrivi lo stesso selettore del capitolo 5 con display: block, dentro la media query. I due selettori hanno la stessa specificità: vince quello scritto dopo, che vale solo da 1000px. Allo stesso modo nascondi il triangolo e togli il bordo inferiore alle voci (.breakdownTabs-item).

Il colore: le voci hanno color: var(--color-muted), la voce scelta color: var(--color-black). Il titolo lo eredita.

Il testo non può stare dentro il pulsante, ma il pulsante può coprire tutta la voce (.breakdownTabs-item) con un suo pseudo-elemento:

.breakdownTabs-button::after {
    content: "";
    position: absolute;
    inset: 0;
}

Un elemento assoluto con inset: 0 si estende fino ai bordi del primo antenato posizionato: .breakdownTabs-item, che ha già position: relative. Un clic sullo pseudo-elemento è un clic sul pulsante.

Perché la struttura è una sola: cambia la disposizione, non il documento né il comportamento. Il pulsante sceglie la voce (.breakdownTabs-item) a tutte le larghezze; il CSS decide come mostrarla.

Ti servono tre cose: il contenitore del componente, tutte le voci (.breakdownTabs-item) e tutti i pulsanti. Conservale in tre costanti all’inizio della parte nuova di script.js, con nomi che dicano che cosa contengono. Nella lezione 02 hai già cercato elementi della pagina con un selettore CSS.

Esistono due metodi di document che ricevono un selettore CSS: uno restituisce il primo elemento che corrisponde, l’altro li restituisce tutti. Per il contenitore ti basta il primo; per voci (.breakdownTabs-item) e pulsanti ti servono tutti.

Quello che li restituisce tutti ti dà un elenco nell’ordine in cui gli elementi compaiono nell’HTML: la prima voce dell’elenco è la prima voce della pagina. Questo ti servirà al passo 3.

Cerca: document.querySelector, document.querySelectorAll, NodeList.

Nel capitolo 5 hai scritto regole che valgono solo se il componente ha la classe breakdownTabs-ready. Ora è JavaScript che deve aggiungerla, appena trovato il contenitore.

Ogni elemento ha una proprietà che rappresenta l’elenco delle sue classi, con metodi per aggiungere, togliere e controllare una classe. Ti serve quello che aggiunge. Dopo averlo scritto, ricarica a 375px: i testi delle voci (.breakdownTabs-item) non scelte devono sparire e i triangoli comparire.

Cerca: Element.classList, classList.add.

Scrivi una funzione che sceglie una voce (.breakdownTabs-item). Le serve un’informazione: quale voce scegliere. Passagliela come parametro, sotto forma di posizione nell’elenco delle voci.

Dentro la funzione devi passare in rassegna tutte le voci: a quella nella posizione ricevuta aggiungi is-selected, a tutte le altre la togli. Così, qualunque fosse la voce scelta prima, alla fine una sola ha la classe.

• Per passare in rassegna le voci (.breakdownTabs-item) usa un ciclo for con un indice: parte da 0 e cresce di 1 finché è minore del numero di voci.
• Il numero di elementi di un elenco è nella sua proprietà length.
• Con le parentesi quadre e l’indice raggiungi una voce precisa. Si conta da 0: la seconda voce ha indice 1.
• Dentro il ciclo, un if/else confronta l’indice con la posizione ricevuta. Per confrontare usa ===.
• Nei due rami usi due metodi di classList: uno aggiunge, l’altro toglie.

Non serve ricordare quale voce era scelta prima: togliendo la classe a tutte le altre, la vecchia scelta sparisce da sola.

Prima di collegare i pulsanti puoi provare la funzione dalla Console: chiamala con 2 e guarda se si apre la terza voce.

Cerca: for (MDN, JavaScript), NodeList.length, «strict equality», classList.remove.

Ogni pulsante, quando viene premuto, deve chiamare la funzione del passo 3 passandole la propria posizione. Il primo pulsante passa 0, il secondo 1, il terzo 2.

Visto che anche i pulsanti sono in un elenco ordinato come le voci (.breakdownTabs-item), la posizione di un pulsante nel suo elenco è la stessa della sua voce.

• Un secondo ciclo for passa in rassegna i pulsanti.
• A ogni giro registri sul pulsante un gestore dell’evento click, come hai fatto nella lezione 02 per il pannello del menu e per il link che salta al contenuto.
• Dentro il gestore chiami la funzione del passo 3 con l’indice del ciclo.
• Dichiara l’indice del ciclo con let, non con var: con let ogni giro ha la sua variabile, e ogni gestore ricorda l’indice del proprio giro. Se hai dubbi, prova con var e osserva quale voce (.breakdownTabs-item) si apre premendo i pulsanti.

Cerca: EventTarget.addEventListener, evento click, «let nei cicli for».

Prova prima di scrivere altro: raggiungi un pulsante con Tab e premi Invio, poi Spazio. Che cosa succede?

Non serve altro codice. Un <button> genera l’evento click anche quando lo attivi da tastiera con Invio o Spazio: il gestore del passo 4 funziona già. È uno dei motivi per cui abbiamo usato un pulsante vero e non un elemento qualsiasi con un gestore di clic.

Cerca: «button activation behavior», elemento <button> su MDN, sezione sull’accessibilità.

Usa la stessa soglia della hero, @media (max-width: 640px), e soltanto quella: fra 641 e 999px la sezione è un accordion con i caratteri e gli spazi del desktop.

Dentro la media query cambia i token, non le regole:

• in :root, --heading-4-font-size e --text-350-font-size;
• i padding di .case-study-intro e di .breakdownTabs-content, con i token di spaziatura.

Le misure in em delle voci (.breakdownTabs-item) si adattano da sole alla nuova dimensione dei caratteri.

Sul desktop le voci (.breakdownTabs-item) si comportano come schede (tab):

• role="tablist" sul contenitore dei pulsanti;
• role="tab" su ogni pulsante, con aria-selected="true" o "false" e aria-controls che indica il pannello;
• role="tabpanel" sull’area che cambia, con aria-labelledby che indica la scheda;
• la tastiera prevista per le schede: Tab entra nel gruppo una volta sola, le frecce spostano scelta e focus, Home e Fine vanno alla prima e all’ultima. Serve JavaScript per tabindex e per i tasti.

Un tablist può contenere solo tab: i testi delle schede andrebbero spostati fuori dalla lista o collegati ai pulsanti in un altro modo.

Sul mobile le voci (.breakdownTabs-item) si comportano come un accordion. Le strade sono due:

• duplicare il contenuto: le schede per il desktop e una serie di <details> con lo stesso name per il mobile, mostrando una struttura alla volta con le media query;
• tenere una sola struttura: sul mobile JavaScript toglie i ruoli delle schede e dà ai pulsanti aria-expanded e aria-controls, che li collegano al proprio testo; sul desktop rimette i ruoli.

In entrambi i casi il cambio di larghezza va seguito con matchMedia e il suo evento change, e il focus non deve andare perso quando una struttura viene nascosta.