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

src/ui/qml/ModernSlider.qml

@@ -5,43 +5,64 @@ 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
+        implicitWidth: SettingsStyle.minTargetSize
-        implicitHeight: 18
+        implicitHeight: SettingsStyle.minTargetSize
-        radius: 9
-        color: "white"
-        border.color: SettingsStyle.accent
-        border.width: 2
 
-        layer.enabled: control.pressed
+        // Focus ring
-        layer.effect: MultiEffect {
+        Rectangle {
-            blurEnabled: true
+            anchors.centerIn: parent
-            blur: 0.5
+            width: parent.width + SettingsStyle.focusRingWidth * 2 + 2
-            shadowEnabled: true
+            height: width
-            shadowColor: SettingsStyle.accent
+            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

src/ui/qml/ModernSwitch.qml

@@ -4,6 +4,10 @@ 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
@@ -26,6 +32,15 @@ Switch {
             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"
+            }
         }
     }