Derogation

Purpose

Derogating a content from the evaluation, with the nature the referential distinguishes and a required justification, or the derogation already posed with a way to take it back.

When to use, when not

Use it under an element’s question in a wizard. Not for a criterion: a criterion is never derogated, and the block says so.

Anatomy

1. Posed: the state line, the justification, “Retirer la dérogation”.
2. To pose: a disclosure, the help line, the nature as a radio group, the alternative checkbox for a disproportionate burden, the justification field, “Déroger ce contenu”.

Props

Props of Derogation

Name	Type	Default	What it does
label	string		The element, for the buttons' names: "Photo du produit".
justification	string | null		The justification of the derogation posed, or null when none is.
id	string		An id prefix, unique on the screen.
onderogate	(request: DerogationRequest) => void
onremove	() => void
class?	string	''	Layout classes only.

States

The form closed, the form open on a disproportionate burden, and a derogation posed.

closed

Closed by default: most elements are judged, not derogated.

Light

Déroger ce contenu

Dark

Déroger ce contenu

320 px, light

Déroger ce contenu

320 px, dark

Déroger ce contenu

216 px, light

Déroger ce contenu

Forced colours, captured

posed

A derogation posed: the word, the justification, the way back.

Light

Contenu dérogé, il ne compte plus dans l’évaluation des critères, qui restent évaluables sur le reste de la page.

Justification : Cartographie interactive, exemptée par le cadre légal.

Retirer la dérogation

Dark

Contenu dérogé, il ne compte plus dans l’évaluation des critères, qui restent évaluables sur le reste de la page.

Justification : Cartographie interactive, exemptée par le cadre légal.

Retirer la dérogation

320 px, light

Contenu dérogé, il ne compte plus dans l’évaluation des critères, qui restent évaluables sur le reste de la page.

Justification : Cartographie interactive, exemptée par le cadre légal.

Retirer la dérogation

320 px, dark

Contenu dérogé, il ne compte plus dans l’évaluation des critères, qui restent évaluables sur le reste de la page.

Justification : Cartographie interactive, exemptée par le cadre légal.

Retirer la dérogation

216 px, light

Contenu dérogé, il ne compte plus dans l’évaluation des critères, qui restent évaluables sur le reste de la page.

Justification : Cartographie interactive, exemptée par le cadre légal.

Retirer la dérogation

Forced colours, captured

Accessibility contract

• Role and name: the disclosure’s button “Déroger ce contenu”; a radio group with the legend “De quelle nature ?”; the field required and labelled; the two action buttons named with the element’s label.
• Keyboard, focus: the disclosure, then the form’s controls in order. The block is marked data-raccourcis="off", so the wizard’s letter shortcuts leave it alone while a sentence is typed.
• Live regions: the error is the field’s, tied by aria-describedby.

Content rules

French, the referential’s words: “exempté par le cadre légal”, “charge disproportionnée”. The justification names the content and the reason.

Do and don’t

• Do ask the nature before the justification: the two do not leave the count the same way.
• Do not pose a derogation without a justification; the form refuses it.

Examples

<Derogation id="derog-3" label="Photo du produit" justification={posed} onderogate={derogate} onremove={remove} />

Surfaces

• Extension: every inventory wizard.

Related

Disclosure, RadioGroup, Field, Checkbox, ResumeBanner.

Decisions

• 2026-09-26: the alternative checkbox shows only for a disproportionate burden, since the question has no meaning for an exempted content.
• 2026-09-27: the submit button’s name is its visible words followed by the element, “Déroger ce contenu, Photo du produit”, with no aria-label. The aria-label “Déroger « Photo du produit »” left out “ce contenu”, which fails label in name (criteria 6.1 and 11.9): a voice user saying what they see did not reach the button.

Criteria held by construction

• 11.1, Chaque champ de formulaire a-t-il une étiquette ?
  Every control of the form has its label: the natures as a radio group with a legend, the alternative as a checkbox, the justification as a field.
• 11.10, Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ?
  The justification is required and said so; an empty submission writes the error next to the field and posts nothing.
• 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  A derogation posed is said by the word and the drawing; the derogation ink on the line only confirms it.

Tokens it reads

• Colour: --rl-derogation, --rl-ink-soft, --rl-sunken
• Typography: --rl-text-sm
• Spacing: --rl-space-2, --rl-space-3
• Layout: --rl-radius