feat: wrap with semantic widget for talkback

This commit is contained in:
detherminal 2023-04-27 21:14:04 +03:00
parent 95d57cffc1
commit 6522d36c7b
15 changed files with 253 additions and 187 deletions

View file

@ -333,53 +333,57 @@ class _AddWalletViewState extends ConsumerState<AddWalletView> {
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
child: TextField(
autofocus: isDesktop,
autocorrect: !isDesktop,
enableSuggestions: !isDesktop,
controller: _searchFieldController,
focusNode: _searchFocusNode,
onChanged: (value) => setState(() => _searchTerm = value),
style: STextStyles.field(context),
decoration: standardInputDecoration(
"Search",
_searchFocusNode,
context,
desktopMed: isDesktop,
).copyWith(
prefixIcon: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 16,
child: Semantics(
label: "Search Text Field. Inputs Text To Search In Wallets.",
excludeSemantics: true,
child: TextField(
autofocus: isDesktop,
autocorrect: !isDesktop,
enableSuggestions: !isDesktop,
controller: _searchFieldController,
focusNode: _searchFocusNode,
onChanged: (value) => setState(() => _searchTerm = value),
style: STextStyles.field(context),
decoration: standardInputDecoration(
"Search",
_searchFocusNode,
context,
desktopMed: isDesktop,
).copyWith(
prefixIcon: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 16,
),
child: SvgPicture.asset(
Assets.svg.search,
width: 16,
height: 16,
),
),
child: SvgPicture.asset(
Assets.svg.search,
width: 16,
height: 16,
),
),
suffixIcon: _searchFieldController.text.isNotEmpty
? Padding(
padding: const EdgeInsets.only(right: 0),
child: UnconstrainedBox(
child: Row(
children: [
TextFieldIconButton(
child: const XIcon(),
onTap: () async {
setState(() {
_searchFieldController.text = "";
_searchTerm = "";
});
},
),
],
suffixIcon: _searchFieldController.text.isNotEmpty
? Padding(
padding: const EdgeInsets.only(right: 0),
child: UnconstrainedBox(
child: Row(
children: [
TextFieldIconButton(
child: const XIcon(),
onTap: () async {
setState(() {
_searchFieldController.text = "";
_searchTerm = "";
});
},
),
),
)
: null,
],
),
),
)
: null,
),
),
),
)
),
const SizedBox(
height: 10,

View file

@ -238,14 +238,22 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
TextFieldIconButton(
key: const Key("genRandomWalletNameButtonKey"),
child: _showDiceIcon
? DiceIcon(
width: isDesktop ? 20 : 17,
height: isDesktop ? 20 : 17,
)
: XIcon(
? Semantics(
label: "Generate Random Wallet Name Button. Generates A Random Name For Wallet.",
excludeSemantics: true,
child: DiceIcon(
width: isDesktop ? 20 : 17,
height: isDesktop ? 20 : 17,
),
)
: Semantics(
label: "Generate Random Wallet Name Button. Generates A Random Name For Wallet.",
excludeSemantics: true,
child: XIcon(
width: isDesktop ? 21 : 18,
height: isDesktop ? 21 : 18,
),
),
onTap: () async {
if (_showDiceIcon) {
textEditingController.text =

View file

@ -140,6 +140,7 @@ class _NewWalletRecoveryPhraseViewState
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
label: "Copy Button. Copies The Recovery Phrase To Clipboard.",
color: Theme.of(context)
.extension<StackColors>()!
.background,

View file

@ -87,6 +87,7 @@ class _NewWalletRecoveryPhraseWarningViewState
right: 10,
),
child: AppBarIconButton(
label: "Question Button. Openes A Dialog For Recovery Phrase Explanation.",
icon: SvgPicture.asset(
Assets.svg.circleQuestion,
width: 20,

View file

@ -636,6 +636,7 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
label: "View QR Code Button. Opens Camera To Scan QR Code For Restoring Wallet.",
key: const Key("restoreWalletViewQrCodeButton"),
size: 36,
shadows: const [],
@ -662,6 +663,7 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
label: "Paste Button. Pastes From Clipboard For Restoring Wallet.",
key: const Key("restoreWalletPasteButton"),
size: 36,
shadows: const [],

View file

@ -781,31 +781,35 @@ class _ExchangeFormState extends ConsumerState<ExchangeForm> {
cursor: SystemMouseCursors.click,
child: child,
),
child: RoundedContainer(
padding: isDesktop
? const EdgeInsets.all(6)
: const EdgeInsets.all(2),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
radiusMultiplier: 0.75,
child: GestureDetector(
onTap: () async {
await _swap();
},
child: Padding(
padding: const EdgeInsets.all(4),
child: SvgPicture.asset(
Assets.svg.swap,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
child: Semantics(
label: "Swap Button. Reverse The Exchange Currencies.",
excludeSemantics: true,
child: RoundedContainer(
padding: isDesktop
? const EdgeInsets.all(6)
: const EdgeInsets.all(2),
color: Theme.of(context)
.extension<StackColors>()!
.buttonBackSecondary,
radiusMultiplier: 0.75,
child: GestureDetector(
onTap: () async {
await _swap();
},
child: Padding(
padding: const EdgeInsets.all(4),
child: SvgPicture.asset(
Assets.svg.swap,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.accentColorDark,
),
),
),
),
),
)
),
],
),

View file

@ -191,6 +191,7 @@ class _HomeViewState extends ConsumerState<HomeView> {
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
label: "Notifications Button. Takes To Notifications Page.",
key: const Key("walletsViewAlertsButton"),
size: 36,
shadows: const [],
@ -254,6 +255,7 @@ class _HomeViewState extends ConsumerState<HomeView> {
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
label: "Settings Button. Takes To Settings Page.",
key: const Key("walletsViewSettingsButton"),
size: 36,
shadows: const [],

View file

@ -39,6 +39,7 @@ class LockscreenView extends ConsumerStatefulWidget {
this.routeOnSuccessArguments,
this.biometrics = const Biometrics(),
this.onSuccess,
this.customKeyLabel = "Button",
}) : super(key: key);
static const String routeName = "/lockscreen";
@ -53,6 +54,8 @@ class LockscreenView extends ConsumerStatefulWidget {
final String biometricsCancelButtonString;
final Biometrics biometrics;
final VoidCallback? onSuccess;
final String customKeyLabel;
@override
ConsumerState<LockscreenView> createState() => _LockscreenViewState();
@ -245,6 +248,10 @@ class _LockscreenViewState extends ConsumerState<LockscreenView> {
),
CustomPinPut(
customKey: CustomKey(
customKeyLabel: Platform.isIOS
? "Face ID Button. Checks Face ID."
: "Fingerprint Button. Checks Fingerprint."
,
onPressed: _checkUseBiometrics,
iconAssetName: Platform.isIOS
? Assets.svg.faceId

View file

@ -143,6 +143,7 @@ class _ReceiveViewState extends ConsumerState<ReceiveView> {
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
label: "Adress List Pop-up Button. Opens A Pop-up For Adress List Button.",
key: const Key("walletNetworkSettingsAddNewNodeViewButton"),
size: 36,
shadows: const [],

View file

@ -980,6 +980,7 @@ class _SendViewState extends ConsumerState<SendView> {
children: [
_addressToggleFlag
? TextFieldIconButton(
label: "Clear Button. Clears The Address Field Input.",
key: const Key(
"sendViewClearAddressFieldButtonKey"),
onTap: () {
@ -996,6 +997,7 @@ class _SendViewState extends ConsumerState<SendView> {
child: const XIcon(),
)
: TextFieldIconButton(
label: "Paste Button. Pastes From Clipboard To Address Field Input.",
key: const Key(
"sendViewPasteAddressFieldButtonKey"),
onTap: () async {
@ -1045,6 +1047,7 @@ class _SendViewState extends ConsumerState<SendView> {
),
if (sendToController.text.isEmpty)
TextFieldIconButton(
label: "Address Book Button. Opens Address Book For Address Field.",
key: const Key(
"sendViewAddressBookButtonKey"),
onTap: () {
@ -1057,6 +1060,7 @@ class _SendViewState extends ConsumerState<SendView> {
),
if (sendToController.text.isEmpty)
TextFieldIconButton(
label: "Scan QR Button. Opens Camera For Scanning QR Code.",
key: const Key(
"sendViewScanQrButtonKey"),
onTap: () async {

View file

@ -117,58 +117,62 @@ class _RefreshButtonState extends ConsumerState<WalletRefreshButton>
return SizedBox(
height: isDesktop ? 22 : 36,
width: isDesktop ? 22 : 36,
child: MaterialButton(
color: isDesktop
? Theme.of(context).extension<StackColors>()!.buttonBackSecondary
: null,
splashColor: Theme.of(context).extension<StackColors>()!.highlight,
onPressed: () {
if (widget.tokenContractAddress == null) {
final managerProvider = ref
.read(walletsChangeNotifierProvider)
.getManagerProvider(widget.walletId);
final isRefreshing = ref.read(managerProvider).isRefreshing;
if (!isRefreshing) {
_spinController?.repeat();
ref
.read(managerProvider)
.refresh()
.then((_) => _spinController?.stop());
child: Semantics(
label: "Refresh Button. Refreshes The Values In Page.",
excludeSemantics: true,
child: MaterialButton(
color: isDesktop
? Theme.of(context).extension<StackColors>()!.buttonBackSecondary
: null,
splashColor: Theme.of(context).extension<StackColors>()!.highlight,
onPressed: () {
if (widget.tokenContractAddress == null) {
final managerProvider = ref
.read(walletsChangeNotifierProvider)
.getManagerProvider(widget.walletId);
final isRefreshing = ref.read(managerProvider).isRefreshing;
if (!isRefreshing) {
_spinController?.repeat();
ref
.read(managerProvider)
.refresh()
.then((_) => _spinController?.stop());
}
} else {
if (!ref.read(tokenServiceProvider)!.isRefreshing) {
ref.read(tokenServiceProvider)!.refresh();
}
}
} else {
if (!ref.read(tokenServiceProvider)!.isRefreshing) {
ref.read(tokenServiceProvider)!.refresh();
}
}
},
elevation: 0,
highlightElevation: 0,
hoverElevation: 0,
padding: EdgeInsets.zero,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
},
elevation: 0,
highlightElevation: 0,
hoverElevation: 0,
padding: EdgeInsets.zero,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
child: RotationTransition(
turns: _spinAnimation,
child: SvgPicture.asset(
Assets.svg.arrowRotate,
width: isDesktop ? 12 : 24,
height: isDesktop ? 12 : 24,
color: widget.overrideIconColor != null
? widget.overrideIconColor!
: isDesktop
? Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultSearchIconRight
: Theme.of(context)
.extension<StackColors>()!
.textFavoriteCard,
),
),
),
child: RotationTransition(
turns: _spinAnimation,
child: SvgPicture.asset(
Assets.svg.arrowRotate,
width: isDesktop ? 12 : 24,
height: isDesktop ? 12 : 24,
color: widget.overrideIconColor != null
? widget.overrideIconColor!
: isDesktop
? Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultSearchIconRight
: Theme.of(context)
.extension<StackColors>()!
.textFavoriteCard,
),
),
),
)
);
}
}

View file

@ -474,6 +474,7 @@ class _WalletViewState extends ConsumerState<WalletView> {
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
label: "Network Button. Takes To Network Status Page.",
key: const Key("walletViewRadioButton"),
size: 36,
shadows: const [],
@ -503,6 +504,7 @@ class _WalletViewState extends ConsumerState<WalletView> {
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
label: "Notifications Button. Takes To Notifications Page.",
key: const Key("walletViewAlertsButton"),
size: 36,
shadows: const [],
@ -570,6 +572,7 @@ class _WalletViewState extends ConsumerState<WalletView> {
child: AspectRatio(
aspectRatio: 1,
child: AppBarIconButton(
label: "Settings Button. Takes To Wallet Settings Page.",
key: const Key("walletViewSettingsButton"),
size: 36,
shadows: const [],

View file

@ -13,6 +13,7 @@ class AppBarIconButton extends StatelessWidget {
// this.circularBorderRadius = 10.0,
this.size = 36.0,
this.shadows = const [],
this.label = "Button",
}) : super(key: key);
final Widget icon;
@ -21,6 +22,7 @@ class AppBarIconButton extends StatelessWidget {
// final double circularBorderRadius;
final double size;
final List<BoxShadow> shadows;
final String label;
@override
Widget build(BuildContext context) {
@ -32,16 +34,20 @@ class AppBarIconButton extends StatelessWidget {
color: color ?? Theme.of(context).extension<StackColors>()!.background,
boxShadow: shadows,
),
child: MaterialButton(
splashColor: Theme.of(context).extension<StackColors>()!.highlight,
padding: EdgeInsets.zero,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(1000),
child: Semantics(
excludeSemantics: true,
label: label,
child: MaterialButton(
splashColor: Theme.of(context).extension<StackColors>()!.highlight,
padding: EdgeInsets.zero,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(1000),
),
onPressed: onPressed,
child: icon,
),
onPressed: onPressed,
child: icon,
),
)
);
}
}
@ -53,12 +59,14 @@ class AppBarBackButton extends StatelessWidget {
this.isCompact = false,
this.size,
this.iconSize,
this.label = "Back Button. Takes Back To Previous Page.",
}) : super(key: key);
final VoidCallback? onPressed;
final bool isCompact;
final double? size;
final double? iconSize;
final String label;
@override
Widget build(BuildContext context) {
@ -71,24 +79,25 @@ class AppBarBackButton extends StatelessWidget {
)
: const EdgeInsets.all(10),
child: AppBarIconButton(
size: size ??
(isDesktop
? isCompact
? 42
: 56
: 32),
color: isDesktop
? Theme.of(context).extension<StackColors>()!.textFieldDefaultBG
: Theme.of(context).extension<StackColors>()!.background,
shadows: const [],
icon: SvgPicture.asset(
Assets.svg.arrowLeft,
width: iconSize ?? (isCompact ? 18 : 24),
height: iconSize ?? (isCompact ? 18 : 24),
color: Theme.of(context).extension<StackColors>()!.topNavIconPrimary,
),
onPressed: onPressed ?? Navigator.of(context).pop,
),
label: label,
size: size ??
(isDesktop
? isCompact
? 42
: 56
: 32),
color: isDesktop
? Theme.of(context).extension<StackColors>()!.textFieldDefaultBG
: Theme.of(context).extension<StackColors>()!.background,
shadows: const [],
icon: SvgPicture.asset(
Assets.svg.arrowLeft,
width: iconSize ?? (isCompact ? 18 : 24),
height: iconSize ?? (isCompact ? 18 : 24),
color: Theme.of(context).extension<StackColors>()!.topNavIconPrimary,
),
onPressed: onPressed ?? Navigator.of(context).pop,
)
);
}
}

View file

@ -139,15 +139,19 @@ class _BackspaceKeyState extends State<BackspaceKey> {
}
});
},
child: Center(
child: SvgPicture.asset(
Assets.svg.delete,
width: 20,
height: 20,
color:
Theme.of(context).extension<StackColors>()!.numpadTextDefault,
child: Semantics(
label: "Backspace Button. Deletes The Last Digit.",
excludeSemantics: true,
child: Center(
child: SvgPicture.asset(
Assets.svg.delete,
width: 20,
height: 20,
color:
Theme.of(context).extension<StackColors>()!.numpadTextDefault,
),
),
),
)
),
);
}
@ -197,10 +201,12 @@ class CustomKey extends StatelessWidget {
Key? key,
required this.onPressed,
this.iconAssetName,
this.customKeyLabel = "Button",
}) : super(key: key);
final VoidCallback onPressed;
final String? iconAssetName;
final String customKeyLabel;
@override
Widget build(BuildContext context) {
@ -212,26 +218,30 @@ class CustomKey extends StatelessWidget {
color: Theme.of(context).extension<StackColors>()!.numpadBackDefault,
shadows: const [],
),
child: MaterialButton(
// splashColor: Theme.of(context).extension<StackColors>()!.highlight,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: const StadiumBorder(),
onPressed: () {
onPressed.call();
},
child: Center(
child: iconAssetName == null
? null
: SvgPicture.asset(
iconAssetName!,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.numpadTextDefault,
),
child: Semantics(
label: customKeyLabel,
excludeSemantics: true,
child: MaterialButton(
// splashColor: Theme.of(context).extension<StackColors>()!.highlight,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: const StadiumBorder(),
onPressed: () {
onPressed.call();
},
child: Center(
child: iconAssetName == null
? null
: SvgPicture.asset(
iconAssetName!,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.numpadTextDefault,
),
),
),
),
)
);
}
}

View file

@ -8,6 +8,7 @@ class TextFieldIconButton extends StatefulWidget {
this.onTap,
required this.child,
this.color = Colors.transparent,
this.label = "Button",
}) : super(key: key);
final double width;
@ -15,6 +16,7 @@ class TextFieldIconButton extends StatefulWidget {
final VoidCallback? onTap;
final Widget child;
final Color color;
final String label;
@override
State<TextFieldIconButton> createState() => _TextFieldIconButtonState();
@ -36,21 +38,25 @@ class _TextFieldIconButtonState extends State<TextFieldIconButton> {
width: widget.width,
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: RawMaterialButton(
constraints: BoxConstraints(
minWidth: widget.width,
minHeight: widget.height,
),
onPressed: onTap,
child: Container(
width: widget.width,
height: widget.height,
color: widget.color,
child: Center(
child: widget.child,
child: Semantics(
label: widget.label,
excludeSemantics: true,
child: RawMaterialButton(
constraints: BoxConstraints(
minWidth: widget.width,
minHeight: widget.height,
),
onPressed: onTap,
child: Container(
width: widget.width,
height: widget.height,
color: widget.color,
child: Center(
child: widget.child,
),
),
),
),
)
),
);
}