DSFR Editorial

Content sections (Paragraphs) rendered with the components of the Système de design de l'État (DSFR, the French government design system), and a text filter that gives tables written in the editor the DSFR markup.

Built for site builders and webmasters of French public-sector Drupal sites: each section is a paragraph type with plain-language help texts, rendered by the matching DSFR component of UI Suite DSFR, with the accessibility rules of the RGAA applied by default rather than left to the editor.

Sections

• Text: formatted text.
• Accordions: the heading level of each question follows the section title (RGAA 9.1).
• Tabs: stable ids derived from the paragraph id.
• Alert: the type is conveyed by color and icon (RGAA 3.1).
• Callout, with an optional button.
• Highlight and Quote.
• Data table: the section title becomes the table caption (RGAA 5.4).
• Image: caption, and detailed description for informative images (RGAA 1.6).

Text filter: DSFR table markup

Wraps every table in the DSFR table containers (styling and horizontal scrolling on small screens) and adds the scope of header cells: col in the header row, row for a header cell starting a body row (RGAA 5.7). It applies to any text field. The status report warns when no text format keeps tables with this markup.

Requirements

• Drupal 10.3 or 11.
• Paragraphs and Entity Reference Revisions.
• Core Media and Media Library, with an image media type.
• UI Suite DSFR, or a sub-theme of it, as the front-end theme.

Similar projects

DSFR for Drupal - Editor provides a CKEditor filter for tables and quotes, for the DSFR for Drupal theme. DSFR Editorial targets UI Suite DSFR, provides the content sections themselves, and adds header scopes and table captions.

Legal notice

The DSFR terms of use reserve the design system, and the identity of the French State, to websites of the French public sphere. Check those terms before using it on any other website. This module provides markup and templates only; it does not ship the DSFR itself, the Marianne typeface, or any distinctive sign of the French State.