lashman/whisper_voice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

WCAG: TextField, ComboBox, KeyRecorder - contrast, focus, accessible roles

Browse Source
This commit is contained in:
Your Name
2026-02-18 21:02:07 +02:00
parent f2f80fc863
commit d40c83cc45
3 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/ui/qml/ModernComboBox.qml
View File

@@ -10,6 +10,9 @@ ComboBox {
property color bgColor: "#1a1a20" property color bgColor: "#1a1a20"
property color popupColor: "#252530" property color popupColor: "#252530"
Accessible.role: Accessible.ComboBox
Accessible.name: control.displayText
delegate: ItemDelegate { delegate: ItemDelegate {
id: delegate id: delegate
width: control.width width: control.width
@@ -68,7 +71,7 @@ ComboBox {
context.lineTo(width, 0); context.lineTo(width, 0);
context.lineTo(width / 2, height); context.lineTo(width / 2, height);
context.closePath(); context.closePath();
context.fillStyle = control.pressed ? control.accentColor : "#888888"; context.fillStyle = control.pressed ? control.accentColor : "#ABABAB";
context.fill(); context.fill();
} }
} }
@@ -89,8 +92,8 @@ ComboBox {
implicitWidth: 140 implicitWidth: 140
implicitHeight: 40 implicitHeight: 40
color: control.bgColor color: control.bgColor
border.color: control.pressed || control.activeFocus ? control.accentColor : "#40ffffff" border.color: control.pressed || control.activeFocus ? control.accentColor : SettingsStyle.borderSubtle
border.width: 1 border.width: control.activeFocus ? SettingsStyle.focusRingWidth : 1
radius: 6 radius: 6
// Glow effect on focus (Simplified to just border for stability) // Glow effect on focus (Simplified to just border for stability)
@@ -114,7 +117,7 @@ ComboBox {
background: Rectangle { background: Rectangle {
color: control.popupColor color: control.popupColor
border.color: "#40ffffff" border.color: SettingsStyle.borderSubtle
border.width: 1 border.width: 1
radius: 6 radius: 6
} }

9
src/ui/qml/ModernKeySequenceRecorder.qml
View File

@@ -7,8 +7,11 @@ Rectangle {
implicitHeight: 32 implicitHeight: 32
color: "#1a1a20" color: "#1a1a20"
radius: 6 radius: 6
border.width: 1 activeFocusOnTab: true
border.color: activeFocus || recording ? SettingsStyle.accent : "#40ffffff" 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: "" property string currentSequence: ""
signal sequenceChanged(string seq) signal sequenceChanged(string seq)
@@ -26,7 +29,7 @@ Rectangle {
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: control.recording ? "Listening..." : (formatSequence(control.currentSequence) || "None") 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.family: "JetBrains Mono"
font.pixelSize: 13 font.pixelSize: 13
font.bold: true font.bold: true

15
src/ui/qml/ModernTextField.qml
View File

@@ -3,25 +3,28 @@ import QtQuick.Controls
TextField { TextField {
id: control id: control
property color accentColor: "#00f2ff" property color accentColor: "#00f2ff"
property color bgColor: "#1a1a20" property color bgColor: "#1a1a20"
placeholderTextColor: "#606060" Accessible.role: Accessible.EditableText
Accessible.name: control.placeholderText || "Text input"
placeholderTextColor: SettingsStyle.textDisabled
color: "#ffffff" color: "#ffffff"
font.family: "JetBrains Mono" font.family: "JetBrains Mono"
font.pixelSize: 14 font.pixelSize: 14
selectedTextColor: "#000000" selectedTextColor: "#000000"
selectionColor: accentColor selectionColor: accentColor
background: Rectangle { background: Rectangle {
implicitWidth: 200 implicitWidth: 200
implicitHeight: 40 implicitHeight: 40
color: control.bgColor color: control.bgColor
border.color: control.activeFocus ? control.accentColor : "#40ffffff" border.color: control.activeFocus ? control.accentColor : SettingsStyle.borderSubtle
border.width: 1 border.width: control.activeFocus ? SettingsStyle.focusRingWidth : 1
radius: 6 radius: 6
Behavior on border.color { ColorAnimation { duration: 150 } } Behavior on border.color { ColorAnimation { duration: 150 } }
} }
} }