From dc15e11e8ec93ffa004e36896694a84eec3394ac Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 18 Feb 2026 21:03:21 +0200
Subject: [PATCH] WCAG: Slider (24px, focus ring) + Switch (I/O marks, border
 token)

---
 src/ui/qml/ModernSlider.qml | 63 ++++++++++++++++++++++++-------------
 src/ui/qml/ModernSwitch.qml | 21 +++++++++++--
 2 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/src/ui/qml/ModernSlider.qml b/src/ui/qml/ModernSlider.qml
index f5ea09c..9acaa69 100644
--- a/src/ui/qml/ModernSlider.qml
+++ b/src/ui/qml/ModernSlider.qml
@@ -4,55 +4,76 @@ import QtQuick.Effects
 
 Slider {
     id: control
-    
+
+    Accessible.role: Accessible.Slider
+    Accessible.name: control.value.toString()
+    activeFocusOnTab: true
+
     background: Rectangle {
         x: control.leftPadding
         y: control.topPadding + control.availableHeight / 2 - height / 2
         implicitWidth: 200
-        implicitHeight: 4
+        implicitHeight: 6
         width: control.availableWidth
         height: implicitHeight
-        radius: 2
+        radius: 3
         color: "#2d2d3d"
 
         Rectangle {
             width: control.visualPosition * parent.width
             height: parent.height
             color: SettingsStyle.accent
-            radius: 2
+            radius: 3
         }
     }
 
-    handle: Rectangle {
+    handle: Item {
         x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
         y: control.topPadding + control.availableHeight / 2 - height / 2
-        implicitWidth: 18
-        implicitHeight: 18
-        radius: 9
-        color: "white"
-        border.color: SettingsStyle.accent
-        border.width: 2
-        
-        layer.enabled: control.pressed
-        layer.effect: MultiEffect {
-            blurEnabled: true
-            blur: 0.5
-            shadowEnabled: true
-            shadowColor: SettingsStyle.accent
+        implicitWidth: SettingsStyle.minTargetSize
+        implicitHeight: SettingsStyle.minTargetSize
+
+        // Focus ring
+        Rectangle {
+            anchors.centerIn: parent
+            width: parent.width + SettingsStyle.focusRingWidth * 2 + 2
+            height: width
+            radius: width / 2
+            color: "transparent"
+            border.width: SettingsStyle.focusRingWidth
+            border.color: SettingsStyle.accent
+            visible: control.activeFocus
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            radius: width / 2
+            color: "white"
+            border.color: SettingsStyle.accent
+            border.width: 2
+
+            layer.enabled: control.pressed
+            layer.effect: MultiEffect {
+                blurEnabled: true
+                blur: 0.5
+                shadowEnabled: true
+                shadowColor: SettingsStyle.accent
+            }
         }
     }
-    // Value Readout (Left side to avoid clipping on right edge)
+
+    // Value Readout
     Text {
         anchors.right: parent.left
         anchors.rightMargin: 12
         anchors.verticalCenter: parent.verticalCenter
         horizontalAlignment: Text.AlignRight
-        
+
         text: {
             var val = control.value
             return (val % 1 === 0) ? val.toFixed(0) : val.toFixed(1)
         }
-        
+
         color: SettingsStyle.textSecondary
         font.family: "JetBrains Mono"
         font.pixelSize: 12
diff --git a/src/ui/qml/ModernSwitch.qml b/src/ui/qml/ModernSwitch.qml
index d2db11b..2bd9bcb 100644
--- a/src/ui/qml/ModernSwitch.qml
+++ b/src/ui/qml/ModernSwitch.qml
@@ -3,7 +3,11 @@ import QtQuick.Controls
 
 Switch {
     id: control
-    
+
+    Accessible.role: Accessible.CheckBox
+    Accessible.name: control.text + (control.checked ? " on" : " off")
+    activeFocusOnTab: true
+
     indicator: Rectangle {
         implicitWidth: 44
         implicitHeight: 24
@@ -11,9 +15,11 @@ Switch {
         y: parent.height / 2 - height / 2
         radius: 12
         color: control.checked ? SettingsStyle.accent : "#2d2d3d"
-        border.color: control.checked ? SettingsStyle.accent : "#3d3d4d"
+        border.color: control.checked ? SettingsStyle.accent : SettingsStyle.borderSubtle
+        border.width: control.activeFocus ? SettingsStyle.focusRingWidth : 1
 
         Behavior on color { ColorAnimation { duration: 200 } }
+        Behavior on border.color { ColorAnimation { duration: 200 } }
 
         Rectangle {
             x: control.checked ? parent.width - width - 3 : 3
@@ -22,10 +28,19 @@ Switch {
             height: 18
             radius: 9
             color: "white"
-            
+
             Behavior on x {
                 NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
             }
+
+            // I/O pip marks for non-color state indication
+            Text {
+                anchors.centerIn: parent
+                text: control.checked ? "I" : "O"
+                font.pixelSize: 9
+                font.bold: true
+                color: control.checked ? SettingsStyle.accent : "#666666"
+            }
         }
     }