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

WCAG: Overlay - border, keyboard, accessibility, reduced motion

Browse Source
This commit is contained in:
Your Name
2026-02-18 21:06:43 +02:00
parent 07ad3b220d
commit d8707b5ade
1 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/ui/qml/Overlay.qml
View File

@@ -13,6 +13,8 @@ ApplicationWindow {
visible: true
flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint | Qt.Tool
color: "transparent"
title: "WhisperVoice"
Accessible.name: "WhisperVoice Overlay"
FontLoader {
id: jetBrainsMono
@@ -35,7 +37,7 @@ ApplicationWindow {
property bool isActive: ui.isRecording || ui.isProcessing
SequentialAnimation {
running: true
running: !ui.reduceMotion
loops: Animation.Infinite
PauseAnimation { duration: 3000 }
NumberAnimation {
@@ -96,6 +98,7 @@ ApplicationWindow {
ShaderEffect {
anchors.fill: parent
opacity: 0.4
visible: !ui.reduceMotion
property real time: 0
fragmentShader: "gradient_blobs.qsb"
NumberAnimation on time { from: 0; to: 1000; duration: 100000; loops: Animation.Infinite }
@@ -105,6 +108,7 @@ ApplicationWindow {
ShaderEffect {
anchors.fill: parent
opacity: 0.04
visible: !ui.reduceMotion
property real time: 0
property real intensity: ui.amplitude
fragmentShader: "glow.qsb"
@@ -115,6 +119,7 @@ ApplicationWindow {
ParticleSystem {
id: particles
anchors.fill: parent
running: !ui.reduceMotion
ItemParticle {
system: particles
delegate: Rectangle { width: 2; height: 2; radius: 1; color: "#10ffffff" }
@@ -143,6 +148,7 @@ ApplicationWindow {
// F. CRT Shader Effect (Overlay on chassis ONLY)
ShaderEffect {
anchors.fill: parent
visible: !ui.reduceMotion
property real time: 0
fragmentShader: "crt.qsb"
NumberAnimation on time { from: 0; to: 100; duration: 5000; loops: Animation.Infinite }
@@ -172,7 +178,7 @@ ApplicationWindow {
radius: height / 2
color: "transparent"
border.width: 1
border.color: "#40ffffff"
border.color: Qt.rgba(1, 1, 1, 0.22)
MouseArea {
anchors.fill: parent; hoverEnabled: true
@@ -194,7 +200,7 @@ ApplicationWindow {
NumberAnimation { duration: 150; easing.type: Easing.OutCubic }
}
SequentialAnimation on border.color {
running: ui.isRecording
running: ui.isRecording && !ui.reduceMotion
loops: Animation.Infinite
ColorAnimation { from: "#A0ff4b4b"; to: "#C0ff6b6b"; duration: 800 }
ColorAnimation { from: "#C0ff6b6b"; to: "#A0ff4b4b"; duration: 800 }
@@ -209,6 +215,11 @@ ApplicationWindow {
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
activeFocusOnTab: true
Accessible.name: ui.isRecording ? "Stop recording" : "Start recording"
Accessible.role: Accessible.Button
Keys.onReturnPressed: ui.toggleRecordingRequested()
Keys.onSpacePressed: ui.toggleRecordingRequested()
// Make entire button scale with amplitude
scale: ui.isRecording ? (1.0 + ui.amplitude * 0.12) : 1.0
@@ -245,7 +256,7 @@ ApplicationWindow {
border.width: 2; border.color: "#60ffffff"
SequentialAnimation on scale {
running: ui.isRecording
running: ui.isRecording && !ui.reduceMotion
loops: Animation.Infinite
NumberAnimation { from: 1.0; to: 1.08; duration: 600; easing.type: Easing.InOutQuad }
NumberAnimation { from: 1.08; to: 1.0; duration: 600; easing.type: Easing.InOutQuad }
@@ -263,6 +274,17 @@ ApplicationWindow {
fillMode: Image.PreserveAspectFit
}
}
// Focus ring
Rectangle {
anchors.fill: micCircle
anchors.margins: -4
radius: width / 2
color: "transparent"
border.width: 2
border.color: "#B794F6"
visible: micContainer.activeFocus
}
}
// --- RAINBOW WAVEFORM (Shader) ---
@@ -277,6 +299,7 @@ ApplicationWindow {
ShaderEffect {
anchors.fill: parent
visible: !ui.reduceMotion
property real time: 0
property real amplitude: ui.amplitude
fragmentShader: "rainbow_wave.qsb"
@@ -341,8 +364,10 @@ ApplicationWindow {
font.family: jetBrainsMono.name; font.pixelSize: 16; font.bold: true; font.letterSpacing: 2
style: Text.Outline
styleColor: ui.isRecording ? "#ff0000" : "#808085"
Accessible.role: Accessible.StaticText
Accessible.name: "Recording time: " + text
SequentialAnimation on opacity {
running: ui.isRecording; loops: Animation.Infinite
running: ui.isRecording && !ui.reduceMotion; loops: Animation.Infinite
NumberAnimation { from: 1.0; to: 0.7; duration: 800 }
NumberAnimation { from: 0.7; to: 1.0; duration: 800 }
}