From fe5baec1727d3d5d471ab145bc4e66241d87a27f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 19 Feb 2026 19:50:54 +0200
Subject: [PATCH] add ARIA tab roles, pressed states, and labels to settings
 dialog

---
 src/components/settings/SettingsDialog.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/SettingsDialog.tsx b/src/components/settings/SettingsDialog.tsx
index c2b1299..fc34286 100644
--- a/src/components/settings/SettingsDialog.tsx
+++ b/src/components/settings/SettingsDialog.tsx
@@ -132,10 +132,12 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
             </DialogHeader>
 
             {/* Tab bar */}
-            <div className="flex gap-1 border-b border-border pb-2">
+            <div className="flex gap-1 border-b border-border pb-2" role="tablist" aria-label="Settings sections">
               {TABS.map((t) => (
                 <Button
                   key={t.value}
+                  role="tab"
+                  aria-selected={tab === t.value}
                   variant={tab === t.value ? "secondary" : "ghost"}
                   size="sm"
                   onClick={() => setTab(t.value)}
@@ -150,6 +152,8 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
             <AnimatePresence mode="popLayout" initial={false}>
               <motion.div
                 key={tab}
+                role="tabpanel"
+                aria-label={`${tab} settings`}
                 className="flex flex-col gap-5"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
@@ -166,6 +170,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                     <Button
                       key={value}
                       type="button"
+                      aria-pressed={settings.theme === value}
                       variant={settings.theme === value ? "default" : "outline"}
                       size="sm"
                       onClick={() => setTheme(value)}
@@ -193,6 +198,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                         variant="ghost"
                         size="icon-xs"
                         onClick={() => setUiZoom(1)}
+                        aria-label="Reset zoom"
                         className="text-pylon-text-secondary hover:text-pylon-text"
                       >
                         <RotateCcw className="size-3" />
@@ -207,6 +213,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                   step="0.05"
                   value={settings.uiZoom}
                   onChange={(e) => setUiZoom(parseFloat(e.target.value))}
+                  aria-label="UI Zoom level"
                   className="w-full accent-pylon-accent"
                 />
                 <div className="mt-1 flex justify-between font-mono text-[10px] text-pylon-text-secondary">
@@ -259,6 +266,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                     <Button
                       key={value}
                       type="button"
+                      aria-pressed={settings.density === value}
                       variant={settings.density === value ? "default" : "outline"}
                       size="sm"
                       onClick={() => setDensity(value)}
@@ -283,6 +291,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                     <Button
                       key={String(value)}
                       type="button"
+                      aria-pressed={settings.reduceMotion === value}
                       variant={settings.reduceMotion === value ? "default" : "outline"}
                       size="sm"
                       onClick={() => setReduceMotion(value)}
@@ -304,6 +313,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                   <Button
                     key={value}
                     type="button"
+                    aria-pressed={settings.defaultColumnWidth === value}
                     variant={settings.defaultColumnWidth === value ? "default" : "outline"}
                     size="sm"
                     onClick={() => setDefaultColumnWidth(value)}