WCAG: TextField, ComboBox, KeyRecorder - contrast, focus, accessible roles
This commit is contained in:
@@ -10,6 +10,9 @@ ComboBox {
|
||||
property color bgColor: "#1a1a20"
|
||||
property color popupColor: "#252530"
|
||||
|
||||
Accessible.role: Accessible.ComboBox
|
||||
Accessible.name: control.displayText
|
||||
|
||||
delegate: ItemDelegate {
|
||||
id: delegate
|
||||
width: control.width
|
||||
@@ -68,7 +71,7 @@ ComboBox {
|
||||
context.lineTo(width, 0);
|
||||
context.lineTo(width / 2, height);
|
||||
context.closePath();
|
||||
context.fillStyle = control.pressed ? control.accentColor : "#888888";
|
||||
context.fillStyle = control.pressed ? control.accentColor : "#ABABAB";
|
||||
context.fill();
|
||||
}
|
||||
}
|
||||
@@ -89,8 +92,8 @@ ComboBox {
|
||||
implicitWidth: 140
|
||||
implicitHeight: 40
|
||||
color: control.bgColor
|
||||
border.color: control.pressed || control.activeFocus ? control.accentColor : "#40ffffff"
|
||||
border.width: 1
|
||||
border.color: control.pressed || control.activeFocus ? control.accentColor : SettingsStyle.borderSubtle
|
||||
border.width: control.activeFocus ? SettingsStyle.focusRingWidth : 1
|
||||
radius: 6
|
||||
|
||||
// Glow effect on focus (Simplified to just border for stability)
|
||||
@@ -114,7 +117,7 @@ ComboBox {
|
||||
|
||||
background: Rectangle {
|
||||
color: control.popupColor
|
||||
border.color: "#40ffffff"
|
||||
border.color: SettingsStyle.borderSubtle
|
||||
border.width: 1
|
||||
radius: 6
|
||||
}
|
||||
|
||||
@@ -7,8 +7,11 @@ Rectangle {
|
||||
implicitHeight: 32
|
||||
color: "#1a1a20"
|
||||
radius: 6
|
||||
border.width: 1
|
||||
border.color: activeFocus || recording ? SettingsStyle.accent : "#40ffffff"
|
||||
activeFocusOnTab: true
|
||||
Accessible.role: Accessible.Button
|
||||
Accessible.name: control.currentSequence ? "Hotkey: " + control.currentSequence + ". Click to change" : "No hotkey set. Click to record"
|
||||
border.width: (activeFocus || recording) ? SettingsStyle.focusRingWidth : 1
|
||||
border.color: activeFocus || recording ? SettingsStyle.accent : SettingsStyle.borderSubtle
|
||||
|
||||
property string currentSequence: ""
|
||||
signal sequenceChanged(string seq)
|
||||
@@ -26,7 +29,7 @@ Rectangle {
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: control.recording ? "Listening..." : (formatSequence(control.currentSequence) || "None")
|
||||
color: control.recording ? SettingsStyle.accent : (control.currentSequence ? "#ffffff" : "#808080")
|
||||
color: control.recording ? SettingsStyle.accent : (control.currentSequence ? "#ffffff" : "#ABABAB")
|
||||
font.family: "JetBrains Mono"
|
||||
font.pixelSize: 13
|
||||
font.bold: true
|
||||
|
||||
@@ -3,25 +3,28 @@ import QtQuick.Controls
|
||||
|
||||
TextField {
|
||||
id: control
|
||||
|
||||
|
||||
property color accentColor: "#00f2ff"
|
||||
property color bgColor: "#1a1a20"
|
||||
|
||||
placeholderTextColor: "#606060"
|
||||
Accessible.role: Accessible.EditableText
|
||||
Accessible.name: control.placeholderText || "Text input"
|
||||
|
||||
placeholderTextColor: SettingsStyle.textDisabled
|
||||
color: "#ffffff"
|
||||
font.family: "JetBrains Mono"
|
||||
font.pixelSize: 14
|
||||
selectedTextColor: "#000000"
|
||||
selectionColor: accentColor
|
||||
|
||||
|
||||
background: Rectangle {
|
||||
implicitWidth: 200
|
||||
implicitHeight: 40
|
||||
color: control.bgColor
|
||||
border.color: control.activeFocus ? control.accentColor : "#40ffffff"
|
||||
border.width: 1
|
||||
border.color: control.activeFocus ? control.accentColor : SettingsStyle.borderSubtle
|
||||
border.width: control.activeFocus ? SettingsStyle.focusRingWidth : 1
|
||||
radius: 6
|
||||
|
||||
|
||||
Behavior on border.color { ColorAnimation { duration: 150 } }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user