Cookie Consent Settings Block for React

Edit PURPOSES: each purpose has a title, the sentence for each state and its cookies, each with a name and how long it is kept. The cell, the per-cookie rows and the count in the band all read from that list, so adding a cookie to a purpose is one line. Keep the names and lifetimes true to what your site really sets: this page is the record people read.

They are the ones the site cannot work without: the session that keeps you signed in, the token that blocks forged requests and the cookie that remembers these choices. The cell says so in words next to a lock, and its Switch is checked and disabled but still named for assistive technology ("Necessary cookies, always on"), so it is read, not skipped. Only list a cookie there if the site really breaks without it.

All of it, and nothing is written to cookies or storage: Save keeps the switches in this page's state, and a reload brings back the starting choices. To make it real, write the choices to your consent cookie on Save with a timestamp and a version of your policy, read them back before setting any cookie, and stop setting cookies of a purpose that is off (and delete the ones already set).

A cookie is Set when its purpose is on (necessary always is) and Blocked when it is off, shown as a filled or a hollow dot with the word beside it and the name struck through, so state never rests on the dot alone. The count in the band follows the switches, so turning analytics on moves it from 5 to 8 of 10 set in this sample.

They are always there and always answer. Save counts what changed and keeps it ("Saved 2 changes in this demo."), or says "No changes to save."; Discard puts the last saved choices back. The status line is a polite live region present from the start, and it says what each switch did ("Analytics cookies on.") until the change is saved or discarded.

The four cells stack in one column and keep their switches at the end of the title row, and the Save and Discard foot stays pinned to the bottom of the screen while the page scrolls. Each switch is named for its purpose and described by its sentence, so a screen reader hears what the switch does before it is turned.