Granular Consent Multi-Action Banner Block for React

No. It is a section named by its heading, in the flow of the page, with real switches and buttons, so people can read the page, tab past it or scroll on. Screen readers list it with the page's regions. To pin it to the bottom of the screen, put fixed inset-x-4 bottom-4 z-50 on the card's outer element (the one with max-w-2xl) and remove the py-8 md:py-12 padding on the wrapper above it. Add pb-[env(safe-area-inset-bottom)] if your layout needs it. It still never takes focus on its own.

Edit the CATEGORIES list at the top of the file: an id, a label, one description line and locked for a category that can't be turned off. The cells are generated from it and the count in the footer follows. Keep the list at four, or an even number, so the cells fill both columns of the grid and no hole shows the hairline colour; with an odd number, let the last cell span both columns with sm:col-span-2.

Showing it as a locked switch tells people what is on without hiding it. The switch is disabled and starts on, and its description ends with "Always on", so a screen reader hears the name, the on state and the reason. Cookies that are strictly necessary don't need consent in most regions, so listing them is a courtesy rather than a choice.

Nothing in this block: it forgets on purpose so the preview always shows it. Wire the two handlers to your consent store: write the allowed list to a first-party cookie, send it to your tag manager, and have the server skip rendering the card when the cookie exists. Reading a stored value after the first paint would show the card and then fold it away, moving the page, so decide on the server. Accept all sets every category to on before folding, and the footer count follows.

The buttons can't keep focus once the card is folded and inert, so focus moves to a visually hidden line at the same spot, "Cookie choices saved.", which screen readers read. The next Tab carries on from there. With reduced motion the card closes at once.

Save choices is the Shine Button and Accept all is an outline Button of the same size, so Save carries the colour. Some regulators read colour as weight; if yours does, make both buttons outline and drop the Shine Button, so accepting everything is never easier to spot than saving a partial choice.

The cells stack in one column, each with its switch at the end and a description that wraps to two lines at most, and the footer stacks: the count, then Save and Accept all at full width. It stays under one screen at 320 pixels with nothing scrolling sideways, and in a right-to-left layout everything mirrors.