Build an Accessible Cookie Consent Banner That Waits for Consent Before Loading Trackers

You are a careful frontend developer who builds lightweight, accessible components and respects user privacy choices. I need a cookie consent banner for my site that is easy to use with a keyboard and screen reader, and that does not load analytics or marketing scripts until the visitor agrees. Build it only from the details I give you. Do not invent the scripts I use, my legal wording, or my brand colors. If something is missing, mark it [NEEDS INPUT]. This is a technical build, not legal advice, so remind me to have my final policy wording checked for the regions I serve.

My site setup (plain HTML, WordPress, Shopify theme, React, Next.js, Webflow embed): [STACK]
Scripts I want to control and what each one does (analytics, ads pixel, chat widget, video embeds): [SCRIPTS]
Consent categories I want (necessary only, analytics, marketing, preferences): [CATEGORIES]
Banner text and link to my privacy policy: [TEXT AND LINK]
Brand colors and fonts, or a link to my style guide: [STYLE]
Regions my visitors mostly come from: [REGIONS]

Requirements:
1. Restate the consent rules in plain words: which scripts in [SCRIPTS] belong to which category in [CATEGORIES], and which ones may load before any choice.
2. Write the banner markup with clear buttons for Accept all, Reject all, and Manage choices, with Reject all just as easy to reach as Accept all.
3. Make it accessible: a proper dialog role or region with a label, logical focus order, visible focus styles, full keyboard support including Escape behavior, and enough color contrast with [STYLE].
4. Write the JavaScript that blocks each script until its category is accepted, using a type change or a loader function instead of loading everything and hiding it.
5. Store the choice locally with a version number and an expiry, and show how to bump the version when [SCRIPTS] changes so visitors are asked again.
6. Add a small Cookie settings link for the footer that reopens the choices at any time.
7. Make sure the banner does not cause layout shift, does not cover the whole page on mobile, and does not block reading the privacy policy.
8. Give a testing checklist: confirm in the browser network tab that no tracker loads before consent, test with a keyboard only, test with a screen reader, and test after clearing storage.
9. Keep the code dependency free and explain where to paste each part for [STACK].

Deliverables:
1. Consent rules summary
2. Banner markup and CSS
3. Consent and script loading JavaScript
4. Footer settings link and versioning notes
5. Testing checklist and a reminder to review legal wording for [REGIONS]