From 72a76f6d08a2d1ae72c677a8642f79e73ac6becd Mon Sep 17 00:00:00 2001
From: nishtha-agarwal-211 <nishthaagarwal937@gmail.com>
Date: Wed, 22 Jul 2026 18:20:27 +0530
Subject: [PATCH] feat(customizer): add keyboard navigation and ARIA
 accessibility to customizer controls (#8244)

---
 app/customize/components/ControlsPanel.tsx    |  6 +-
 .../ThemeQuickPresets.accessibility.test.tsx  | 57 ++++++++++++++-----
 .../ThemeQuickPresets.empty-fallback.test.tsx |  6 +-
 ...hemeQuickPresets.error-resilience.test.tsx |  4 +-
 ...hemeQuickPresets.mock-integration.test.tsx |  2 +-
 ...eQuickPresets.mouse-interactivity.test.tsx | 10 ++--
 ...ickPresets.responsive-breakpoints.test.tsx | 10 ++--
 .../components/ThemeQuickPresets.test.tsx     | 44 +++++++-------
 .../ThemeQuickPresets.theme-contrast.test.tsx | 10 ++--
 ...eQuickPresets.timezone-boundaries.test.tsx | 10 ++--
 .../components/ThemeQuickPresets.tsx          | 47 +++++++++++++--
 .../components/ThemeSelector.test.tsx         | 10 ++--
 app/customize/components/ThemeSelector.tsx    |  5 +-
 components/AdvancedColorPicker.tsx            | 21 ++++---
 components/dashboard/ThemeSelector.test.tsx   |  6 +-
 15 files changed, 162 insertions(+), 86 deletions(-)

diff --git a/app/customize/components/ControlsPanel.tsx b/app/customize/components/ControlsPanel.tsx
index f05e2bd09..c4f4321d6 100644
--- a/app/customize/components/ControlsPanel.tsx
+++ b/app/customize/components/ControlsPanel.tsx
@@ -37,7 +37,7 @@ function HexInput({
         <label
           htmlFor={`${id}-picker`}
           title="Open color picker"
-          className="relative shrink-0 w-9 h-9 rounded-xl border border-black/10 dark:border-white/10 overflow-hidden cursor-pointer hover:border-emerald-500/50 transition-colors"
+          className="relative shrink-0 w-9 h-9 rounded-xl border border-black/10 dark:border-white/10 overflow-hidden cursor-pointer hover:border-emerald-500/50 focus-within:ring-2 focus-within:ring-emerald-500 transition-colors"
           style={{ backgroundColor: swatchColor ?? '#1a1a1a' }}
         >
           {!swatchColor && (
@@ -70,7 +70,7 @@ function HexInput({
             onChange={(e) => onChange(e.target.value.replace(/^#/, ''))}
             placeholder={placeholder.replace(/^#/, '')}
             maxLength={6}
-            className="w-full min-w-0 bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl pl-7 pr-4 py-2.5 text-sm font-mono text-black dark:text-emerald-300 placeholder:text-gray-400 dark:placeholder:text-white/60 outline-none focus:border-emerald-500/50 transition-colors"
+            className="w-full min-w-0 bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl pl-7 pr-4 py-2.5 text-sm font-mono text-black dark:text-emerald-300 placeholder:text-gray-400 dark:placeholder:text-white/60 outline-none focus:border-emerald-500/50 focus-visible:ring-2 focus-visible:ring-emerald-500 transition-colors"
           />
         </div>
       </div>
@@ -164,7 +164,7 @@ export function ControlsPanel({
             value={username}
             onChange={(e) => onUsernameChange(e.target.value)}
             placeholder={t('customize.controls.username_placeholder')}
-            className="w-full min-w-0 bg-white/60 backdrop-blur-md border border-black/10 dark:bg-black/40 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm font-mono text-black dark:text-emerald-300 placeholder:text-gray-400 dark:placeholder:text-white/60 outline-none focus:border-emerald-500/50 transition-all duration-300"
+            className="w-full min-w-0 bg-white/60 backdrop-blur-md border border-black/10 dark:bg-black/40 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm font-mono text-black dark:text-emerald-300 placeholder:text-gray-400 dark:placeholder:text-white/60 outline-none focus:border-emerald-500/50 focus-visible:ring-2 focus-visible:ring-emerald-500 transition-all duration-300"
           />
         </ControlRow>
 
diff --git a/app/customize/components/ThemeQuickPresets.accessibility.test.tsx b/app/customize/components/ThemeQuickPresets.accessibility.test.tsx
index d67bf06fe..fc779e797 100644
--- a/app/customize/components/ThemeQuickPresets.accessibility.test.tsx
+++ b/app/customize/components/ThemeQuickPresets.accessibility.test.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { ThemeQuickPresets } from './ThemeQuickPresets';
 
@@ -17,31 +17,60 @@ vi.mock('../types', () => ({
 }));
 
 describe('ThemeQuickPresets Accessibility Standards & Screen Reader Aria Compliance', () => {
-  it('uses correct accessible label coordinates (aria-label and aria-pressed)', () => {
+  it('renders container with role="radiogroup" and accessible label', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
-    const darkBtn = screen.getByRole('button', { name: /apply dark theme/i });
-    expect(darkBtn).toHaveAttribute('aria-label', 'Apply dark theme');
-    expect(darkBtn).toHaveAttribute('aria-pressed', 'true');
-    const lightBtn = screen.getByRole('button', { name: /apply light theme/i });
-    expect(lightBtn).toHaveAttribute('aria-pressed', 'false');
+    const group = screen.getByRole('radiogroup', { name: /theme presets/i });
+    expect(group).toBeInTheDocument();
   });
 
-  it('ensures interactive buttons maintain visible focus outline behaviors', () => {
+  it('uses role="radio", aria-checked, and tabIndex={0} on theme tiles', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
-    const buttons = screen.getAllByRole('button');
-    expect(buttons.length).toBeGreaterThan(0);
-    buttons.forEach((btn) => {
+    const darkRadio = screen.getByRole('radio', { name: /apply dark theme/i });
+    expect(darkRadio).toHaveAttribute('aria-checked', 'true');
+    expect(darkRadio).toHaveAttribute('tabindex', '0');
+    expect(darkRadio).toHaveAttribute('aria-label', 'Apply dark theme');
+
+    const lightRadio = screen.getByRole('radio', { name: /apply light theme/i });
+    expect(lightRadio).toHaveAttribute('aria-checked', 'false');
+    expect(lightRadio).toHaveAttribute('tabindex', '0');
+  });
+
+  it('ensures interactive buttons maintain visible focus outline behaviors with focus-visible:ring-2', () => {
+    render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
+    const radios = screen.getAllByRole('radio');
+    expect(radios.length).toBeGreaterThan(0);
+    radios.forEach((btn) => {
       btn.focus();
       expect(document.activeElement).toBe(btn);
-      expect(btn).toBeVisible();
+      expect(btn).toHaveClass('focus-visible:ring-2');
     });
   });
 
+  it('announces applied theme preset via aria-live="polite" live region', () => {
+    render(<ThemeQuickPresets theme="neon" onThemeChange={vi.fn()} />);
+    const liveRegion = screen.getByRole('status');
+    expect(liveRegion).toHaveAttribute('aria-live', 'polite');
+    expect(liveRegion).toHaveTextContent(/neon theme preset applied/i);
+  });
+
+  it('supports arrow key navigation (ArrowRight / ArrowLeft) to cycle through themes', () => {
+    const onThemeChange = vi.fn();
+    render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
+    const darkRadio = screen.getByRole('radio', { name: /apply dark theme/i });
+
+    darkRadio.focus();
+    fireEvent.keyDown(darkRadio, { key: 'ArrowRight' });
+    expect(onThemeChange).toHaveBeenCalledWith('light');
+
+    fireEvent.keyDown(darkRadio, { key: 'ArrowLeft' });
+    expect(onThemeChange).toHaveBeenCalledWith('neon');
+  });
+
   it('announces tooltip labels via title attribute for screen reader accessibility', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
-    const darkBtn = screen.getByRole('button', { name: /apply dark theme/i });
+    const darkBtn = screen.getByRole('radio', { name: /apply dark theme/i });
     expect(darkBtn).toHaveAttribute('title', 'Dark');
-    const lightBtn = screen.getByRole('button', { name: /apply light theme/i });
+    const lightBtn = screen.getByRole('radio', { name: /apply light theme/i });
     expect(lightBtn).toHaveAttribute('title', 'Light');
   });
 
diff --git a/app/customize/components/ThemeQuickPresets.empty-fallback.test.tsx b/app/customize/components/ThemeQuickPresets.empty-fallback.test.tsx
index 94117da7d..e40d69793 100644
--- a/app/customize/components/ThemeQuickPresets.empty-fallback.test.tsx
+++ b/app/customize/components/ThemeQuickPresets.empty-fallback.test.tsx
@@ -10,14 +10,14 @@ describe('ThemeQuickPresets Edge Cases & Empty/Missing Inputs Verification', ()
       render(<ThemeQuickPresets theme="unknown-theme" onThemeChange={vi.fn()} />)
     ).not.toThrow();
 
-    expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('radio').length).toBeGreaterThan(0);
   });
 
   it('renders preset buttons while no active theme matches', () => {
     render(<ThemeQuickPresets theme="missing-theme" onThemeChange={vi.fn()} />);
 
     const activeButtons = screen
-      .getAllByRole('button')
+      .getAllByRole('radio')
       .filter((button) => button.getAttribute('aria-pressed') === 'true');
 
     expect(activeButtons).toHaveLength(0);
@@ -40,7 +40,7 @@ describe('ThemeQuickPresets Edge Cases & Empty/Missing Inputs Verification', ()
   it('renders buttons with fallback styling and accessible labels', () => {
     render(<ThemeQuickPresets theme="not-configured" onThemeChange={vi.fn()} />);
 
-    const buttons = screen.getAllByRole('button');
+    const buttons = screen.getAllByRole('radio');
 
     expect(buttons.length).toBeGreaterThan(0);
 
diff --git a/app/customize/components/ThemeQuickPresets.error-resilience.test.tsx b/app/customize/components/ThemeQuickPresets.error-resilience.test.tsx
index 01ee800b4..e80682b4c 100644
--- a/app/customize/components/ThemeQuickPresets.error-resilience.test.tsx
+++ b/app/customize/components/ThemeQuickPresets.error-resilience.test.tsx
@@ -36,7 +36,7 @@ describe('ThemeQuickPresets - Error Resilience', () => {
   it('renders normally without crashing', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
 
-    expect(screen.getByRole('button', { name: /apply dark theme/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /apply dark theme/i })).toBeInTheDocument();
   });
 
   it('recovers when child rendering throws', () => {
@@ -68,7 +68,7 @@ describe('ThemeQuickPresets - Error Resilience', () => {
 
     rerender(<ThemeQuickPresets theme="light" onThemeChange={onThemeChange} />);
 
-    expect(screen.getByRole('button', { name: /apply light theme/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /apply light theme/i })).toBeInTheDocument();
   });
 
   it('logs runtime errors through the error boundary', () => {
diff --git a/app/customize/components/ThemeQuickPresets.mock-integration.test.tsx b/app/customize/components/ThemeQuickPresets.mock-integration.test.tsx
index 854b6dac6..6159cf221 100644
--- a/app/customize/components/ThemeQuickPresets.mock-integration.test.tsx
+++ b/app/customize/components/ThemeQuickPresets.mock-integration.test.tsx
@@ -65,7 +65,7 @@ describe('ThemeQuickPresets', () => {
   it('renders one button for every selectable theme', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
 
-    expect(screen.getAllByRole('button')).toHaveLength(3);
+    expect(screen.getAllByRole('radio')).toHaveLength(3);
   });
 
   it('shows active theme styling', () => {
diff --git a/app/customize/components/ThemeQuickPresets.mouse-interactivity.test.tsx b/app/customize/components/ThemeQuickPresets.mouse-interactivity.test.tsx
index c6e13b060..26b6b3895 100644
--- a/app/customize/components/ThemeQuickPresets.mouse-interactivity.test.tsx
+++ b/app/customize/components/ThemeQuickPresets.mouse-interactivity.test.tsx
@@ -6,7 +6,7 @@ describe('ThemeQuickPresets mouse interactivity', () => {
   it('renders interactive theme buttons with tooltip titles', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
 
-    const darkButton = screen.getByRole('button', { name: /apply dark theme/i });
+    const darkButton = screen.getByRole('radio', { name: /apply dark theme/i });
 
     expect(darkButton).toHaveAttribute('title', 'Dark');
     expect(darkButton).toHaveAttribute('aria-pressed', 'true');
@@ -17,7 +17,7 @@ describe('ThemeQuickPresets mouse interactivity', () => {
 
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    fireEvent.click(screen.getByRole('button', { name: /apply light theme/i }));
+    fireEvent.click(screen.getByRole('radio', { name: /apply light theme/i }));
 
     expect(onThemeChange).toHaveBeenCalledTimes(1);
     expect(onThemeChange).toHaveBeenCalledWith('light');
@@ -26,7 +26,7 @@ describe('ThemeQuickPresets mouse interactivity', () => {
   it('keeps hoverable preset buttons styled with pointer cursor class support', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
 
-    const button = screen.getByRole('button', { name: /apply dark theme/i });
+    const button = screen.getByRole('radio', { name: /apply dark theme/i });
 
     fireEvent.mouseEnter(button);
 
@@ -36,7 +36,7 @@ describe('ThemeQuickPresets mouse interactivity', () => {
   it('preserves active overlay visuals while hovering the selected preset', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
 
-    const button = screen.getByRole('button', { name: /apply dark theme/i });
+    const button = screen.getByRole('radio', { name: /apply dark theme/i });
 
     fireEvent.mouseEnter(button);
 
@@ -49,7 +49,7 @@ describe('ThemeQuickPresets mouse interactivity', () => {
 
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    const neonButton = screen.getByRole('button', { name: /apply neon theme/i });
+    const neonButton = screen.getByRole('radio', { name: /apply neon theme/i });
 
     fireEvent.touchStart(neonButton);
     fireEvent.click(neonButton);
diff --git a/app/customize/components/ThemeQuickPresets.responsive-breakpoints.test.tsx b/app/customize/components/ThemeQuickPresets.responsive-breakpoints.test.tsx
index 580028d50..8d4b16d6d 100644
--- a/app/customize/components/ThemeQuickPresets.responsive-breakpoints.test.tsx
+++ b/app/customize/components/ThemeQuickPresets.responsive-breakpoints.test.tsx
@@ -36,7 +36,7 @@ describe('ThemeQuickPresets Responsive Breakpoints', () => {
 
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('radio').length).toBeGreaterThan(0);
   });
 
   it('renders the same preset buttons across viewport sizes', () => {
@@ -44,19 +44,19 @@ describe('ThemeQuickPresets Responsive Breakpoints', () => {
 
     const { rerender } = render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    const mobileCount = screen.getAllByRole('button').length;
+    const mobileCount = screen.getAllByRole('radio').length;
 
     setViewport(1280);
 
     rerender(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    expect(screen.getAllByRole('button')).toHaveLength(mobileCount);
+    expect(screen.getAllByRole('radio')).toHaveLength(mobileCount);
   });
 
   it('does not introduce fixed-width layout issues on small screens', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    const container = screen.getAllByRole('button')[0].parentElement;
+    const container = screen.getAllByRole('radio')[0].parentElement;
 
     expect(container).toBeTruthy();
     expect(container?.className).toContain('theme-quick-presets');
@@ -76,7 +76,7 @@ describe('ThemeQuickPresets Responsive Breakpoints', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
     expect(
-      screen.getByRole('button', {
+      screen.getByRole('radio', {
         name: /apply dark theme/i,
       })
     ).toHaveAttribute('aria-pressed', 'true');
diff --git a/app/customize/components/ThemeQuickPresets.test.tsx b/app/customize/components/ThemeQuickPresets.test.tsx
index 6dd87edea..0ce9bebbc 100644
--- a/app/customize/components/ThemeQuickPresets.test.tsx
+++ b/app/customize/components/ThemeQuickPresets.test.tsx
@@ -15,25 +15,25 @@ describe('ThemeQuickPresets', () => {
 
   it('renders without crashing', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
-    expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('radio').length).toBeGreaterThan(0);
   });
 
   it('renders a button for each valid theme key', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
-    const buttons = screen.getAllByRole('button');
+    const buttons = screen.getAllByRole('radio');
     expect(buttons.length).toBe(validKeys.length);
   });
 
   it('active theme button has aria-pressed="true"', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
-    const activeBtn = screen.getByRole('button', { name: /apply dark theme/i });
+    const activeBtn = screen.getByRole('radio', { name: /apply dark theme/i });
     expect(activeBtn.getAttribute('aria-pressed')).toBe('true');
   });
 
   it('inactive theme buttons have aria-pressed="false"', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
     const inactiveKey = validKeys.find((key) => key !== 'dark')!;
-    const inactiveBtn = screen.getByRole('button', {
+    const inactiveBtn = screen.getByRole('radio', {
       name: new RegExp(`apply ${inactiveKey} theme`, 'i'),
     });
     expect(inactiveBtn.getAttribute('aria-pressed')).toBe('false');
@@ -44,7 +44,7 @@ describe('ThemeQuickPresets', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
     const inactiveKey = validKeys.find((key) => key !== 'dark')!;
-    const inactiveBtn = screen.getByRole('button', {
+    const inactiveBtn = screen.getByRole('radio', {
       name: new RegExp(`apply ${inactiveKey} theme`, 'i'),
     });
 
@@ -55,7 +55,7 @@ describe('ThemeQuickPresets', () => {
 
   it('each button has an aria-label starting with "Apply"', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
-    const buttons = screen.getAllByRole('button');
+    const buttons = screen.getAllByRole('radio');
 
     buttons.forEach((button) => {
       expect(button.getAttribute('aria-label')).toMatch(/^Apply/i);
@@ -66,7 +66,7 @@ describe('ThemeQuickPresets', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
     validKeys.forEach((key) => {
-      const button = screen.getByRole('button', {
+      const button = screen.getByRole('radio', {
         name: new RegExp(`apply ${key} theme`, 'i'),
       });
 
@@ -77,12 +77,12 @@ describe('ThemeQuickPresets', () => {
   it('switching active theme updates aria-pressed correctly', () => {
     const { rerender } = render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    const darkBtn = screen.getByRole('button', { name: /apply dark theme/i });
+    const darkBtn = screen.getByRole('radio', { name: /apply dark theme/i });
     expect(darkBtn.getAttribute('aria-pressed')).toBe('true');
 
     rerender(<ThemeQuickPresets theme="neon" onThemeChange={onThemeChange} />);
 
-    const neonBtn = screen.getByRole('button', { name: /apply neon theme/i });
+    const neonBtn = screen.getByRole('radio', { name: /apply neon theme/i });
     expect(neonBtn.getAttribute('aria-pressed')).toBe('true');
     expect(darkBtn.getAttribute('aria-pressed')).toBe('false');
   });
@@ -90,8 +90,8 @@ describe('ThemeQuickPresets', () => {
   it('does not render buttons for auto or random themes', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    expect(screen.queryByRole('button', { name: /apply auto theme/i })).toBeNull();
-    expect(screen.queryByRole('button', { name: /apply random theme/i })).toBeNull();
+    expect(screen.queryByRole('radio', { name: /apply auto theme/i })).toBeNull();
+    expect(screen.queryByRole('radio', { name: /apply random theme/i })).toBeNull();
   });
 });
 
@@ -108,7 +108,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
 
     const { rerender } = render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    expect(screen.getAllByRole('button', { name: /apply .+ theme/i })).toHaveLength(
+    expect(screen.getAllByRole('radio', { name: /apply .+ theme/i })).toHaveLength(
       validKeys.length
     );
 
@@ -117,7 +117,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
 
     rerender(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    expect(screen.getAllByRole('button', { name: /apply .+ theme/i })).toHaveLength(
+    expect(screen.getAllByRole('radio', { name: /apply .+ theme/i })).toHaveLength(
       validKeys.length
     );
   });
@@ -125,7 +125,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
   it('checks rendering of all preset buttons with accessible labels', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    const presetButtons = screen.getAllByRole('button', { name: /apply .+ theme/i });
+    const presetButtons = screen.getAllByRole('radio', { name: /apply .+ theme/i });
     expect(presetButtons).toHaveLength(validKeys.length);
   });
 
@@ -133,14 +133,14 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
     expect(
-      screen.getByRole('button', { name: /apply dark theme/i }).getAttribute('aria-pressed')
+      screen.getByRole('radio', { name: /apply dark theme/i }).getAttribute('aria-pressed')
     ).toBe('true');
   });
 
   it('check if wrapper div uses flex and wrap so buttons reflow on narrow viewports', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    const buttons = screen.getAllByRole('button');
+    const buttons = screen.getAllByRole('radio');
     const wrapper = buttons.at(0)?.parentElement;
 
     expect(wrapper).not.toBeNull();
@@ -150,7 +150,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
   it('check if each preset button has theme bg colour(inline)', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    const buttons = screen.getAllByRole('button');
+    const buttons = screen.getAllByRole('radio');
 
     buttons.forEach((button) => {
       expect(button.getAttribute('style')).not.toBeNull();
@@ -161,7 +161,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
   it('checking if highcontrast is inactive when different theme is active', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
-    const highContrastButton = screen.getByRole('button', {
+    const highContrastButton = screen.getByRole('radio', {
       name: /apply highcontrast theme/i,
     });
 
@@ -171,7 +171,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
   it('check if highcontrast button becomes active when selected', () => {
     render(<ThemeQuickPresets theme="highcontrast" onThemeChange={onThemeChange} />);
 
-    const highContrastButton = screen.getByRole('button', {
+    const highContrastButton = screen.getByRole('radio', {
       name: /apply highcontrast theme/i,
     });
 
@@ -186,7 +186,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
       <ThemeQuickPresets theme="highcontrast" onThemeChange={onThemeChange} />
     );
 
-    const mobileButtons = screen.getAllByRole('button', { name: /apply .+ theme/i });
+    const mobileButtons = screen.getAllByRole('radio', { name: /apply .+ theme/i });
     expect(mobileButtons).toHaveLength(validKeys.length);
 
     mobileButtons.forEach((button) => {
@@ -194,7 +194,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
       expect(button.getAttribute('aria-label')).toMatch(/^Apply/i);
     });
 
-    const mobileHighContrastButton = screen.getByRole('button', {
+    const mobileHighContrastButton = screen.getByRole('radio', {
       name: /apply highcontrast theme/i,
     });
 
@@ -207,7 +207,7 @@ describe('ThemeQuickPresets responsive rendering & high-contrast', () => {
 
     rerender(<ThemeQuickPresets theme="highcontrast" onThemeChange={onThemeChange} />);
 
-    const desktopHighContrastButton = screen.getByRole('button', {
+    const desktopHighContrastButton = screen.getByRole('radio', {
       name: /apply highcontrast theme/i,
     });
 
diff --git a/app/customize/components/ThemeQuickPresets.theme-contrast.test.tsx b/app/customize/components/ThemeQuickPresets.theme-contrast.test.tsx
index 4670243fb..b738d59d8 100644
--- a/app/customize/components/ThemeQuickPresets.theme-contrast.test.tsx
+++ b/app/customize/components/ThemeQuickPresets.theme-contrast.test.tsx
@@ -8,7 +8,7 @@ describe('ThemeQuickPresets Theme Contrast', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
 
     expect(
-      screen.getByRole('button', {
+      screen.getByRole('radio', {
         name: /apply dark theme/i,
       })
     ).toBeInTheDocument();
@@ -18,7 +18,7 @@ describe('ThemeQuickPresets Theme Contrast', () => {
     render(<ThemeQuickPresets theme="light" onThemeChange={vi.fn()} />);
 
     expect(
-      screen.getByRole('button', {
+      screen.getByRole('radio', {
         name: /apply light theme/i,
       })
     ).toBeInTheDocument();
@@ -28,7 +28,7 @@ describe('ThemeQuickPresets Theme Contrast', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
 
     expect(
-      screen.getByRole('button', {
+      screen.getByRole('radio', {
         name: /apply dark theme/i,
       })
     ).toHaveAttribute('aria-pressed', 'true');
@@ -41,7 +41,7 @@ describe('ThemeQuickPresets Theme Contrast', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
     await user.click(
-      screen.getByRole('button', {
+      screen.getByRole('radio', {
         name: /apply light theme/i,
       })
     );
@@ -52,7 +52,7 @@ describe('ThemeQuickPresets Theme Contrast', () => {
   it('renders preset buttons with theme styling', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={vi.fn()} />);
 
-    const button = screen.getByRole('button', {
+    const button = screen.getByRole('radio', {
       name: /apply dark theme/i,
     });
 
diff --git a/app/customize/components/ThemeQuickPresets.timezone-boundaries.test.tsx b/app/customize/components/ThemeQuickPresets.timezone-boundaries.test.tsx
index 30db75e8c..e45af25cf 100644
--- a/app/customize/components/ThemeQuickPresets.timezone-boundaries.test.tsx
+++ b/app/customize/components/ThemeQuickPresets.timezone-boundaries.test.tsx
@@ -27,11 +27,11 @@ describe('ThemeQuickPresets - timezone boundaries', () => {
 
     const expectedButtons = THEME_KEYS.filter((key) => key !== 'auto' && key !== 'random');
 
-    expect(screen.getAllByRole('button')).toHaveLength(expectedButtons.length);
+    expect(screen.getAllByRole('radio')).toHaveLength(expectedButtons.length);
 
     expectedButtons.forEach((key) => {
       expect(
-        screen.getByRole('button', {
+        screen.getByRole('radio', {
           name: new RegExp(`Apply ${key} theme`, 'i'),
         })
       ).toBeInTheDocument();
@@ -44,7 +44,7 @@ describe('ThemeQuickPresets - timezone boundaries', () => {
     render(<ThemeQuickPresets theme="neon" onThemeChange={vi.fn()} />);
 
     expect(
-      screen.getByRole('button', {
+      screen.getByRole('radio', {
         name: /Apply neon theme/i,
       })
     ).toHaveAttribute('aria-pressed', 'true');
@@ -58,7 +58,7 @@ describe('ThemeQuickPresets - timezone boundaries', () => {
     render(<ThemeQuickPresets theme="dark" onThemeChange={onThemeChange} />);
 
     fireEvent.click(
-      screen.getByRole('button', {
+      screen.getByRole('radio', {
         name: /Apply light theme/i,
       })
     );
@@ -92,7 +92,7 @@ describe('ThemeQuickPresets - timezone boundaries', () => {
 
       render(<ThemeQuickPresets theme="github" onThemeChange={vi.fn()} />);
 
-      expect(screen.getAllByRole('button')).toHaveLength(expected);
+      expect(screen.getAllByRole('radio')).toHaveLength(expected);
     }
   });
 });
diff --git a/app/customize/components/ThemeQuickPresets.tsx b/app/customize/components/ThemeQuickPresets.tsx
index e770fcff7..f7d52fc38 100644
--- a/app/customize/components/ThemeQuickPresets.tsx
+++ b/app/customize/components/ThemeQuickPresets.tsx
@@ -1,5 +1,5 @@
 // app/customize/components/ThemeQuickPresets.tsx
-import type { ReactElement } from 'react';
+import { useRef, type ReactElement } from 'react';
 import { themes } from '../../../lib/svg/themes';
 import { THEME_KEYS, type ThemeKey } from '../types';
 import './ThemeQuickPresets.css';
@@ -517,10 +517,39 @@ const ICON_MAP: Record<string, (c: IC) => ReactElement> = {
 };
 
 export function ThemeQuickPresets({ theme, onThemeChange }: ThemeQuickPresetsProps): ReactElement {
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const validKeys = THEME_KEYS.filter((key) => key !== 'auto' && key !== 'random');
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
+    let targetIndex = -1;
+
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      targetIndex = (index + 1) % validKeys.length;
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      targetIndex = (index - 1 + validKeys.length) % validKeys.length;
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      targetIndex = 0;
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      targetIndex = validKeys.length - 1;
+    }
+
+    if (targetIndex !== -1) {
+      const nextKey = validKeys[targetIndex];
+      onThemeChange(nextKey);
+      buttonRefs.current[targetIndex]?.focus();
+    }
+  };
+
+  const formattedThemeName = theme.charAt(0).toUpperCase() + theme.slice(1);
+
   return (
     <>
-      <div className="theme-quick-presets">
-        {THEME_KEYS.filter((key) => key !== 'auto' && key !== 'random').map((key) => {
+      <div className="theme-quick-presets" role="radiogroup" aria-label="Theme presets">
+        {validKeys.map((key, index) => {
           const t = themes[key as ThemeKey];
           if (!t) return null;
 
@@ -535,12 +564,19 @@ export function ThemeQuickPresets({ theme, onThemeChange }: ThemeQuickPresetsPro
           return (
             <button
               key={key}
+              ref={(el) => {
+                buttonRefs.current[index] = el;
+              }}
               type="button"
+              role="radio"
+              tabIndex={0}
+              aria-checked={isActive}
               title={key.charAt(0).toUpperCase() + key.slice(1)}
               aria-label={`Apply ${key} theme`}
               aria-pressed={isActive}
               onClick={() => onThemeChange(key)}
-              className={`tqp-btn${isActive ? ' tqp-on' : ''}`}
+              onKeyDown={(e) => handleKeyDown(e, index)}
+              className={`tqp-btn${isActive ? ' tqp-on' : ''} focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900 outline-none`}
               style={{
                 background: `linear-gradient(145deg, rgba(255,255,255,0.1), #${t.bg} 0%)`,
               }}
@@ -553,6 +589,9 @@ export function ThemeQuickPresets({ theme, onThemeChange }: ThemeQuickPresetsPro
           );
         })}
       </div>
+      <div className="sr-only" aria-live="polite" aria-atomic="true" role="status">
+        {`${formattedThemeName} theme preset applied`}
+      </div>
     </>
   );
 }
diff --git a/app/customize/components/ThemeSelector.test.tsx b/app/customize/components/ThemeSelector.test.tsx
index e70ef7cec..e22e1cedf 100644
--- a/app/customize/components/ThemeSelector.test.tsx
+++ b/app/customize/components/ThemeSelector.test.tsx
@@ -101,7 +101,7 @@ describe('ThemeSelector - Custom Variations (Variation 4)', () => {
     render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
 
     // Select Dracula preset via accessibility query
-    const draculaBtn = screen.getByRole('button', { name: /apply dracula theme/i });
+    const draculaBtn = screen.getByRole('radio', { name: /apply dracula theme/i });
     expect(draculaBtn).toBeTruthy();
 
     // Click it
@@ -116,7 +116,7 @@ describe('ThemeSelector - Custom Variations (Variation 4)', () => {
     render(<ThemeSelector theme="dark" onThemeChange={onThemeChange} />);
 
     // Select Neon preset via accessibility query
-    const neonBtn = screen.getByRole('button', { name: /apply neon theme/i });
+    const neonBtn = screen.getByRole('radio', { name: /apply neon theme/i });
     expect(neonBtn).toBeTruthy();
 
     // Click it
@@ -159,16 +159,16 @@ describe('ThemeSelector responsive rendering', () => {
     const { rerender } = render(<ThemeSelector theme="dracula" onThemeChange={onThemeChange} />);
 
     expect(
-      screen.getByRole('button', { name: /apply dracula theme/i }).getAttribute('aria-pressed')
+      screen.getByRole('radio', { name: /apply dracula theme/i }).getAttribute('aria-pressed')
     ).toBe('true');
 
     rerender(<ThemeSelector theme="neon" onThemeChange={onThemeChange} />);
 
     expect(
-      screen.getByRole('button', { name: /apply neon theme/i }).getAttribute('aria-pressed')
+      screen.getByRole('radio', { name: /apply neon theme/i }).getAttribute('aria-pressed')
     ).toBe('true');
     expect(
-      screen.getByRole('button', { name: /apply dracula theme/i }).getAttribute('aria-pressed')
+      screen.getByRole('radio', { name: /apply dracula theme/i }).getAttribute('aria-pressed')
     ).toBe('false');
   });
 
diff --git a/app/customize/components/ThemeSelector.tsx b/app/customize/components/ThemeSelector.tsx
index 425a4c031..e014c664e 100644
--- a/app/customize/components/ThemeSelector.tsx
+++ b/app/customize/components/ThemeSelector.tsx
@@ -25,7 +25,7 @@ function StyledSelect({
       aria-label={ariaLabel}
       value={value}
       onChange={(e) => onChange(e.target.value)}
-      className="w-full bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-black dark:text-white outline-none focus:border-emerald-500/50 transition-colors appearance-none cursor-pointer [color-scheme:light] dark:[color-scheme:dark] [&>option]:bg-white [&>option]:text-black dark:[&>option]:bg-[#0a0a0a] dark:[&>option]:text-white"
+      className="w-full bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-black dark:text-white outline-none focus:border-emerald-500/50 focus-visible:ring-2 focus-visible:ring-emerald-500 transition-colors appearance-none cursor-pointer [color-scheme:light] dark:[color-scheme:dark] [&>option]:bg-white [&>option]:text-black dark:[&>option]:bg-[#0a0a0a] dark:[&>option]:text-white"
     >
       {children}
     </select>
@@ -57,7 +57,8 @@ export function ThemeSelector({
         <button
           onClick={handleRandomTheme}
           title="Pick a random theme"
-          className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-white/50 hover:text-white hover:bg-white/10 transition-all"
+          aria-label="Shuffle"
+          className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-white/50 hover:text-white hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-emerald-500 outline-none transition-all"
         >
           <Shuffle className="w-3.5 h-3.5" />
           Shuffle
diff --git a/components/AdvancedColorPicker.tsx b/components/AdvancedColorPicker.tsx
index 0177ccdbf..1ec62dddc 100644
--- a/components/AdvancedColorPicker.tsx
+++ b/components/AdvancedColorPicker.tsx
@@ -229,7 +229,7 @@ export default function AdvancedColorPicker({
           <button
             type="button"
             onClick={() => setActiveTab('presets')}
-            className={`flex-1 text-xs font-medium py-1.5 rounded-md transition-all ${
+            className={`flex-1 text-xs font-medium py-1.5 rounded-md transition-all focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 outline-none ${
               activeTab === 'presets'
                 ? 'bg-zinc-700 dark:bg-white text-zinc-100 dark:text-slate-900 shadow-sm'
                 : 'text-zinc-400 dark:text-slate-400 hover:text-zinc-200 dark:hover:text-slate-700'
@@ -241,7 +241,7 @@ export default function AdvancedColorPicker({
         <button
           type="button"
           onClick={() => setActiveTab('picker')}
-          className={`flex-1 text-xs font-medium py-1.5 rounded-md transition-all ${
+          className={`flex-1 text-xs font-medium py-1.5 rounded-md transition-all focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 outline-none ${
             activeTab === 'picker'
               ? 'bg-zinc-700 dark:bg-white text-zinc-100 dark:text-slate-900 shadow-sm'
               : 'text-zinc-400 dark:text-slate-400 hover:text-zinc-200 dark:hover:text-slate-700'
@@ -258,6 +258,8 @@ export default function AdvancedColorPicker({
               key={hex}
               type="button"
               title={label}
+              aria-label={label}
+              aria-pressed={value === hex}
               onClick={() => updateColor(hex)}
               className={`w-9 h-9 rounded-full transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 ${
                 value === hex
@@ -277,7 +279,9 @@ export default function AdvancedColorPicker({
               ref={spectrumCanvasRef}
               width={spectrumSize}
               height={Math.round(spectrumSize * 0.5)}
-              className="w-full rounded-lg cursor-crosshair"
+              className="w-full rounded-lg cursor-crosshair focus-visible:ring-2 focus-visible:ring-blue-500 outline-none"
+              tabIndex={0}
+              aria-label="Color spectrum canvas"
               style={{ height: `${Math.round(spectrumSize * 0.5)}px` }}
               onMouseDown={(e) => {
                 draggingRef.current = 'spectrum';
@@ -295,7 +299,9 @@ export default function AdvancedColorPicker({
               ref={hueCanvasRef}
               width={spectrumSize}
               height={hueHeight}
-              className="w-full rounded-md cursor-pointer"
+              className="w-full rounded-md cursor-pointer focus-visible:ring-2 focus-visible:ring-blue-500 outline-none"
+              tabIndex={0}
+              aria-label="Color hue slider"
               style={{ height: `${hueHeight}px` }}
               onMouseDown={(e) => {
                 draggingRef.current = 'hue';
@@ -325,7 +331,7 @@ export default function AdvancedColorPicker({
                     hexError
                       ? 'border-red-500 text-red-400 dark:text-red-600'
                       : 'border-zinc-700 dark:border-slate-400 text-zinc-200 dark:text-slate-800'
-                  } focus:outline-none focus:ring-1 focus:ring-blue-500 transition-colors`}
+                  } focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 transition-colors`}
                 />
               </div>
               <div className="flex items-center gap-1">
@@ -341,7 +347,7 @@ export default function AdvancedColorPicker({
                       max={255}
                       value={rgb[ch]}
                       onChange={(e) => handleRgbChange(ch, e.target.value)}
-                      className="w-10 px-1 py-1 text-[10px] font-mono rounded-md border border-zinc-700 dark:border-slate-400 bg-zinc-900 dark:bg-slate-100 text-zinc-200 dark:text-slate-800 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-colors [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                      className="w-10 px-1 py-1 text-[10px] font-mono rounded-md border border-zinc-700 dark:border-slate-400 bg-zinc-900 dark:bg-slate-100 text-zinc-200 dark:text-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 transition-colors [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                     />
                   </div>
                 ))}
@@ -358,7 +364,8 @@ export default function AdvancedColorPicker({
                 onClick={handleEyedropper}
                 disabled={isPicking}
                 title="Pick color from page"
-                className="w-8 h-8 flex items-center justify-center rounded-md border border-zinc-700 dark:border-slate-400 bg-zinc-900 dark:bg-slate-100 hover:bg-zinc-800 dark:hover:bg-slate-200 transition-colors disabled:opacity-50"
+                aria-label="Pick color from page"
+                className="w-8 h-8 flex items-center justify-center rounded-md border border-zinc-700 dark:border-slate-400 bg-zinc-900 dark:bg-slate-100 hover:bg-zinc-800 dark:hover:bg-slate-200 focus-visible:ring-2 focus-visible:ring-blue-500 outline-none transition-colors disabled:opacity-50"
               >
                 {isPicking ? (
                   <svg
diff --git a/components/dashboard/ThemeSelector.test.tsx b/components/dashboard/ThemeSelector.test.tsx
index a73639c3d..ac02f5675 100644
--- a/components/dashboard/ThemeSelector.test.tsx
+++ b/components/dashboard/ThemeSelector.test.tsx
@@ -74,7 +74,7 @@ describe('ThemeSelector (ThemeQuickPresets)', () => {
 
     rerender(<ThemeQuickPresets theme="neon" onThemeChange={mockOnThemeChange} />);
 
-    const buttons = screen.getAllByRole('button');
+    const buttons = screen.getAllByRole('radio');
 
     expect(buttons.length).toBeGreaterThanOrEqual(2);
 
@@ -92,7 +92,7 @@ describe('ThemeSelector (ThemeQuickPresets)', () => {
   it('renders all preset buttons as visible elements', () => {
     renderComponent();
 
-    const buttons = screen.getAllByRole('button');
+    const buttons = screen.getAllByRole('radio');
 
     expect(buttons.length).toBeGreaterThanOrEqual(2);
     buttons.forEach((btn) => {
@@ -135,7 +135,7 @@ describe('ThemeSelector (ThemeQuickPresets)', () => {
   it('each button has a valid accessible name', () => {
     renderComponent();
 
-    const buttons = screen.getAllByRole('button');
+    const buttons = screen.getAllByRole('radio');
     buttons.forEach((btn) => {
       expect(btn.getAttribute('aria-label')).toBeTruthy();
     });