a lightweight, interval-based utility to combat digital strain through "Ma" (intentional pauses) for the eyes and body.
fix(ay11): adds keyboard access, ARIA roles and labels
+60
-1
+28
ui/components/inputs.slint
+28
ui/components/inputs.slint
···
5
5
in property <int> minimum: 0;
6
6
in property <int> maximum: 100;
7
7
in property <string> field-label: "";
8
+
in property <bool> enabled: true;
8
9
9
10
callback edited(int);
10
11
···
16
17
accessible-value-minimum: root.minimum;
17
18
accessible-value-maximum: root.maximum;
18
19
20
+
fs := FocusScope {
21
+
enabled: root.enabled;
22
+
key-pressed(event) => {
23
+
if event.text == Key.UpArrow {
24
+
if root.value < root.maximum {
25
+
root.value += 1;
26
+
root.edited(root.value);
27
+
}
28
+
return EventResult.accept;
29
+
}
30
+
if event.text == Key.DownArrow {
31
+
if root.value > root.minimum {
32
+
root.value -= 1;
33
+
root.edited(root.value);
34
+
}
35
+
return EventResult.accept;
36
+
}
37
+
EventResult.reject
38
+
}
39
+
}
40
+
19
41
Rectangle {
20
42
border-radius: 6px;
21
43
background: Theme.surface;
···
26
48
HorizontalLayout {
27
49
btn-minus := TouchArea {
28
50
width: 26px;
51
+
enabled: root.enabled;
29
52
accessible-role: button;
30
53
accessible-label: "Decrease " + root.field-label;
31
54
clicked => {
55
+
fs.focus();
32
56
if root.value > root.minimum {
33
57
root.value = root.value - 1;
34
58
root.edited(root.value);
···
72
96
73
97
btn-plus := TouchArea {
74
98
width: 26px;
99
+
enabled: root.enabled;
75
100
accessible-role: button;
76
101
accessible-label: "Increase " + root.field-label;
77
102
clicked => {
103
+
fs.focus();
78
104
if root.value < root.maximum {
79
105
root.value = root.value + 1;
80
106
root.edited(root.value);
···
104
130
in-out property <string> text: "";
105
131
in property <string> placeholder-text: "";
106
132
in property <string> field-label: "";
133
+
in property <bool> enabled: true;
107
134
callback edited(string);
108
135
109
136
height: 32px;
···
135
162
136
163
ti := TextInput {
137
164
horizontal-stretch: 1;
165
+
enabled: root.enabled;
138
166
text <=> root.text;
139
167
font-size: 13px;
140
168
font-weight: 500;
+21
ui/components/toggles.slint
+21
ui/components/toggles.slint
···
2
2
3
3
export component PaperToggle {
4
4
in-out property <bool> checked: false;
5
+
in property <string> label: "";
5
6
callback toggled(bool);
6
7
7
8
width: 38px;
8
9
height: 22px;
9
10
11
+
accessible-role: AccessibleRole.checkbox;
12
+
accessible-label: root.label;
13
+
accessible-checked: root.checked;
14
+
accessible-action-default => {
15
+
root.checked = !root.checked;
16
+
root.toggled(root.checked);
17
+
}
18
+
19
+
fs := FocusScope {
20
+
key-pressed(event) => {
21
+
if event.text == " " || event.text == Key.Return {
22
+
root.checked = !root.checked;
23
+
root.toggled(root.checked);
24
+
return EventResult.accept;
25
+
}
26
+
EventResult.reject
27
+
}
28
+
}
29
+
10
30
TouchArea {
11
31
clicked => {
32
+
fs.focus();
12
33
root.checked = !root.checked;
13
34
root.toggled(root.checked);
14
35
}
+11
-1
ui/views/profile_tab.slint
+11
-1
ui/views/profile_tab.slint
···
92
92
93
93
add-ta := TouchArea {
94
94
height: 42px;
95
+
accessible-role: AccessibleRole.button;
96
+
accessible-label: "Add interval";
97
+
accessible-action-default => { root.level-added(); }
95
98
clicked => { root.level-added(); }
96
99
97
100
Rectangle {
···
125
128
126
129
Rectangle { horizontal-stretch: 1; }
127
130
128
-
PaperToggle { checked <=> root.long-break-enabled; }
131
+
PaperToggle {
132
+
checked <=> root.long-break-enabled;
133
+
label: "Long rest";
134
+
}
129
135
}
130
136
131
137
Rectangle { height: 12px; }
···
148
154
149
155
NumberField {
150
156
width: 80px;
157
+
enabled: root.long-break-enabled;
151
158
value <=> root.long-break-after-cycles;
152
159
minimum: 2;
153
160
maximum: 20;
···
163
170
164
171
NumberField {
165
172
width: 80px;
173
+
enabled: root.long-break-enabled;
166
174
value <=> root.long-break-duration-mins;
167
175
minimum: 1;
168
176
maximum: 120;
···
185
193
186
194
PaperInput {
187
195
width: 110px;
196
+
enabled: root.long-break-enabled;
188
197
text <=> root.long-break-label;
189
198
placeholder-text: "Long rest";
190
199
field-label: "long rest label";
···
206
215
207
216
NumberField {
208
217
width: 80px;
218
+
enabled: root.long-break-enabled;
209
219
value <=> root.long-break-gap-mins;
210
220
minimum: 1;
211
221
maximum: 120;