WCAG: Slider (24px, focus ring) + Switch (I/O marks, border token)

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