Esamina la tipografia, la griglia e l’accordion concreti del sistema dello Stato francese API nel suo contesto istituzionale. Confronta il comportamento dei pannelli informativi collegati e indipendenti in un esempio didattico chiaramente neutrale.
Interpretazione originale e neutra di HTML/CSS/JavaScript della struttura degli accordion documentata. Nessuna risorsa ufficiale di DSFR e nessuna identità visiva dello Stato. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di design DSFR
Documentazione ufficiale DSFR v1.15 e metadati verificati del pacchetto @gouvfr/dsfr 1.15.3. Sono valori di riferimento ufficiali; l’anteprima neutra mostra la struttura delle interazioni senza usare l’identità visiva dello Stato.
DSFR è il sistema di design dello Stato francese. I termini ufficiali attuali indicano i servizi .gouv.fr e le applicazioni mobili dello Stato come ambiti di destinazione e distinguono gli utenti e gli operatori statali dalle organizzazioni esterne. Si tratta di un limite sostanziale all’adozione, non di una nota a piè di pagina eliminabile nascondendo un logo.
Un team idoneo dovrebbe seguire il processo ufficiale di approvazione e implementazione del progetto. Un prodotto non correlato può studiare l’architettura delle informazioni documentata e le motivazioni in materia di accessibilità, senza presentarsi come parte dell’identità dello Stato francese. L’anteprima di questa pagina è un esercizio originale e neutro sugli accordion: non carica stili, font o script di DSFR.
Riferimento ufficiale per la tipografia del sistema di design DSFR
Ruoli di Marianne e font di fallback
La documentazione tipografica indica Marianne e Spectral, con Arial e Georgia rispettivamente come font di fallback. Il testo standard del corpo è 16px/24px; il testo degli articoli è 18px/28px. H1 passa da 32px/40px su dispositivi mobili a 40px/48px su desktop. Questi valori descrivono il sistema ufficiale, mentre la dimostrazione adotta uno stile tipografico neutro proprio.
Le classi per la dimensione del testo non sostituiscono i livelli semantici dei titoli. Mantieni il titolo della pagina come h1 e assegna a ogni titolo dell’accordion il livello appropriato. Uno stile visivamente più grande non dovrebbe essere usato per saltare livelli nella struttura del documento.
Il riferimento della griglia definisce SM 576px, MD 768px, LG 992px e XL 1248px. La larghezza massima dei contenuti è 1200px. Le gutter opzionali sono di 16px per le dimensioni più piccole e di 24px da LG in poi. La griglia nel codice non prevede gutter per impostazione predefinita: un aspetto importante quando si traduce una griglia Figma in markup.
La spaziatura si basa su multipli di 4px, con eccezioni documentate di −6px, −2px, 2px e 6px. Una classe di spaziatura rappresenta quindi un sistema controllato, non un’autorizzazione a inventare offset arbitrari. L’anteprima neutra usa una colonna di lettura indipendente e non dichiara di riprodurre la griglia ufficiale.
Anatomia dell’accordion del sistema di design DSFR
Titolo, pulsante e pannello controllato
Il componente documentato include section.fr-accordion, heading.fr-accordion__title, button.fr-accordion__btn e un div.fr-collapse successivo. aria-controls del pulsante deve corrispondere all’id del pannello; aria-expanded ne descrive lo stato di apertura. Il livello del titolo dipende dalla gerarchia della pagina circostante.
Il pannello contiene elementi testuali appropriati, come paragrafi ed elenchi. Il JavaScript nativo DSFR gestisce la classe expanded; un’applicazione idonea non dovrebbe aggiungere un secondo gestore indipendente del clic che entri in conflitto con il componente. L’anteprima neutra implementa uno stato di apertura/chiusura altrettanto esplicito, a fini didattici.
Accordion raggruppati o indipendenti nel sistema di design DSFR
L’impostazione del gruppo modifica il comportamento
Per impostazione predefinita, un fr-accordions-group è collegato: quando si apre un elemento, l’altro elemento aperto si chiude. Impostando data-fr-group="false" è possibile mantenere aperti più pannelli. L’esempio mostra entrambe le modalità, così da confrontarne gli effetti sulle informazioni da consultare incrociandole.
Questa distinzione è importante per le istruzioni di preparazione. Chi consulta un elenco di documenti potrebbe aver bisogno di tenere aperto anche un pannello con un indirizzo. Un gruppo che consente di aprire un solo elemento alla volta risparmia spazio, ma nasconde ripetutamente il contesto. Scegli la modalità in base all’attività, non considerare il valore predefinito una regola editoriale.
La pagina sull’accessibilità va oltre il comportamento predefinito a runtime: consiglia di usare gruppi indipendenti per impostazione predefinita, poiché i gruppi collegati possono creare difficoltà d’uso. Per questo l’esempio inizia in modalità indipendente.
La modalità indipendente permette di confrontare due sezioni contemporaneamente.
La modalità collegata limita la visualizzazione a una sola sezione espansa.
Quando si cambia modalità, lo stato aria-expanded deve rimanere coerente.
Cosa mantenere visibile nel sistema di design DSFR
Non nascondere il passaggio essenziale
Le linee guida del componente consigliano gli accordion per contenuti lunghi, facoltativi o pertinenti solo in alcuni casi. Sconsigliano di nascondere informazioni che tutti gli utenti devono leggere, di usare gli accordion per contenuti molto brevi, di annidarvi controlli complessi o di inserirli in una finestra modale.
Di conseguenza, l’esempio mantiene visibili lo scopo e i controlli. Sono ripiegate solo le note facoltative sull’accesso alle sale, l’elenco delle attrezzature e la spiegazione dell’arrivo. Ogni titolo identifica una domanda specifica e i contenuti mostrati usano brevi paragrafi ed elenchi, anziché un secondo flusso interattivo.
Mantieni l’istruzione principale fuori dall’accordion.
Suddividi i contenuti di supporto in base alle domande dei lettori, non a una lunghezza arbitraria.
Usa un normale paragrafo quando una sezione contiene solo una risposta breve.
Verifica di tastiera e stato nel sistema di design DSFR
Verifica la struttura prima della decorazione
Ogni pulsante dell’anteprima neutra è un vero pulsante, quindi Invio e Spazio ne attivano il comportamento nativo del browser. Lo script modifica sia aria-expanded sia lo stato hidden del pannello controllato. Il pulsante non viene mai rimosso quando il pannello si chiude e il focus resta sul pulsante attivato.
Il selettore della modalità permette di confrontare subito il comportamento indipendente e quello collegato. Un piccolo indicatore di stato visibile elenca i pannelli aperti; è uno strumento didattico dell’esempio, non un componente ufficiale di DSFR. Alle larghezze ridotte, i titoli vanno a capo e il pulsante mantiene tutta la propria larghezza come area interattiva.
La pagina ufficiale sull’accessibilità documenta anche contrasti insufficienti al passaggio del puntatore nel tema scuro e specifiche limitazioni degli annunci per lettori di schermo e browser. Non dedurre che l’accessibilità sia completa solo perché il componente viene usato senza modifiche: verifica le limitazioni note per la versione e l’ambiente di distribuzione.
Integrazione nei progetti idonei del sistema di design DSFR
Carica le dipendenze del nucleo e del componente
La pagina ufficiale del codice elenca le dipendenze CSS del nucleo e dell’accordion, oltre agli script dei moduli del nucleo e dell’accordion. Una volta caricati, i componenti a runtime applicano automaticamente le funzionalità avanzate al markup documentato. La API pubblica consente di aprire un pannello con dsfr(element).collapse.disclose() dopo l’inizializzazione.
La procedura di installazione fornita è destinata a un progetto istituzionale idoneo. È stata verificata rispetto alle fonti, ma non viene eseguita in questa anteprima neutra, che intenzionalmente non dipende dal runtime di DSFR. Durante gli aggiornamenti, i team di produzione dovrebbero mantenere insieme la struttura ufficiale delle directory degli asset, il markup dei componenti e le condizioni d'uso aggiornate.
Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Accordion structure laboratory</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.6 Arial,sans-serif;color:#28251f;background:#faf9f6}main{max-width:54rem;margin:auto;padding:32px 24px}.notice{background:#eee9df;border-left:4px solid #6b573d;padding:16px}h1{font:700 32px/1.3 Georgia,serif;margin:24px 0}h2{font-size:18px;margin:0}.mode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}select{font:inherit;padding:10px;background:white;border:1px solid #777}section{border-bottom:1px solid #aaa18f}.trigger{font:700 18px/1.5 Arial,sans-serif;border:0;background:transparent;color:inherit;display:flex;justify-content:space-between;gap:16px;text-align:start;padding:20px 8px;width:100%;cursor:pointer}.trigger::after{content:'+'}.trigger[aria-expanded=true]::after{content:'−'}.panel{padding:0 24px 24px}.panel p{margin-top:0}:focus-visible{outline:3px solid #6b573d;outline-offset:3px}#state{font-size:14px;background:#eee9df;padding:12px;margin-top:24px}small{display:block;margin-top:24px;color:#625a4e;font-size:14px}[hidden]{display:none!important}@media(max-width:600px){main{padding:24px 16px}h1{font-size:28px}.panel{padding-inline:8px}}</style><main><div class="notice">Neutral interaction study · No DSFR visual identity or assets</div><h1>Prepare for a community workshop</h1><p>The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.</p><div class="mode"><label for="mode">Panel behaviour</label><select id="mode"><option value="independent">Independent: compare sections</option><option value="linked">Linked: one section at a time</option></select></div><div id="group"><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="access">Room access</button></h2><div class="panel" id="access" hidden><p>The fictional workshop room is reached from the courtyard. The step-free entrance is on the same level as the activity room.</p><p>Ask the example welcome desk for assistance if the courtyard route is unavailable. These are demonstration instructions, not a real venue guide.</p></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="equipment">Equipment to bring</button></h2><div class="panel" id="equipment" hidden><p>The example workshop uses simple paper materials. Bring the following if convenient:</p><ul><li>A notebook for your own observations.</li><li>A pencil or pen you can use comfortably.</li><li>Your fictional booking reference.</li></ul></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="arrival">What happens on arrival</button></h2><div class="panel" id="arrival" hidden><p>The example facilitator explains the activity before participants choose a seat. No personal information is collected by this demonstration.</p><p>Keep this panel open with the equipment list to compare the two instructions in independent mode.</p></div></section></div><p id="state" role="status">Open sections: none</p><small>Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.</small></main><script>const buttons=[...document.querySelectorAll('.trigger')],mode=document.querySelector('#mode');function set(b,open){b.setAttribute('aria-expanded',String(open));document.getElementById(b.getAttribute('aria-controls')).hidden=!open}function announce(){const names=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').map(b=>b.textContent);document.querySelector('#state').textContent='Open sections: '+(names.join(', ')||'none')}buttons.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';if(open&&mode.value==='linked')buttons.forEach(x=>set(x,false));set(b,open);announce()});mode.onchange=()=>{if(mode.value==='linked'){let retained=false;buttons.forEach(b=>{if(b.getAttribute('aria-expanded')==='true'){if(retained)set(b,false);retained=true}})}announce()};</script></html>
Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale.
Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima.
04
Configurazione dell'agente AI per sistema di design DSFR
Punto di partenza per l’implementazione
Installazione per progetti idonei verificata rispetto alle fonti; non eseguita nell'anteprima neutra. Rispetta l'ambito istituzionale e le condizioni ufficiali aggiornate. Copia la directory dist per mantenere i percorsi relativi degli asset dipendenti. L'archivio ZIP completo dell'esempio funzionante, disponibile in Sources, include anche le dipendenze esatte dell'anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory e poi apri http://localhost:8080/dsfr.html. Non aprire gli esempi basati su moduli tramite file://.
bash
# For a project within the documented DSFR institutional scope:
npm install @gouvfr/[email protected]
# Copy node_modules/@gouvfr/dsfr/dist to your public asset directory.
# In <head>:
# <link rel="stylesheet" href="/dsfr/core/core.min.css">
# <link rel="stylesheet" href="/dsfr/component/accordion/accordion.min.css">
# Before </body>:
# <script type="module" src="/dsfr/core/core.module.min.js"></script>
# <script type="module" src="/dsfr/component/accordion/accordion.module.min.js"></script>
Un prompt per il tuo progetto
Prompt per l’agente
Spiega la struttura e l'ambito dell'accordion di DSFR. Per un progetto statale idoneo, usa fr-accordion, fr-accordion__title, fr-accordion__btn e fr-collapse con id/aria-controls corrispondenti, gli asset core e accordion e data-fr-group=false quando il confronto richiede che più sezioni restino aperte. Per un'anteprima didattica indipendente, usa uno stile originale e neutro e indicala chiaramente come interpretazione strutturale; non caricare i font dell'identità statale né dichiarare che si tratti di un servizio ufficiale.
05
Fonti e ambito del sistema di progettazione sistema di design DSFR
DSFR ha un ambito d'uso istituzionale documentato. Questa pagina è un riferimento tecnico e la sua anteprima originale e neutra non è un servizio del governo francese né un'implementazione con il marchio DSFR.
