@samitouri / QOSAMI-cakewallet-1 / commits / 76b04580f

a11y: send flow and QR scanner semantics (fields, errors, status announcements) (#3466)

* Make send flow controls announce their purpose and state Wraps the send-flow inputs and controls in localized Semantics so a screen reader can operate them: - address, amount, memo and manual scan fields get a persistent name and announce their validation errors as live regions - the asset picker, max-balance chip, recipient dots, dropdown toggles and scan page buttons become real buttons with selected/expanded state - send progress, send errors, sync status and multi-part QR progress are exposed as single status nodes (announced once, not per tick) - purely visual duplicates (address overlay, memo counter, max caption, full-screen tap-to-exit target, hidden confirm-sheet page) stop producing extra nodes - LoadingPrimaryButton/PrimaryButton keep their name while showing a spinner and report the disabled state - replaces hard-coded English "Synchronizing...", "Coin Control" and 'ok' with localized strings * Scope mounted guard to the new announcement only * Address review: liveRegion success, loading tap guard, drop redundant PrimaryButton wrapper * Stop the currency picker from swallowing the amount field node An on-device audit (CW-1574, D1) found the send screen's amount field missing from the Android accessibility tree entirely: without this branch the tree held an "Amount:" text node plus an EditText, with it there was no node for the field at all. The address field, wrapped the same way on the same branch, survived. The difference is FormField. Flutter wraps a FormField's builder output in its own non-container Semantics(validationResult:) annotation, and that annotation becomes the node parenting everything the field renders. The currency picker's Semantics had no `container: true`, so it is not a boundary either and its configuration was absorbed into that same wrapper node. The result was one node carrying isButton + a tap action + the picker's label, with the amount TextField as its child - so screen readers surfaced the container and never reached the field. Declaring `container: true` on the picker gives it a node of its own and leaves the FormField wrapper unlabelled, so the field, the paste button and the picker are three sibling nodes again. No visual change. The address field is unaffected because every Semantics inside its FormField is already a boundary; the memo field and the scan manual-entry field have no FormField and no absorbing sibling, so they were never hit. Also replaces the two send-page caption comments, whose "the field announces this label itself" claim is what let the regression through, with a statement of what actually guarantees it. * Name the amount field from its caption instead of labelling the field Closure audit of the D1 fix found the amount announced twice on device: [o420] ImageView "Amount: 0.00" [k527] EditText "Amount: 0.00" "BTC" The framework tree has no such duplication. Post-D1-fix it holds exactly one node carrying the label, and that node *is* the text field: a merge boundary with no children, reporting no children to the engine, with isImage false on every node in the tree. The only thing above it is FormField's own unlabelled Semantics(validationResult:) node, whose children are the field, the paste button and the currency. That wrapper is [o420] - its Flutter label is empty, so the text and the ImageView role the device shows on it are synthesized platform-side from its descendants. We cannot delete FormField's wrapper, so the only lever is to stop authoring a label on the field for the wrapper to reflect. This restores the pre-#3466 shape, which the device A/B already verified as good: the visible "Amount:" caption goes back into the semantics tree and the field carries no label of its own, giving caption + field as two adjacent stops. Both halves are required - un-excluding the caption while keeping the wrapper label produces two "Amount"-bearing nodes in the framework tree itself. The tradeoff is that the field has no programmatic accessible name any more; it is named by reading-order adjacency to its caption, so focusing it directly announces the value without the word "Amount". That is exactly how the field behaved before #3466. The address field keeps its merged label and excluded caption, because the device audit shows it as a single correct node. Memo and scan manual entry are untouched. The `container: true` D1 fix on the picker stays - it is what got the field node back in the first place. * Set headingLevel on the confirm-sheet title for the 3.41 engine --------- Co-authored-by: Omar Hatem <omarh.ismail1@gmail.com>

Seth For Privacy committed Aug 5, 2026 at 03:30 UTC 76b04580f3ef7345d1dac60ed8cbbdfd7c956146
15 files changed +747 -485
lib/entities/qr_scanner.dart
+1 -1
@@ -69,7 +69,7 @@ class _BarcodeScannerSimpleState extends State<BarcodeScannerSimple> {
69 return AlertWithOneAction(
70 alertTitle: S.of(context).error,
71 alertContent: S.of(context).error_dialog_content,
72 - buttonText: 'ok',
72 + buttonText: S.of(context).ok,
73 buttonAction: () {
74 Navigator.of(context).pop();
75 },
lib/new-ui/pages/scan_page.dart
+124 -88
@@ -76,46 +76,50 @@ class _ScanPageState extends State<ScanPage> {
76 controller: controller,
77 onDetect: _handleBarcode,
78 ),
79 + // A full screen tap target would otherwise show up as one giant unlabeled
80 + // node; leaving text mode is also possible with the back button.
81 Positioned.fill(
80 - child: GestureDetector(
81 - onTap: () => setState(() {
82 - _textInputMode = false;
83 - }),
84 - child: RepaintBoundary(
85 - child: AnimatedSwitcher(
86 - switchInCurve: Curves.easeOutCubic,
87 - switchOutCurve: Curves.easeInQuad,
88 - duration: textModeSwitchDuration,
89 - child: _textInputMode
90 - ? BackdropFilter(
91 - key: ValueKey(1),
92 - filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
93 - child: Container(
94 - color: _frontFlashMode ? Colors.white : Colors.black.withAlpha(153),
95 - ),
96 - )
97 - : TweenAnimationBuilder<double>(
98 - key: const ValueKey(0),
99 - tween: Tween<double>(begin: 0.0, end: targetRadius),
100 - duration: const Duration(milliseconds: 500),
101 - curve: Curves.easeOutCubic,
102 - child: BackdropFilter(
82 + child: ExcludeSemantics(
83 + child: GestureDetector(
84 + onTap: () => setState(() {
85 + _textInputMode = false;
86 + }),
87 + child: RepaintBoundary(
88 + child: AnimatedSwitcher(
89 + switchInCurve: Curves.easeOutCubic,
90 + switchOutCurve: Curves.easeInQuad,
91 + duration: textModeSwitchDuration,
92 + child: _textInputMode
93 + ? BackdropFilter(
94 + key: ValueKey(1),
95 filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
96 child: Container(
97 color: _frontFlashMode ? Colors.white : Colors.black.withAlpha(153),
98 ),
107 - ),
108 - builder: (context, radius, child) {
109 - return ClipPath(
110 - clipper: HoleClipper(
111 - width: cutoutSize,
112 - height: cutoutSize,
113 - radius: radius,
99 + )
100 + : TweenAnimationBuilder<double>(
101 + key: const ValueKey(0),
102 + tween: Tween<double>(begin: 0.0, end: targetRadius),
103 + duration: const Duration(milliseconds: 500),
104 + curve: Curves.easeOutCubic,
105 + child: BackdropFilter(
106 + filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
107 + child: Container(
108 + color: _frontFlashMode ? Colors.white : Colors.black.withAlpha(153),
109 ),
115 - child: child,
116 - );
117 - },
118 - ),
110 + ),
111 + builder: (context, radius, child) {
112 + return ClipPath(
113 + clipper: HoleClipper(
114 + width: cutoutSize,
115 + height: cutoutSize,
116 + radius: radius,
117 + ),
118 + child: child,
119 + );
120 + },
121 + ),
122 + ),
123 ),
124 ),
125 ),
@@ -241,20 +245,25 @@ class _ScanPageState extends State<ScanPage> {
245 spacing: 10,
246 children: [
247 Expanded(
244 - child: TextField(
245 - enabled: _textInputMode,
246 - controller: textController,
247 - focusNode: textFocusNode,
248 - onSubmitted: (val) {
249 - if (val.isNotEmpty) {
250 - Navigator.of(context).pop(val);
251 - } else {
252 - setState(() {
253 - _textInputMode = false;
254 - });
255 - }
256 - },
257 - decoration: InputDecoration(hintText: S.of(context).enter_code),
248 + child: MergeSemantics(
249 + child: Semantics(
250 + label: S.of(context).enter_code,
251 + child: TextField(
252 + enabled: _textInputMode,
253 + controller: textController,
254 + focusNode: textFocusNode,
255 + onSubmitted: (val) {
256 + if (val.isNotEmpty) {
257 + Navigator.of(context).pop(val);
258 + } else {
259 + setState(() {
260 + _textInputMode = false;
261 + });
262 + }
263 + },
264 + decoration: InputDecoration(hintText: S.of(context).enter_code),
265 + ),
266 + ),
267 ),
268 ),
269 FloatingIconButton(
@@ -336,6 +345,7 @@ class _ScanPageState extends State<ScanPage> {
345 }
346 },
347 icon: Icons.question_mark,
348 + semanticsLabel: S.of(context).help,
349 buttonColor: buttonColor,
350 buttonIconColor: buttonIconColor)
351 ],
@@ -366,27 +376,39 @@ class _ScanPageState extends State<ScanPage> {
376 child: AnimatedOpacity(
377 duration: Duration(milliseconds: 500),
378 opacity: isScanningURQR ? 1 : 0,
369 - child: Row(
370 - mainAxisAlignment: MainAxisAlignment.center,
371 - children: [
372 - Text(
373 - "${decoder.processedPartsCount()}",
374 - style: TextStyle(
375 - fontSize: 45,
376 - fontWeight: FontWeight.w500,
377 - color: Theme.of(context).colorScheme.primary),
378 - ),
379 - Text(
380 - "/",
381 - style: TextStyle(
382 - fontSize: 45, color: Theme.of(context).colorScheme.onSurfaceVariant),
383 - ),
384 - Text(
385 - "${decoder.expectedPartCount()}",
386 - style:
387 - TextStyle(fontSize: 45, color: Theme.of(context).colorScheme.onSurface),
379 + // Three separate digits mean nothing on their own: announce the progress
380 + // as one node, and only while a multi part code is actually being scanned.
381 + child: ExcludeSemantics(
382 + excluding: !isScanningURQR,
383 + child: Semantics(
384 + container: true,
385 + liveRegion: true,
386 + label: S.of(context).qr_parts_scanned(
387 + "${decoder.processedPartsCount()}", "${decoder.expectedPartCount() ?? 0}"),
388 + excludeSemantics: true,
389 + child: Row(
390 + mainAxisAlignment: MainAxisAlignment.center,
391 + children: [
392 + Text(
393 + "${decoder.processedPartsCount()}",
394 + style: TextStyle(
395 + fontSize: 45,
396 + fontWeight: FontWeight.w500,
397 + color: Theme.of(context).colorScheme.primary),
398 + ),
399 + Text(
400 + "/",
401 + style: TextStyle(
402 + fontSize: 45, color: Theme.of(context).colorScheme.onSurfaceVariant),
403 + ),
404 + Text(
405 + "${decoder.expectedPartCount()}",
406 + style: TextStyle(
407 + fontSize: 45, color: Theme.of(context).colorScheme.onSurface),
408 + ),
409 + ],
410 ),
389 - ],
411 + ),
412 ),
413 ),
414 ),
@@ -406,7 +428,7 @@ class _ScanPageState extends State<ScanPage> {
428 return AlertWithOneAction(
429 alertTitle: S.of(context).error,
430 alertContent: S.of(context).error_dialog_content,
409 - buttonText: 'ok',
431 + buttonText: S.of(context).ok,
432 buttonAction: () {
433 Navigator.of(context).pop();
434 },
@@ -459,37 +481,51 @@ class ScanPageButton extends StatelessWidget {
481 required this.onTap,
482 required this.icon,
483 this.label,
484 + this.semanticsLabel,
485 required this.buttonColor,
486 required this.buttonIconColor});
487
488 final VoidCallback onTap;
489 final IconData icon;
490 final String? label;
491 +
492 + /// Name for the icon-only variant, which has no visible [label].
493 + final String? semanticsLabel;
494 final Color buttonColor;
495 final Color buttonIconColor;
496
497 @override
498 Widget build(BuildContext context) {
473 - return GestureDetector(
499 + return Semantics(
500 + button: true,
501 + enabled: true,
502 + label: semanticsLabel ?? label,
503 onTap: onTap,
475 - behavior: HitTestBehavior.opaque,
476 - child: Container(
477 - decoration: BoxDecoration(color: buttonColor, borderRadius: BorderRadius.circular(99999)),
478 - child: Padding(
479 - padding: EdgeInsets.only(
480 - top: 10, bottom: 10, left: label == null ? 10 : 16, right: label == null ? 10 : 20),
481 - child: Row(
482 - spacing: 10,
483 - children: [
484 - Icon(icon, size: 28, color: buttonIconColor),
485 - if (label != null)
486 - Text(label!,
487 - style: TextStyle(
488 - fontSize: 16, fontWeight: FontWeight.w500, color: buttonIconColor))
489 - ],
490 - ),
491 - ),
492 - ));
504 + excludeSemantics: true,
505 + child: GestureDetector(
506 + onTap: onTap,
507 + behavior: HitTestBehavior.opaque,
508 + child: Container(
509 + decoration:
510 + BoxDecoration(color: buttonColor, borderRadius: BorderRadius.circular(99999)),
511 + child: Padding(
512 + padding: EdgeInsets.only(
513 + top: 10,
514 + bottom: 10,
515 + left: label == null ? 10 : 16,
516 + right: label == null ? 10 : 20),
517 + child: Row(
518 + spacing: 10,
519 + children: [
520 + Icon(icon, size: 28, color: buttonIconColor),
521 + if (label != null)
522 + Text(label!,
523 + style: TextStyle(
524 + fontSize: 16, fontWeight: FontWeight.w500, color: buttonIconColor))
525 + ],
526 + ),
527 + ),
528 + )));
529 }
530 }
531
lib/new-ui/pages/send_page.dart
+20 -8
@@ -417,7 +417,12 @@ class _NewSendPageState extends State<NewSendPage> {
417 crossAxisAlignment: CrossAxisAlignment.start,
418 spacing: 12,
419 children: [
420 - Text(S.of(context).address_or_alias),
420 + // NewSendAddressInput merges this label onto its
421 + // own text-field node, so announcing the caption
422 + // as well would read it twice.
423 + ExcludeSemantics(
424 + child: Text(S.of(context).address_or_alias),
425 + ),
426 NewSendAddressInput(
427 displayName: output.displayName,
428 validator: output.isParsedAddress
@@ -481,6 +486,12 @@ class _NewSendPageState extends State<NewSendPage> {
486 crossAxisAlignment: CrossAxisAlignment.start,
487 spacing: 12,
488 children: [
489 + // This caption is the amount field's accessible name
490 + // and must stay in the semantics tree:
491 + // NewSendAmountInput deliberately carries no label of
492 + // its own, because labelling the field made Android
493 + // announce the amount twice. Covered by
494 + // test/new-ui/widgets/send_page/send_amount_input_test.dart.
495 Text(S.of(context).amount),
496 NewSendAmountInput(
497 validator: output.sendAll
@@ -558,17 +569,18 @@ class _NewSendPageState extends State<NewSendPage> {
569 label: S.of(context).fees,
570 subtitle:
571 "~${output.estimatedFee} ${widget.sendViewModel.currencySymbol} (${output.estimatedFeeFiatAmount} ${widget.sendViewModel.fiatCurrency})",
561 - onTap: () {
562 - if (widget.sendViewModel.feesViewModel
563 - .hasFeesPriority) {
564 - pickTransactionPriority(context, output);
565 - }
566 - },
572 + // Without fee priorities the row does nothing,
573 + // so it must not be announced as interactive.
574 + onTap: widget.sendViewModel.feesViewModel
575 + .hasFeesPriority
576 + ? () =>
577 + pickTransactionPriority(context, output)
578 + : null,
579 ),
580 if (widget.sendViewModel.hasCoinControl)
581 ListItemRegularRowWidget(
582 keyValue: "",
571 - label: "Coin Control",
583 + label: S.of(context).coin_control,
584 onTap: () {
585 showCupertinoModalBottomSheet(
586 enableDrag: false,
lib/new-ui/widgets/dropdown_row.dart
+38 -31
@@ -11,38 +11,45 @@ class DropdownRow extends StatelessWidget {
11
12 @override
13 Widget build(BuildContext context) {
14 - return Container(
15 - decoration: BoxDecoration(
16 - color: Theme.of(context).colorScheme.surfaceContainer,
17 - borderRadius: BorderRadius.vertical(
18 - top: Radius.circular(18),
19 - bottom: expanded ? Radius.zero : Radius.circular(18),
14 + return Semantics(
15 + button: true,
16 + expanded: expanded,
17 + label: text,
18 + onTap: onTap,
19 + excludeSemantics: true,
20 + child: Container(
21 + decoration: BoxDecoration(
22 + color: Theme.of(context).colorScheme.surfaceContainer,
23 + borderRadius: BorderRadius.vertical(
24 + top: Radius.circular(18),
25 + bottom: expanded ? Radius.zero : Radius.circular(18),
26 + ),
27 ),
21 - ),
22 - height: 48,
23 - child: Material(
24 - color: Colors.transparent,
25 - child: InkWell(
26 - onTap: onTap,
27 - child: Padding(
28 - padding: const EdgeInsets.symmetric(horizontal: 16.0),
29 - child: Row(
30 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
31 - children: [
32 - Text(
33 - text,
34 - style: TextStyle(fontSize: 14, color: Theme.of(context).colorScheme.primary),
35 - ),
36 - AnimatedRotation(
37 - duration: Duration(milliseconds: 300),
38 - turns: expanded ? 0.0 : 0.5,
39 - curve: Curves.easeOut,
40 - child: CakeImageWidget(
41 - imageUrl: "assets/new-ui/dropdown_arrow.svg",
42 - colorFilter:
43 - ColorFilter.mode(Theme.of(context).colorScheme.primary, BlendMode.srcIn),
44 - ))
45 - ],
28 + height: 48,
29 + child: Material(
30 + color: Colors.transparent,
31 + child: InkWell(
32 + onTap: onTap,
33 + child: Padding(
34 + padding: const EdgeInsets.symmetric(horizontal: 16.0),
35 + child: Row(
36 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
37 + children: [
38 + Text(
39 + text,
40 + style: TextStyle(fontSize: 14, color: Theme.of(context).colorScheme.primary),
41 + ),
42 + AnimatedRotation(
43 + duration: Duration(milliseconds: 300),
44 + turns: expanded ? 0.0 : 0.5,
45 + curve: Curves.easeOut,
46 + child: CakeImageWidget(
47 + imageUrl: "assets/new-ui/dropdown_arrow.svg",
48 + colorFilter: ColorFilter.mode(
49 + Theme.of(context).colorScheme.primary, BlendMode.srcIn),
50 + ))
51 + ],
52 + ),
53 ),
54 ),
55 ),
lib/new-ui/widgets/scan_page/network_list.dart
+16 -2
@@ -11,6 +11,20 @@ import 'package:url_launcher/url_launcher.dart';
11 class ScanPageNetworkList extends StatelessWidget {
12 const ScanPageNetworkList({super.key});
13
14 + /// Same icon the row would render from `trailingIconPath`, but it now carries the
15 + /// information that following the row leaves the app.
16 + Widget _externalLinkIcon(BuildContext context) => Semantics(
17 + label: S.of(context).opens_in_browser,
18 + excludeSemantics: true,
19 + child: CakeImageWidget(
20 + imageUrl: "assets/new-ui/external_link.svg",
21 + height: 18,
22 + width: 18,
23 + colorFilter:
24 + ColorFilter.mode(Theme.of(context).colorScheme.onSurfaceVariant, BlendMode.srcIn),
25 + ),
26 + );
27 +
28 @override
29 Widget build(BuildContext context) {
30 return Container(
@@ -81,7 +95,7 @@ class ScanPageNetworkList extends StatelessWidget {
95 keyValue: "wc",
96 label: "WalletConnect",
97 subtitle: S.of(context).wc_desc,
84 - trailingIconPath: "assets/new-ui/external_link.svg",
98 + trailingWidget: _externalLinkIcon(context),
99 onTap: () {
100 launchUrl(Uri.https("walletconnect.com"));
101 }),
@@ -90,7 +104,7 @@ class ScanPageNetworkList extends StatelessWidget {
104 keyValue: "ocp",
105 label: "OpenCryptoPay",
106 subtitle: S.of(context).ocp_desc,
93 - trailingIconPath: "assets/new-ui/external_link.svg",
107 + trailingWidget: _externalLinkIcon(context),
108 onTap: () {
109 launchUrl(Uri.https("opencryptopay.io"));
110 })
lib/new-ui/widgets/send_page/fiat_amount_bar.dart
+57 -36
@@ -35,46 +35,65 @@ class FiatAmountBar extends StatelessWidget {
35 final Color? allAmountTextColor;
36
37 @override
38 - Widget build(BuildContext context) => Row(
39 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
40 - children: [
41 - Row(
42 - spacing: 8,
43 - children: [
44 - ModernButton.svg(
45 - backgroundColor: foregroundElementColor,
46 - size: 28,
47 - svgPath: "assets/new-ui/switch.svg",
48 - iconSize: 18,
49 - onPressed: onSwitchButtonPressed,
50 - semanticLabel: S.of(context).switch_input_currency,
51 - ),
52 - GestureDetector(
38 + Widget build(BuildContext context) {
39 + final convertedAmount = fiatInputMode
40 + ? "${cryptoAmount.isEmpty ? "0" : cryptoAmount.withMaxDecimals(8)} $cryptoCurrencySymbol"
41 + : "${fiatAmount.isEmpty ? "0" : fiatAmount} $fiatCurrencySymbol";
42 +
43 + return Row(
44 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
45 + children: [
46 + Row(
47 + spacing: 8,
48 + children: [
49 + ModernButton.svg(
50 + backgroundColor: foregroundElementColor,
51 + size: 28,
52 + svgPath: "assets/new-ui/switch.svg",
53 + iconSize: 18,
54 + onPressed: onSwitchButtonPressed,
55 + semanticLabel: S.of(context).switch_input_currency,
56 + ),
57 + // Announced as the converted value only: the switch button next to it already
58 + // exposes the same action, so this must not become a second control.
59 + Semantics(
60 + label: convertedAmount,
61 + excludeSemantics: true,
62 + child: GestureDetector(
63 onTap: onSwitchButtonPressed,
64 child: Text(
55 - fiatInputMode
56 - ? "${cryptoAmount.isEmpty ? "0" : cryptoAmount.withMaxDecimals(8)} $cryptoCurrencySymbol"
57 - : "${fiatAmount.isEmpty ? "0" : fiatAmount} $fiatCurrencySymbol",
65 + convertedAmount,
66 style: TextStyle(color: textColor ?? Theme.of(context).colorScheme.onSurface),
67 ),
68 ),
61 - ],
62 - ),
63 - if (allAmount != null && allAmount!.isNotEmpty)
64 - Row(
65 - spacing: 8,
66 - children: [
67 - Text(
69 + ),
70 + ],
71 + ),
72 + if (allAmount != null && allAmount!.isNotEmpty)
73 + Row(
74 + spacing: 8,
75 + children: [
76 + // The caption is part of the chip's label below.
77 + ExcludeSemantics(
78 + child: Text(
79 "${S.of(context).max}.",
80 style: TextStyle(color: textColor ?? Theme.of(context).colorScheme.onSurface),
81 ),
71 - Container(
72 - decoration: BoxDecoration(borderRadius: BorderRadius.circular(999999)),
73 - child: Material(
74 - color: allAmountColor ??
75 - foregroundElementColor ??
76 - Theme.of(context).colorScheme.surfaceContainer,
77 - borderRadius: BorderRadius.circular(99999),
82 + ),
83 + Container(
84 + decoration: BoxDecoration(borderRadius: BorderRadius.circular(999999)),
85 + child: Material(
86 + color: allAmountColor ??
87 + foregroundElementColor ??
88 + Theme.of(context).colorScheme.surfaceContainer,
89 + borderRadius: BorderRadius.circular(99999),
90 + child: Semantics(
91 + button: true,
92 + enabled: onAllButtonPressed != null,
93 + label: S.of(context).max,
94 + value: _formatAmount(allAmount!),
95 + onTap: onAllButtonPressed,
96 + excludeSemantics: true,
97 child: InkWell(
98 borderRadius: BorderRadius.circular(99999),
99 onTap: onAllButtonPressed,
@@ -90,10 +109,12 @@ class FiatAmountBar extends StatelessWidget {
109 ),
110 ),
111 ),
93 - ],
94 - ),
95 - ],
96 - );
112 + ),
113 + ],
114 + ),
115 + ],
116 + );
117 + }
118
119 String _formatAmount(String amount) {
120 try {
lib/new-ui/widgets/send_page/recipient_dot_row.dart
+38 -25
@@ -1,3 +1,4 @@
1 +import 'package:cake_wallet/generated/i18n.dart';
2 import 'package:flutter/material.dart';
3 import 'package:flutter/rendering.dart';
4
@@ -179,32 +180,44 @@ class _RecipientDotState extends State<RecipientDot> {
180 curve: Curves.easeOutCubic,
181 top: _created ? 0 : widget.size,
182 child: Material(
182 - child: AnimatedSwitcher(
183 - duration: Duration(milliseconds: 150),
184 - child: GestureDetector(
185 - key: ValueKey(widget.selected),
183 + // Dots scaled all the way down are not visible, so they must not be
184 + // reachable by a screen reader either.
185 + child: ExcludeSemantics(
186 + excluding: widget.textOpacity <= 0,
187 + child: Semantics(
188 + button: true,
189 + selected: widget.selected,
190 + label: S.of(context).recipient_number("${widget.index + 1}"),
191 onTap: widget.onTap,
187 - child: Container(
188 - width: widget.size,
189 - height: widget.size,
190 - margin: EdgeInsets.symmetric(horizontal: widget.spacing / 2),
191 - decoration: BoxDecoration(
192 - color: widget.selected
193 - ? Theme.of(context).colorScheme.primary
194 - : Theme.of(context).colorScheme.surfaceContainer,
195 - shape: BoxShape.circle,
196 - ),
197 - alignment: Alignment.center,
198 - child: Opacity(
199 - opacity: widget.textOpacity,
200 - child: Text(
201 - (widget.index + 1).toString(),
202 - style: TextStyle(
203 - color: widget.selected
204 - ? Theme.of(context).colorScheme.onPrimary
205 - : Theme.of(context).colorScheme.onSurface,
206 - fontSize: 14,
207 - fontWeight: FontWeight.w500),
192 + excludeSemantics: true,
193 + child: AnimatedSwitcher(
194 + duration: Duration(milliseconds: 150),
195 + child: GestureDetector(
196 + key: ValueKey(widget.selected),
197 + onTap: widget.onTap,
198 + child: Container(
199 + width: widget.size,
200 + height: widget.size,
201 + margin: EdgeInsets.symmetric(horizontal: widget.spacing / 2),
202 + decoration: BoxDecoration(
203 + color: widget.selected
204 + ? Theme.of(context).colorScheme.primary
205 + : Theme.of(context).colorScheme.surfaceContainer,
206 + shape: BoxShape.circle,
207 + ),
208 + alignment: Alignment.center,
209 + child: Opacity(
210 + opacity: widget.textOpacity,
211 + child: Text(
212 + (widget.index + 1).toString(),
213 + style: TextStyle(
214 + color: widget.selected
215 + ? Theme.of(context).colorScheme.onPrimary
216 + : Theme.of(context).colorScheme.onSurface,
217 + fontSize: 14,
218 + fontWeight: FontWeight.w500),
219 + ),
220 + ),
221 ),
222 ),
223 ),
lib/new-ui/widgets/send_page/send_address_input.dart
+50 -22
@@ -86,22 +86,27 @@ class _NewSendAddressInputState extends State<NewSendAddressInput> {
86 Expanded(
87 child: Stack(
88 children: [
89 - TextField(
90 - focusNode: widget.focusNode,
91 - autocorrect: false,
92 - enableSuggestions: false,
93 - onSubmitted: (val) => FocusScope.of(context).unfocus(),
94 - onChanged: state.didChange,
95 - onEditingComplete: () {
96 - widget.onEditingComplete();
97 - },
98 - onTapOutside: (_) {
99 - widget.onEditingComplete();
100 - },
101 - controller: widget.addressController,
102 - decoration: InputDecoration(
103 - hintText: widget.hintText ?? S.of(context).search_or_enter,
104 - errorMaxLines: 3,
89 + MergeSemantics(
90 + child: Semantics(
91 + label: _fieldSemanticsLabel(context),
92 + child: TextField(
93 + focusNode: widget.focusNode,
94 + autocorrect: false,
95 + enableSuggestions: false,
96 + onSubmitted: (val) => FocusScope.of(context).unfocus(),
97 + onChanged: state.didChange,
98 + onEditingComplete: () {
99 + widget.onEditingComplete();
100 + },
101 + onTapOutside: (_) {
102 + widget.onEditingComplete();
103 + },
104 + controller: widget.addressController,
105 + decoration: InputDecoration(
106 + hintText: widget.hintText ?? S.of(context).search_or_enter,
107 + errorMaxLines: 3,
108 + ),
109 + ),
110 ),
111 ),
112 Positioned.fill(
@@ -113,9 +118,13 @@ class _NewSendAddressInputState extends State<NewSendAddressInput> {
118 widget.addressController.text.isEmpty)
119 ? 0
120 : 1,
116 - child: SendAddressOverlay(
117 - address: widget.addressController.text,
118 - displayName: widget.displayName,
121 + // Purely visual copy of the field content; announcing it again
122 + // would read the address twice.
123 + child: ExcludeSemantics(
124 + child: SendAddressOverlay(
125 + address: widget.addressController.text,
126 + displayName: widget.displayName,
127 + ),
128 )),
129 ),
130 ),
@@ -150,9 +159,15 @@ class _NewSendAddressInputState extends State<NewSendAddressInput> {
159 if (state.hasError)
160 Padding(
161 padding: EdgeInsets.only(top: 6, left: 8),
153 - child: Text(
154 - state.errorText!,
155 - style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.error),
162 + child: Semantics(
163 + container: true,
164 + liveRegion: true,
165 + label: "${S.of(context).address_or_alias}, ${state.errorText!}",
166 + excludeSemantics: true,
167 + child: Text(
168 + state.errorText!,
169 + style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.error),
170 + ),
171 ),
172 )
173 ],
@@ -161,6 +176,19 @@ class _NewSendAddressInputState extends State<NewSendAddressInput> {
176 );
177 }
178
179 + String _fieldSemanticsLabel(BuildContext context) {
180 + final label = S.of(context).address_or_alias;
181 + final displayName = widget.displayName;
182 +
183 + if (displayName == null ||
184 + displayName.isEmpty ||
185 + displayName == widget.addressController.text) {
186 + return label;
187 + }
188 +
189 + return "$label, $displayName";
190 + }
191 +
192 Future<void> _presentQRScanner(BuildContext context) async {
193 bool isCameraPermissionGranted =
194 await PermissionHandler.checkPermission(Permission.camera, context);
lib/new-ui/widgets/send_page/send_amount_input.dart
+68 -39
@@ -1,3 +1,4 @@
1 +import "package:cake_wallet/generated/i18n.dart";
2 import "package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart";
3 import "package:cake_wallet/new-ui/widgets/send_page/floating_icon_button.dart";
4 import "package:cake_wallet/src/widgets/cake_image_widget.dart";
@@ -67,6 +68,14 @@ class _NewSendAmountInputState extends State<NewSendAmountInput> {
68 mainAxisSize: MainAxisSize.max,
69 spacing: 8,
70 children: [
71 + // Deliberately unwrapped. Naming the field with
72 + // MergeSemantics > Semantics(label:) made Android announce
73 + // the amount twice: FormField's own wrapper node reflects
74 + // its descendants' text, so the authored label came back a
75 + // second time on the container. The visible "Amount:"
76 + // caption on the send page carries the name instead, and it
77 + // must stay in the semantics tree for this field to be
78 + // named at all.
79 Expanded(
80 child: TextField(
81 keyboardType: TextInputType.numberWithOptions(
@@ -105,44 +114,58 @@ class _NewSendAmountInputState extends State<NewSendAmountInput> {
114 ),
115 IntrinsicWidth(
116 child: Observer(
108 - builder: (_) => GestureDetector(
109 - onTap: widget.onPickerClicked,
110 - child: Container(
111 - alignment: Alignment.center,
112 - width: double.infinity,
113 - decoration: BoxDecoration(
114 - borderRadius: const BorderRadius.only(
115 - topRight: Radius.circular(18),
116 - bottomRight: Radius.circular(18),
117 + // `container: true` is load bearing. FormField wraps this
118 + // builder in its own non-container Semantics annotation, so
119 + // without a container of its own this configuration is
120 + // absorbed into that wrapper node — which then parents the
121 + // amount TextField and hides it from screen readers.
122 + builder: (_) => Semantics(
123 + container: true,
124 + button: widget.hasPicker ? true : null,
125 + enabled: widget.hasPicker ? true : null,
126 + label: widget.hasPicker ? S.of(context).select_asset : widget.currency,
127 + value: widget.hasPicker ? widget.currency : null,
128 + onTap: widget.hasPicker ? widget.onPickerClicked : null,
129 + excludeSemantics: true,
130 + child: GestureDetector(
131 + onTap: widget.onPickerClicked,
132 + child: Container(
133 + alignment: Alignment.center,
134 + width: double.infinity,
135 + decoration: BoxDecoration(
136 + borderRadius: const BorderRadius.only(
137 + topRight: Radius.circular(18),
138 + bottomRight: Radius.circular(18),
139 + ),
140 + color: widget.hasPicker
141 + ? Theme.of(context).colorScheme.surfaceContainerHigh
142 + : Theme.of(context).colorScheme.surfaceContainer,
143 ),
118 - color: widget.hasPicker
119 - ? Theme.of(context).colorScheme.surfaceContainerHigh
120 - : Theme.of(context).colorScheme.surfaceContainer,
121 - ),
122 - child: Padding(
123 - padding: const EdgeInsets.symmetric(horizontal: 12),
124 - child: Row(
125 - mainAxisAlignment: MainAxisAlignment.center,
126 - mainAxisSize: MainAxisSize.max,
127 - spacing: 8,
128 - children: [
129 - if (widget.hasPicker && widget.currencyIconPath.isNotEmpty)
130 - TokenImageWidget(
131 - imageUrl: widget.currencyIconPath,
132 - size: 24,
133 - ),
134 - Text(widget.currency),
135 - if (widget.hasPicker)
136 - CakeImageWidget(
137 - imageUrl: "assets/new-ui/chooser.svg",
138 - width: 12,
139 - height: 12,
140 - colorFilter: ColorFilter.mode(
141 - Theme.of(context).colorScheme.primary,
142 - BlendMode.srcIn,
144 + child: Padding(
145 + padding: const EdgeInsets.symmetric(horizontal: 12),
146 + child: Row(
147 + mainAxisAlignment: MainAxisAlignment.center,
148 + mainAxisSize: MainAxisSize.max,
149 + spacing: 8,
150 + children: [
151 + if (widget.hasPicker && widget.currencyIconPath.isNotEmpty)
152 + TokenImageWidget(
153 + imageUrl: widget.currencyIconPath,
154 + size: 24,
155 ),
144 - ),
145 - ],
156 + Text(widget.currency),
157 + if (widget.hasPicker)
158 + CakeImageWidget(
159 + imageUrl: "assets/new-ui/chooser.svg",
160 + width: 12,
161 + height: 12,
162 + colorFilter: ColorFilter.mode(
163 + Theme.of(context).colorScheme.primary,
164 + BlendMode.srcIn,
165 + ),
166 + ),
167 + ],
168 + ),
169 ),
170 ),
171 ),
@@ -155,9 +178,15 @@ class _NewSendAmountInputState extends State<NewSendAmountInput> {
178 if (state.hasError)
179 Padding(
180 padding: const EdgeInsets.only(top: 6, left: 8),
158 - child: Text(
159 - state.errorText!,
160 - style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.error),
181 + child: Semantics(
182 + container: true,
183 + liveRegion: true,
184 + label: "${S.of(context).amount}${state.errorText!}",
185 + excludeSemantics: true,
186 + child: Text(
187 + state.errorText!,
188 + style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.error),
189 + ),
190 ),
191 ),
192 ],
lib/new-ui/widgets/send_page/send_confirm_bottom_widget.dart
+64 -51
@@ -80,18 +80,25 @@ class LoadingBottomWidget extends StatelessWidget {
80
81 @override
82 Widget build(BuildContext context) {
83 - return Row(
84 - mainAxisAlignment: MainAxisAlignment.center,
85 - spacing: 12,
86 - children: [
87 - CupertinoActivityIndicator(
88 - color: Theme.of(context).colorScheme.onSurfaceVariant,
89 - ),
90 - Text(
91 - text,
92 - style: TextStyle(color: Theme.of(context).colorScheme.onSurfaceVariant),
93 - )
94 - ],
83 + // One node per state so each step of the send is announced exactly once.
84 + return Semantics(
85 + container: true,
86 + liveRegion: true,
87 + label: text,
88 + excludeSemantics: true,
89 + child: Row(
90 + mainAxisAlignment: MainAxisAlignment.center,
91 + spacing: 12,
92 + children: [
93 + CupertinoActivityIndicator(
94 + color: Theme.of(context).colorScheme.onSurfaceVariant,
95 + ),
96 + Text(
97 + text,
98 + style: TextStyle(color: Theme.of(context).colorScheme.onSurfaceVariant),
99 + )
100 + ],
101 + ),
102 );
103 }
104 }
@@ -106,45 +113,51 @@ class TransactionErrorActions extends StatelessWidget {
113 return Column(
114 spacing: 12,
115 children: [
109 - Container(
110 - decoration: BoxDecoration(
111 - color: Theme.of(context).colorScheme.errorContainer.withAlpha(64),
112 - borderRadius: BorderRadius.circular(16),
113 - ),
114 - child: Padding(
115 - padding: const EdgeInsets.all(12.0),
116 - child: Column(
117 - spacing: 12,
118 - children: [
119 - Row(
120 - mainAxisAlignment: MainAxisAlignment.center,
121 - spacing: 8,
122 - children: [
123 - CakeImageWidget(
124 - imageUrl: "assets/new-ui/warning.svg",
125 - height: 24,
126 - width: 24,
127 - colorFilter:
128 - ColorFilter.mode(Theme.of(context).colorScheme.error, BlendMode.srcIn),
129 - ),
130 - Text(
131 - S.of(context).transaction_error,
132 - style: TextStyle(
133 - fontSize: 16,
134 - fontWeight: FontWeight.w400,
135 - color: Theme.of(context).colorScheme.error),
136 - )
137 - ],
138 - ),
139 - Text(
140 - errorText,
141 - style: TextStyle(
142 - fontSize: 14,
143 - fontWeight: FontWeight.w400,
144 - color: Theme.of(context).colorScheme.error),
145 - textAlign: TextAlign.center,
146 - ),
147 - ],
116 + Semantics(
117 + container: true,
118 + liveRegion: true,
119 + label: "${S.of(context).transaction_error}\n$errorText",
120 + excludeSemantics: true,
121 + child: Container(
122 + decoration: BoxDecoration(
123 + color: Theme.of(context).colorScheme.errorContainer.withAlpha(64),
124 + borderRadius: BorderRadius.circular(16),
125 + ),
126 + child: Padding(
127 + padding: const EdgeInsets.all(12.0),
128 + child: Column(
129 + spacing: 12,
130 + children: [
131 + Row(
132 + mainAxisAlignment: MainAxisAlignment.center,
133 + spacing: 8,
134 + children: [
135 + CakeImageWidget(
136 + imageUrl: "assets/new-ui/warning.svg",
137 + height: 24,
138 + width: 24,
139 + colorFilter:
140 + ColorFilter.mode(Theme.of(context).colorScheme.error, BlendMode.srcIn),
141 + ),
142 + Text(
143 + S.of(context).transaction_error,
144 + style: TextStyle(
145 + fontSize: 16,
146 + fontWeight: FontWeight.w400,
147 + color: Theme.of(context).colorScheme.error),
148 + )
149 + ],
150 + ),
151 + Text(
152 + errorText,
153 + style: TextStyle(
154 + fontSize: 14,
155 + fontWeight: FontWeight.w400,
156 + color: Theme.of(context).colorScheme.error),
157 + textAlign: TextAlign.center,
158 + ),
159 + ],
160 + ),
161 ),
162 ),
163 ),
lib/new-ui/widgets/send_page/send_confirm_sheet.dart
+169 -125
@@ -87,11 +87,15 @@ class _SendConfirmSheetState extends State<SendConfirmSheet> {
87 offset: _committed ? const Offset(-1, 0) : Offset.zero,
88 duration: const Duration(milliseconds: 300),
89 curve: Curves.easeOutCubic,
90 - child: SendTransactionDetails(
91 - sendViewModel: widget.sendViewModel,
92 - isPage: widget.isPage,
93 - title: widget.title,
94 - iconPath: widget.iconPath,
90 + // Both screens stay mounted; only the visible one may be reachable.
91 + child: ExcludeSemantics(
92 + excluding: _committed,
93 + child: SendTransactionDetails(
94 + sendViewModel: widget.sendViewModel,
95 + isPage: widget.isPage,
96 + title: widget.title,
97 + iconPath: widget.iconPath,
98 + ),
99 ),
100 ),
101 ),
@@ -102,8 +106,11 @@ class _SendConfirmSheetState extends State<SendConfirmSheet> {
106 offset: _committed ? Offset.zero : const Offset(1, 0),
107 duration: const Duration(milliseconds: 300),
108 curve: Curves.easeOutCubic,
105 - child: TransactionCommitedScreen(
106 - sendViewModel: widget.sendViewModel,
109 + child: ExcludeSemantics(
110 + excluding: !_committed,
111 + child: TransactionCommitedScreen(
112 + sendViewModel: widget.sendViewModel,
113 + ),
114 ),
115 ),
116 ),
@@ -154,9 +161,15 @@ class SendTransactionDetails extends StatelessWidget {
161 width: 28,
162 height: 28,
163 ),
157 - Text(
158 - title ?? S.of(context).send,
159 - style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
164 + Semantics(
165 + header: true,
166 + // Android reads the heading from headingLevel since the
167 + // Flutter 3.41 engine; header: alone only covers iOS.
168 + headingLevel: 1,
169 + child: Text(
170 + title ?? S.of(context).send,
171 + style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
172 + ),
173 )
174 ],
175 ),
@@ -250,37 +263,40 @@ class SendTransactionDetails extends StatelessWidget {
263 mainAxisAlignment: MainAxisAlignment.start,
264 spacing: 24,
265 children: [
253 - Column(
254 - children: [
255 - Row(
256 - mainAxisSize: MainAxisSize.max,
257 - mainAxisAlignment: MainAxisAlignment.center,
258 - spacing: 4,
259 - children: [
260 - Flexible(
261 - child: Text(
262 - amount,
263 - style: TextStyle(
264 - fontSize: 36,
265 - fontWeight: FontWeight.w400,
266 - color: Theme.of(context).colorScheme.onSurface),
266 + // The amount being sent is the value under review: announce it as one group.
267 + MergeSemantics(
268 + child: Column(
269 + children: [
270 + Row(
271 + mainAxisSize: MainAxisSize.max,
272 + mainAxisAlignment: MainAxisAlignment.center,
273 + spacing: 4,
274 + children: [
275 + Flexible(
276 + child: Text(
277 + amount,
278 + style: TextStyle(
279 + fontSize: 36,
280 + fontWeight: FontWeight.w400,
281 + color: Theme.of(context).colorScheme.onSurface),
282 + ),
283 ),
268 - ),
269 - Text(currencySymbol,
270 - style: TextStyle(
271 - fontSize: 36,
272 - fontWeight: FontWeight.w400,
273 - color: Theme.of(context).colorScheme.onSurfaceVariant))
274 - ],
275 - ),
276 - Text(
277 - fiatAmount,
278 - style: TextStyle(
279 - fontSize: 20,
280 - fontWeight: FontWeight.w500,
281 - color: Theme.of(context).colorScheme.onSurfaceVariant),
282 - ),
283 - ],
284 + Text(currencySymbol,
285 + style: TextStyle(
286 + fontSize: 36,
287 + fontWeight: FontWeight.w400,
288 + color: Theme.of(context).colorScheme.onSurfaceVariant))
289 + ],
290 + ),
291 + Text(
292 + fiatAmount,
293 + style: TextStyle(
294 + fontSize: 20,
295 + fontWeight: FontWeight.w500,
296 + color: Theme.of(context).colorScheme.onSurfaceVariant),
297 + ),
298 + ],
299 + ),
300 ),
301 if (outputs.length >= 1 &&
302 (outputs.first.extractedAddress.isNotEmpty || outputs.first.address.isNotEmpty) &&
@@ -352,32 +368,34 @@ class SendTransactionDetails extends StatelessWidget {
368 children: [
369 Padding(
370 padding: const EdgeInsets.all(12.0),
355 - child: Row(
356 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
357 - children: [
358 - Text(S.of(context).fee,
359 - style: TextStyle(
360 - fontSize: 14,
361 - fontWeight: FontWeight.w400,
362 - color: Theme.of(context).colorScheme.onSurface)),
363 - Column(
364 - crossAxisAlignment: CrossAxisAlignment.end,
365 - children: [
366 - Text(
367 - "${fee.withLocalSeperator(sendViewModel.languageCode)} ${sendViewModel.currencySymbol}",
371 + child: MergeSemantics(
372 + child: Row(
373 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
374 + children: [
375 + Text(S.of(context).fee,
376 style: TextStyle(
377 fontSize: 14,
378 fontWeight: FontWeight.w400,
371 - color: Theme.of(context).colorScheme.onSurfaceVariant),
372 - ),
373 - Text(fiatFee.withLocalSeperator(sendViewModel.languageCode),
379 + color: Theme.of(context).colorScheme.onSurface)),
380 + Column(
381 + crossAxisAlignment: CrossAxisAlignment.end,
382 + children: [
383 + Text(
384 + "${fee.withLocalSeperator(sendViewModel.languageCode)} ${sendViewModel.currencySymbol}",
385 style: TextStyle(
386 fontSize: 14,
387 fontWeight: FontWeight.w400,
377 - color: Theme.of(context).colorScheme.onSurfaceVariant))
378 - ],
379 - )
380 - ],
388 + color: Theme.of(context).colorScheme.onSurfaceVariant),
389 + ),
390 + Text(fiatFee.withLocalSeperator(sendViewModel.languageCode),
391 + style: TextStyle(
392 + fontSize: 14,
393 + fontWeight: FontWeight.w400,
394 + color: Theme.of(context).colorScheme.onSurfaceVariant))
395 + ],
396 + )
397 + ],
398 + ),
399 ),
400 ),
401 if (sendViewModel.isElectrumWallet) ...[
@@ -390,27 +408,29 @@ class SendTransactionDetails extends StatelessWidget {
408 ),
409 Padding(
410 padding: const EdgeInsets.all(12.0),
393 - child: Row(
394 - mainAxisAlignment: MainAxisAlignment.spaceBetween,
395 - children: [
396 - Text(S.of(context).network,
397 - style: TextStyle(
398 - fontSize: 14,
399 - fontWeight: FontWeight.w400,
400 - color: Theme.of(context).colorScheme.onSurface)),
401 - Column(
402 - children: [
403 - Text(
404 - sendViewModel.selectedCryptoCurrency == CryptoCurrency.btcln
405 - ? "Lightning"
406 - : bitcoin!.getNetworkName(sendViewModel.wallet),
407 - style: TextStyle(
408 - fontSize: 14,
409 - fontWeight: FontWeight.w400,
410 - color: Theme.of(context).colorScheme.onSurfaceVariant))
411 - ],
412 - )
413 - ],
411 + child: MergeSemantics(
412 + child: Row(
413 + mainAxisAlignment: MainAxisAlignment.spaceBetween,
414 + children: [
415 + Text(S.of(context).network,
416 + style: TextStyle(
417 + fontSize: 14,
418 + fontWeight: FontWeight.w400,
419 + color: Theme.of(context).colorScheme.onSurface)),
420 + Column(
421 + children: [
422 + Text(
423 + sendViewModel.selectedCryptoCurrency == CryptoCurrency.btcln
424 + ? "Lightning"
425 + : bitcoin!.getNetworkName(sendViewModel.wallet),
426 + style: TextStyle(
427 + fontSize: 14,
428 + fontWeight: FontWeight.w400,
429 + color: Theme.of(context).colorScheme.onSurfaceVariant))
430 + ],
431 + )
432 + ],
433 + ),
434 ),
435 )
436 ],
@@ -459,9 +479,14 @@ class _TransactionCommitedScreenState extends State<TransactionCommitedScreen> {
479 SizedBox(
480 height: 12,
481 ),
462 - Text(
463 - S.of(context).transaction_sent_new,
464 - style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
482 + // The sheet swaps its content in place, so this title becoming visible is what
483 + // tells a screen reader that the transaction went through.
484 + Semantics(
485 + liveRegion: true,
486 + child: Text(
487 + S.of(context).transaction_sent_new,
488 + style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
489 + ),
490 ),
491 SizedBox(),
492 CakeImageWidget(width: 200, height: 200, imageUrl: "assets/new-ui/birthday_cake.svg"),
@@ -552,37 +577,44 @@ class TransactionCommittedScreenActionButton extends StatelessWidget {
577 @override
578 Widget build(BuildContext context) {
579 return Flexible(
555 - child: GestureDetector(
556 - onTap: onTap,
557 - child: Container(
558 - decoration: BoxDecoration(
559 - borderRadius: BorderRadius.circular(16),
560 - color: Theme.of(context).colorScheme.surfaceContainer),
561 - child: Padding(
562 - padding: EdgeInsets.all(16),
563 - child: Row(
564 - mainAxisAlignment: MainAxisAlignment.center,
565 - spacing: 10,
566 - children: [
567 - isLoading
568 - ? CupertinoActivityIndicator()
569 - : CakeImageWidget(
570 - imageUrl: iconPath,
571 - width: 24,
572 - height: 24,
573 - colorFilter: ColorFilter.mode(
574 - Theme.of(context).colorScheme.primary, BlendMode.srcIn),
575 - ),
576 - Text(
577 - text,
578 - style: TextStyle(
579 - color: Theme.of(context).colorScheme.primary,
580 - fontWeight: FontWeight.w500),
581 - )
582 - ],
583 - ),
584 - ),
585 - )));
580 + child: Semantics(
581 + button: true,
582 + enabled: !isLoading,
583 + label: text,
584 + value: isLoading ? S.of(context).loading : null,
585 + onTap: isLoading ? null : onTap,
586 + excludeSemantics: true,
587 + child: GestureDetector(
588 + onTap: isLoading ? null : onTap,
589 + child: Container(
590 + decoration: BoxDecoration(
591 + borderRadius: BorderRadius.circular(16),
592 + color: Theme.of(context).colorScheme.surfaceContainer),
593 + child: Padding(
594 + padding: EdgeInsets.all(16),
595 + child: Row(
596 + mainAxisAlignment: MainAxisAlignment.center,
597 + spacing: 10,
598 + children: [
599 + isLoading
600 + ? CupertinoActivityIndicator()
601 + : CakeImageWidget(
602 + imageUrl: iconPath,
603 + width: 24,
604 + height: 24,
605 + colorFilter: ColorFilter.mode(
606 + Theme.of(context).colorScheme.primary, BlendMode.srcIn),
607 + ),
608 + Text(
609 + text,
610 + style: TextStyle(
611 + color: Theme.of(context).colorScheme.primary,
612 + fontWeight: FontWeight.w500),
613 + )
614 + ],
615 + ),
616 + ),
617 + ))));
618 }
619 }
620
@@ -623,16 +655,28 @@ class _MultiSendAddressPreviewState extends State<MultiSendAddressPreview> {
655 style: TextStyle(fontFamily: "IBM Plex Mono"),
656 ),
657 if (!_expanded)
626 - GestureDetector(
627 - onTap: () {
628 - setState(() {
629 - _expanded = true;
630 - });
631 - },
632 - child: Text(middleTruncate(widget.address, 8, 8),
633 - style: TextStyle(
634 - fontFamily: "IBM Plex Mono",
635 - color: Theme.of(context).colorScheme.primary)))
658 + Semantics(
659 + button: true,
660 + // Read the whole address rather than the truncated form.
661 + label: widget.address,
662 + hint: S.of(context).show_full_address,
663 + onTap: () {
664 + setState(() {
665 + _expanded = true;
666 + });
667 + },
668 + excludeSemantics: true,
669 + child: GestureDetector(
670 + onTap: () {
671 + setState(() {
672 + _expanded = true;
673 + });
674 + },
675 + child: Text(middleTruncate(widget.address, 8, 8),
676 + style: TextStyle(
677 + fontFamily: "IBM Plex Mono",
678 + color: Theme.of(context).colorScheme.primary))),
679 + )
680 else
681 AddressFormatter.buildSegmentedAddress(
682 address: widget.address,
lib/new-ui/widgets/send_page/send_memo_input.dart
+16 -7
@@ -31,11 +31,16 @@ class NewSendMemoInput extends StatelessWidget {
31 child: Row(
32 children: [
33 Expanded(
34 - child: TextField(
35 - maxLength: maxMemoLength,
36 - controller: memoController,
37 - decoration: InputDecoration(
38 - hintText: hintText ?? S.of(context).memo_optional, counterText: ""),
34 + child: MergeSemantics(
35 + child: Semantics(
36 + label: hintText ?? S.of(context).memo_optional,
37 + child: TextField(
38 + maxLength: maxMemoLength,
39 + controller: memoController,
40 + decoration: InputDecoration(
41 + hintText: hintText ?? S.of(context).memo_optional, counterText: ""),
42 + ),
43 + ),
44 ),
45 ),
46 SizedBox(width: 12),
@@ -61,8 +66,12 @@ class NewSendMemoInput extends StatelessWidget {
66 style: TextStyle(
67 fontSize: 12, color: Theme.of(context).colorScheme.onSurfaceVariant)),
68 ),
64 - Text("${memoController.text.length} / ${maxMemoLength}",
65 - style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.primary))
69 + // The field itself already reports the character count through
70 + // maxValueLength/currentValueLength, so this visual counter stays silent.
71 + ExcludeSemantics(
72 + child: Text("${memoController.text.length} / ${maxMemoLength}",
73 + style: TextStyle(fontSize: 12, color: Theme.of(context).colorScheme.primary)),
74 + )
75 ],
76 ),
77 )
lib/new-ui/widgets/send_page/send_syncing_indicator.dart
+34 -21
@@ -1,3 +1,4 @@
1 +import 'package:cake_wallet/generated/i18n.dart';
2 import 'package:cw_core/sync_status.dart';
3 import 'package:flutter/material.dart';
4
@@ -18,28 +19,40 @@ class SendSyncingIndicator extends StatelessWidget {
19 eta = "";
20 }
21
21 - return Container(
22 - height: 48,
23 - decoration: BoxDecoration(color: backgroundColor, borderRadius: BorderRadius.circular(99999)),
24 - child: Padding(
25 - padding: const EdgeInsets.symmetric(horizontal: 12.0),
26 - child: Row(
27 - mainAxisSize: MainAxisSize.min,
28 - spacing: 10,
29 - children: [
30 - if (status.progress() > 0)
31 - SizedBox(
32 - width: 24,
33 - height: 24,
34 - child: CircularProgressIndicator(
35 - value: status.progress(),
36 - strokeWidth: 3,
37 - strokeCap: StrokeCap.round,
38 - color: outlineColor,
22 + final statusText = "${S.of(context).synchronizing}... ${eta}";
23 +
24 + // A single status node: progress ticks keep updating the value, and without a live
25 + // region they do not interrupt the user on every tick.
26 + return Semantics(
27 + container: true,
28 + label: statusText,
29 + value: status.progress() > 0 ? "${(status.progress() * 100).round()}%" : null,
30 + excludeSemantics: true,
31 + child: Container(
32 + height: 48,
33 + decoration:
34 + BoxDecoration(color: backgroundColor, borderRadius: BorderRadius.circular(99999)),
35 + child: Padding(
36 + padding: const EdgeInsets.symmetric(horizontal: 12.0),
37 + child: Row(
38 + mainAxisSize: MainAxisSize.min,
39 + spacing: 10,
40 + children: [
41 + if (status.progress() > 0)
42 + SizedBox(
43 + width: 24,
44 + height: 24,
45 + child: CircularProgressIndicator(
46 + value: status.progress(),
47 + strokeWidth: 3,
48 + strokeCap: StrokeCap.round,
49 + color: outlineColor,
50 + semanticsLabel: S.of(context).synchronizing,
51 + ),
52 ),
40 - ),
41 - Text("Synchronizing... ${eta}", style: TextStyle(color: outlineColor)),
42 - ],
53 + Text(statusText, style: TextStyle(color: outlineColor)),
54 + ],
55 + ),
56 ),
57 ),
58 );
lib/src/widgets/primary_button.dart
+48 -29
@@ -1,3 +1,4 @@
1 +import 'package:cake_wallet/generated/i18n.dart';
2 import 'package:cake_wallet/utils/responsive_layout_util.dart';
3 import 'package:dotted_border/dotted_border.dart';
4 import 'package:flutter/cupertino.dart';
@@ -92,35 +93,53 @@ class LoadingPrimaryButton extends StatelessWidget {
93
94 @override
95 Widget build(BuildContext context) {
95 - return ConstrainedBox(
96 - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
97 - child: SizedBox(
98 - width: double.infinity,
99 - height: 52.0,
100 - child: TextButton(
101 - onPressed: (isLoading || isDisabled)
102 - ? null
103 - : () {
104 - FocusScope.of(context).unfocus();
105 - onPressed.call();
106 - },
107 - style: ButtonStyle(
108 - backgroundColor: WidgetStateProperty.all(isDisabled ? color.withOpacity(0.5) : color),
109 - shape: WidgetStateProperty.all<RoundedRectangleBorder>(
110 - RoundedRectangleBorder(
111 - borderRadius: BorderRadius.circular(18.0),
112 - ),
113 - )),
114 - child: isLoading
115 - ? CupertinoActivityIndicator(animating: true, color: textColor)
116 - : Text(
117 - text,
118 - style: Theme.of(context).textTheme.bodyMedium!.copyWith(
119 - fontSize: 15.0,
120 - fontWeight: FontWeight.w600,
121 - color: isDisabled ? textColor.withOpacity(0.5) : textColor,
122 - ),
123 - ),
96 + final isEnabled = !isLoading && !isDisabled;
97 +
98 + // The spinner replaces the label while loading, so the name is kept on a single
99 + // semantics node that also reports the loading and disabled states.
100 + return Semantics(
101 + button: true,
102 + enabled: isEnabled,
103 + label: text,
104 + value: isLoading ? S.of(context).loading : null,
105 + onTap: isEnabled
106 + ? () {
107 + FocusScope.of(context).unfocus();
108 + onPressed.call();
109 + }
110 + : null,
111 + excludeSemantics: true,
112 + child: ConstrainedBox(
113 + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
114 + child: SizedBox(
115 + width: double.infinity,
116 + height: 52.0,
117 + child: TextButton(
118 + onPressed: (isLoading || isDisabled)
119 + ? null
120 + : () {
121 + FocusScope.of(context).unfocus();
122 + onPressed.call();
123 + },
124 + style: ButtonStyle(
125 + backgroundColor:
126 + WidgetStateProperty.all(isDisabled ? color.withOpacity(0.5) : color),
127 + shape: WidgetStateProperty.all<RoundedRectangleBorder>(
128 + RoundedRectangleBorder(
129 + borderRadius: BorderRadius.circular(18.0),
130 + ),
131 + )),
132 + child: isLoading
133 + ? CupertinoActivityIndicator(animating: true, color: textColor)
134 + : Text(
135 + text,
136 + style: Theme.of(context).textTheme.bodyMedium!.copyWith(
137 + fontSize: 15.0,
138 + fontWeight: FontWeight.w600,
139 + color: isDisabled ? textColor.withOpacity(0.5) : textColor,
140 + ),
141 + ),
142 + ),
143 ),
144 ),
145 );
res/values/strings_en.arb
+4
@@ -733,6 +733,7 @@
733 "onramper_option_description": "Quickly buy crypto with many payment methods. Available in most countries. Spreads and fees vary.",
734 "open_gift_card": "Open Gift Card",
735 "open_wallet": "Open Wallet",
736 + "opens_in_browser": "Opens in browser",
737 "opens_externally": "Opens externally",
738 "optional_description": "Optional description",
739 "optional_email_hint": "Optional payee notification email",
@@ -845,6 +846,7 @@
846 "qr_code_format_note": "Different QR code formats are used by different hardware wallets in the Bitcoin space",
847 "qr_fullscreen": "Tap to open full screen QR code",
848 "qr_instruction": "Use this address to receive any token or collectible on",
849 + "qr_parts_scanned": "Scanned ${scanned} of ${total} QR code parts",
850 "qr_payment_amount": "This QR code contains a payment amount. Do you want to overwrite the current value?",
851 "quantity": "Quantity",
852 "question_to_disable_2fa": "Are you sure that you want to disable Cake 2FA? A 2FA code will no longer be needed to access the wallet and certain functions.",
@@ -856,6 +858,7 @@
858 "receiving": "Receiving",
859 "recieving": "Recieving",
860 "recipient_address": "Recipient address",
861 + "recipient_number": "Recipient ${number}",
862 "reconnect": "Reconnect",
863 "reconnect_alert_text": "Are you sure you want to reconnect?",
864 "reconnect_your_hardware_wallet": "Reconnect your Hardware Wallet",
@@ -1094,6 +1097,7 @@
1097 "show_balance_toast": "Long press to hide or show balance",
1098 "show_combined_balance": "Show combined balance",
1099 "show_details": "Show Details",
1100 + "show_full_address": "Show full address",
1101 "show_hidden_addresses": "Show hidden addresses",
1102 "show_keys": "Show seed/keys",
1103 "show_market_place": "Show Marketplace",