Cookie Consent Footer Block for React

Add an entry to CATEGORIES at the top of the file (an id, a title and a description) and a matching key to the Choices type and OFF. Each entry draws one switch row, and the summary in the legal row is built by summary, so extend it with the new name. Essential is written out separately because it can't be turned off.

Nowhere yet: it lives in the block's state, so a reload starts from "no choice". In save and reject, write the result to the cookie or storage your consent logic reads and load your analytics and marketing scripts only when it says so; start saved from that value so the legal row shows it on load.

Yes, while it is open: it is a modal dialog the reader opened, so Tab stays inside it, Escape closes it and focus returns to the "Cookie settings" button. Nothing opens on load and nothing blocks the page until the button is pressed, which is why this is not a consent banner and takes none of the care a banner would need.

Each switch is named by its row's title and described by the sentence under it, so a screen reader reads "Analytics, switch, off, counts which pages are read…". Essential is a switch that is on and disabled, with "Always on" in its description, so it is clear why it can't be changed. Checked switches are foreground-coloured, so the Shine Button stays the one primary control.

Nothing changes. The switches are a draft that starts from the last saved choice each time the dialog opens, so Escape, the close button or a click outside discards it.

The columns run two to a row without their dividers, the legal row stacks and the dialog sticks to the bottom of the screen as a sheet. The result line keeps its height whether or not something is saved, so saving never moves the row.