From 8889f09509045531c3fb9f4c5aed172c1930f69d Mon Sep 17 00:00:00 2001 From: Serhii Date: Thu, 19 Oct 2023 01:08:29 +0300 Subject: [PATCH] Accessibility fixes (#1128) --- .../dashboard/widgets/address_page.dart | 29 ++-- .../screens/dashboard/widgets/header_row.dart | 38 +++--- .../present_receive_option_picker.dart | 126 ++++++++---------- .../exchange/widgets/exchange_card.dart | 98 +++++++------- lib/src/widgets/alert_close_button.dart | 19 ++- 5 files changed, 163 insertions(+), 147 deletions(-) diff --git a/lib/src/screens/dashboard/widgets/address_page.dart b/lib/src/screens/dashboard/widgets/address_page.dart index 84100464c..d584ce95b 100644 --- a/lib/src/screens/dashboard/widgets/address_page.dart +++ b/lib/src/screens/dashboard/widgets/address_page.dart @@ -99,19 +99,22 @@ class AddressPage extends BasePage { Widget? trailing(BuildContext context) { return Material( color: Colors.transparent, - child: IconButton( - padding: EdgeInsets.zero, - constraints: BoxConstraints(), - highlightColor: Colors.transparent, - splashColor: Colors.transparent, - iconSize: 25, - onPressed: () { - ShareUtil.share( - text: addressListViewModel.uri.toString(), - context: context, - ); - }, - icon: Icon(Icons.share, size: 20, color: pageIconColor(context)), + child: Semantics( + label: S.of(context).share, + child: IconButton( + padding: EdgeInsets.zero, + constraints: BoxConstraints(), + highlightColor: Colors.transparent, + splashColor: Colors.transparent, + iconSize: 25, + onPressed: () { + ShareUtil.share( + text: addressListViewModel.uri.toString(), + context: context, + ); + }, + icon: Icon(Icons.share, size: 20, color: pageIconColor(context)), + ), ), ); } diff --git a/lib/src/screens/dashboard/widgets/header_row.dart b/lib/src/screens/dashboard/widgets/header_row.dart index 79b7b3fe6..2093a238f 100644 --- a/lib/src/screens/dashboard/widgets/header_row.dart +++ b/lib/src/screens/dashboard/widgets/header_row.dart @@ -31,21 +31,29 @@ class HeaderRow extends StatelessWidget { fontWeight: FontWeight.w500, color: Theme.of(context).extension()!.pageTitleTextColor), ), - GestureDetector( - onTap: () { - showPopUp( - context: context, - builder: (context) => - FilterWidget(dashboardViewModel: dashboardViewModel) - ); - }, - child: Container( - height: 36, - width: 36, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Theme.of(context).extension()!.buttonColor), - child: filterIcon, + Semantics( + container: true, + child: GestureDetector( + onTap: () { + showPopUp( + context: context, + builder: (context) => FilterWidget(dashboardViewModel: dashboardViewModel), + ); + }, + child: Semantics( + label: 'Transaction Filter', + button: true, + enabled: true, + child: Container( + height: 36, + width: 36, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: Theme.of(context).extension()!.buttonColor, + ), + child: filterIcon, + ), + ), ), ) ], diff --git a/lib/src/screens/dashboard/widgets/present_receive_option_picker.dart b/lib/src/screens/dashboard/widgets/present_receive_option_picker.dart index aae42049b..33bceeb5c 100644 --- a/lib/src/screens/dashboard/widgets/present_receive_option_picker.dart +++ b/lib/src/screens/dashboard/widgets/present_receive_option_picker.dart @@ -1,5 +1,5 @@ +import 'package:cake_wallet/src/widgets/alert_close_button.dart'; import 'package:cake_wallet/themes/extensions/cake_text_theme.dart'; -import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/src/screens/ionia/widgets/rounded_checkbox.dart'; import 'package:cake_wallet/src/widgets/alert_background.dart'; import 'package:cake_wallet/typography.dart'; @@ -71,77 +71,69 @@ class PresentReceiveOptionPicker extends StatelessWidget { builder: (BuildContext popUpContext) => Scaffold( resizeToAvoidBottomInset: false, backgroundColor: Colors.transparent, - body: AlertBackground( - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Spacer(), - Container( - margin: EdgeInsets.symmetric(horizontal: 24), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(30), - color: Theme.of(context).colorScheme.background, - ), - child: Padding( - padding: const EdgeInsets.only(top: 24, bottom: 24), - child: (ListView.separated( - padding: EdgeInsets.zero, - shrinkWrap: true, - itemCount: receiveOptionViewModel.options.length, - itemBuilder: (_, index) { - final option = receiveOptionViewModel.options[index]; - return InkWell( - onTap: () { - Navigator.pop(popUpContext); + body: Stack( + alignment: AlignmentDirectional.center, + children:[ AlertBackground( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Spacer(), + Container( + margin: EdgeInsets.symmetric(horizontal: 24), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(30), + color: Theme.of(context).colorScheme.background, + ), + child: Padding( + padding: const EdgeInsets.only(top: 24, bottom: 24), + child: (ListView.separated( + padding: EdgeInsets.zero, + shrinkWrap: true, + itemCount: receiveOptionViewModel.options.length, + itemBuilder: (_, index) { + final option = receiveOptionViewModel.options[index]; + return InkWell( + onTap: () { + Navigator.pop(popUpContext); - receiveOptionViewModel.selectReceiveOption(option); - }, - child: Padding( - padding: const EdgeInsets.only(left: 24, right: 24), - child: Observer(builder: (_) { - final value = receiveOptionViewModel.selectedReceiveOption; + receiveOptionViewModel.selectReceiveOption(option); + }, + child: Padding( + padding: const EdgeInsets.only(left: 24, right: 24), + child: Observer(builder: (_) { + final value = receiveOptionViewModel.selectedReceiveOption; - return Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text(option.toString(), - textAlign: TextAlign.left, - style: textSmall( - color: Theme.of(context).extension()!.titleColor, - ).copyWith( - fontWeight: - value == option ? FontWeight.w800 : FontWeight.w500, - )), - RoundedCheckbox( - value: value == option, - ) - ], - ); - }), - ), - ); - }, - separatorBuilder: (_, index) => SizedBox(height: 30), - )), - ), - ), - Spacer(), - Container( - margin: EdgeInsets.only(bottom: 40), - child: InkWell( - onTap: () => Navigator.pop(popUpContext), - child: CircleAvatar( - child: Icon( - Icons.close, - color: Palette.darkBlueCraiola, - ), - backgroundColor: Colors.white, + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text(option.toString(), + textAlign: TextAlign.left, + style: textSmall( + color: Theme.of(context).extension()!.titleColor, + ).copyWith( + fontWeight: + value == option ? FontWeight.w800 : FontWeight.w500, + )), + RoundedCheckbox( + value: value == option, + ) + ], + ); + }), + ), + ); + }, + separatorBuilder: (_, index) => SizedBox(height: 30), + )), ), ), - ) - ], + Spacer() + ], + ), ), + AlertCloseButton(onTap: () => Navigator.of(popUpContext).pop(), bottom: 40) + ], ), ), context: context, diff --git a/lib/src/screens/exchange/widgets/exchange_card.dart b/lib/src/screens/exchange/widgets/exchange_card.dart index 9c4707529..b55e96e85 100644 --- a/lib/src/screens/exchange/widgets/exchange_card.dart +++ b/lib/src/screens/exchange/widgets/exchange_card.dart @@ -416,37 +416,40 @@ class ExchangeCardState extends State { width: 34, height: 34, padding: EdgeInsets.only(top: 0), - child: InkWell( - onTap: () async { - final contact = - await Navigator.of(context) - .pushNamed( - Routes.pickerAddressBook, - arguments: widget.initialCurrency, - ); + child: Semantics( + label: S.of(context).address_book, + child: InkWell( + onTap: () async { + final contact = + await Navigator.of(context) + .pushNamed( + Routes.pickerAddressBook, + arguments: widget.initialCurrency, + ); - if (contact is ContactBase && - contact.address != null) { - setState(() => - addressController.text = - contact.address); - widget.onPushAddressBookButton - ?.call(context); - } - }, - child: Container( - padding: EdgeInsets.all(8), - decoration: BoxDecoration( - color: widget - .addressButtonsColor, - borderRadius: - BorderRadius.all( - Radius.circular( - 6))), - child: Image.asset( - 'assets/images/open_book.png', - color: Theme.of(context).extension()!.textFieldButtonIconColor, - )), + if (contact is ContactBase && + contact.address != null) { + setState(() => + addressController.text = + contact.address); + widget.onPushAddressBookButton + ?.call(context); + } + }, + child: Container( + padding: EdgeInsets.all(8), + decoration: BoxDecoration( + color: widget + .addressButtonsColor, + borderRadius: + BorderRadius.all( + Radius.circular( + 6))), + child: Image.asset( + 'assets/images/open_book.png', + color: Theme.of(context).extension()!.textFieldButtonIconColor, + )), + ), )), ), Padding( @@ -455,22 +458,25 @@ class ExchangeCardState extends State { width: 34, height: 34, padding: EdgeInsets.only(top: 0), - child: InkWell( - onTap: () { - Clipboard.setData(ClipboardData( - text: addressController - .text)); - showBar( - context, - S - .of(context) - .copied_to_clipboard); - }, - child: Container( - padding: EdgeInsets.fromLTRB( - 8, 8, 0, 8), - color: Colors.transparent, - child: copyImage), + child: Semantics( + label: S.of(context).copy_address, + child: InkWell( + onTap: () { + Clipboard.setData(ClipboardData( + text: addressController + .text)); + showBar( + context, + S + .of(context) + .copied_to_clipboard); + }, + child: Container( + padding: EdgeInsets.fromLTRB( + 8, 8, 0, 8), + color: Colors.transparent, + child: copyImage), + ), ))) ]))) ])), diff --git a/lib/src/widgets/alert_close_button.dart b/lib/src/widgets/alert_close_button.dart index 925756933..e3ff037a9 100644 --- a/lib/src/widgets/alert_close_button.dart +++ b/lib/src/widgets/alert_close_button.dart @@ -1,8 +1,10 @@ +import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/palette.dart'; import 'package:flutter/material.dart'; class AlertCloseButton extends StatelessWidget { AlertCloseButton({this.image, this.bottom, this.onTap}); + final VoidCallback? onTap; final Image? image; @@ -19,12 +21,17 @@ class AlertCloseButton extends StatelessWidget { bottom: bottom ?? 60, child: GestureDetector( onTap: onTap ?? () => Navigator.of(context).pop(), - child: Container( - height: 42, - width: 42, - decoration: BoxDecoration(color: Colors.white, shape: BoxShape.circle), - child: Center( - child: image ?? closeButton, + child: Semantics( + label: S.of(context).close, + button: true, + enabled: true, + child: Container( + height: 42, + width: 42, + decoration: BoxDecoration(color: Colors.white, shape: BoxShape.circle), + child: Center( + child: image ?? closeButton, + ), ), ), ),