WCAG: GlowButton, SettingsSection, SettingsItem - contrast, accessible roles

src/ui/qml/GlowButton.qml

@@ -6,12 +6,15 @@ Button {
     text: "Button"
     
     property color accentColor: "#00f2ff"
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    activeFocusOnTab: true
 
     contentItem: Text {
         text: control.text
         font.pixelSize: 13
         font.bold: true
-        color: control.hovered ? "white" : "#9499b0"
+        color: control.hovered ? "white" : "#ABABAB"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
@@ -25,8 +28,8 @@ Button {
         opacity: control.down ? 0.7 : 1.0
         color: control.hovered ? Qt.rgba(1, 1, 1, 0.1) : Qt.rgba(1, 1, 1, 0.05)
         radius: 8
-        border.color: control.hovered ? control.accentColor : Qt.rgba(1, 1, 1, 0.1)
+        border.color: control.hovered ? control.accentColor : SettingsStyle.borderSubtle
-        border.width: 1
+        border.width: control.activeFocus ? SettingsStyle.focusRingWidth : 1
 
         Behavior on border.color { ColorAnimation { duration: 200 } }
         Behavior on color { ColorAnimation { duration: 200 } }

src/ui/qml/ModernSettingsItem.qml

@@ -18,6 +18,8 @@ Rectangle {
     property string description: ""
     property alias control: controlContainer.data
     property bool showSeparator: true
+    Accessible.name: root.label
+    Accessible.role: Accessible.Row
 
     Behavior on color { ColorAnimation { duration: 150 } }
 

src/ui/qml/ModernSettingsSection.qml

@@ -9,6 +9,8 @@ ColumnLayout {
     
     default property alias content: contentColumn.data
     property string title: ""
+    Accessible.name: root.title + " settings group"
+    Accessible.role: Accessible.Grouping
 
     // Section Header
     Text {