Level 2, declared on 2026-08-08 and unmeasured until that day. A sentence, three choices and a panel of categories, one of which is locked on. 1 banner on 1 painted screen, and it is the only component in the product whose shape is decided by law rather than by design. Measured in a browser at 390 and 1280, in both pointer branches.
The message, the categories and the actions. 22 elements against 28.
A component that stands once cannot be understood from where it stands. There is no second placement to compare it against and no state a screen shows you, so everything that matters about it is either in the stylesheet or in a law: which control may go dead, what Necessary means, why the row is the target and why a checkbox cannot take the system's press.
It was filed as unmeasured until today for the same reason as
account, which was walked the same day and deleted
the same day: it stands on no anchor screen, so nobody had read it
rendered, and a level printed without a reading is a guess. Walked today, the banner holds three
.btn, three inputs and three labels. It HOLDS button, so it is level 2.
| at 390 | at 1280 | |
|---|---|---|
| the banner | 293x712 | 911x508 |
| the three choices | 122, 129 and 259 wide, 47 tall: the third wraps to its own line | 279, 288 and 294 wide: three across |
| a category row | 233x36 with a mouse, 233x44 with a finger | 851x36, and 44 with a finger |
| the box | 18x18, everywhere and always | |
The three choices share the row and none of them collapses, because
each takes flex:1 1 auto with a 96px floor. That is the banner's decision about its
own row, which is exactly what a region is still allowed to say; everything else about the three
is button's.
Before 2026-08-08 the only thing a finger could hit was the box itself, 18x18 measured, and those three were the ONE control in the product that failed WCAG 2.5.8's 24x24 floor and had to be hit rather than read. Everything else under 24 in this product is a text link, which the criterion exempts.
The structure was decided in grey first and the painted twin followed,
which is the rule the two trees exist under: both carry the same three
<label class="cc-cat-main"> and neither disagrees with the other. The row went
from 18x18 to 233x36 with a mouse, 233x44 with a finger and 851x44 at 1280.
The box is still 18x18 and that is correct: it is a part inside the
target now rather than the target. And the accessible NAME did not move. A wrapping label
makes the row clickable; the name is voice/'s, and the aria-label
already says "Analytics cookies, off by default", which is more than the visible word. The
target changed and the name did not.
The 44 arrives from components/base.css under a coarse pointer,
the same way it arrives for every other family, and this file gives the row
--control-36 and a pointer cursor because it is a control now.
The box is a native checkbox with the browser's own appearance, and
background-color never reaches it. A rule written that way would read as done in
the source and paint nothing on the page, which is the one defect this repository keeps
paying for.
What the box DOES own is accent-color, and a ticked box is a flat
brass ground: exactly the case the pressed brass role was declared for on the
switch, because flat brass has no gradient angle to reverse. So
the press reads on a category that is ON, which is the category a person is about to turn
off, and the browser's own press covers the empty box.
There is no hover on the live boxes either, for the reason the press had to change mechanism: there is nothing paintable at rest short of removing the browser's appearance entirely, and redrawing the tick is a new component rather than a state.
One of the three is checked and disabled. It takes the locked opacity and a not-allowed cursor, and it is deliberately kept out of both pointer rules: no hover and no press. The whole message of that row is that it is on and stays on, so a control that answered a pointer would be inviting a click it will refuse.
And nothing else in this banner is ever disabled. Consent is always available, and a Reject that could go dead is the dark pattern this component exists to answer.
Reject is as easy to reach as Accept, always: same face, same size, same row, same order every time. That is not a visual preference, it is what the regulation the component implements requires, and it is the reason all three take the SAME emphasis from the button family rather than one of them taking the primary.
.cc-ph is four grey lines at half opacity standing in for the
page underneath, on 2 screens: the consent screen and the toast catalogue. It looks like a
skeleton and it is not one: a skeleton says content is
coming, and this says there is a page here and it is not the subject.
Two components with the same drawing and different meanings is exactly the case this kit exists to make legible, and the test is what happens next: a skeleton is replaced by content, and this is never replaced by anything.
And until 2026-08-10 this section made that argument with nothing to look
at. The case is "these two things are drawn alike and mean different things", which is the
one claim in the kit that cannot be made in prose: it needs both drawings, side by side. Four
classes stood on the screen and on no page here, .cc-page, .cc-ph,
.cc-ph-line and the .w90 width beside its three siblings.
The four widths are the same four the skeleton uses, and that is the
strongest evidence for the row above rather than against it: two components reaching for one set
of width utilities is the system working. What separates them is the meaning, and
aria-hidden on the whole block is where this one states it.
The row is the target, and the box is a part inside it. A target you have to aim at is a target that fails.
Reject is never harder than Accept. Same face, same size, same row.
A state has to be paintable on the element it is written for. The system's pressed ground cannot reach a native checkbox, so the press is written in the one property that can.
Never give a consent control a disabled state. Locked ON is a statement; a Reject that can go dead is a dark pattern.
Never write a rule a browser will ignore. A background on a native checkbox reads as done in the source and paints nothing on the page.
Never move the accessible name to make a target bigger. The
label wraps the row and the aria-label stays on the input; a name is voice/'s
property and this pass changed the target.
The level and its reason: the
molecules page. The stylesheet: components/cookie-consent.css. The three
choices: button. The flat-brass press this one borrows:
toggle. The words and the law behind them:
voice/docs/microcopy.md and ia/docs/pages/system.md. The floor:
components/base.css.