Add accessability semantics

This commit is contained in:
problematicconsumer
2023-09-02 21:09:22 +03:30
parent 5d2abaf748
commit b06ae63486
5 changed files with 150 additions and 124 deletions

View File

@@ -52,6 +52,7 @@
}, },
"update": { "update": {
"buttonTxt": "update", "buttonTxt": "update",
"tooltip": "update profile",
"failureMsg": "failed to update profile: ${reason}", "failureMsg": "failed to update profile: ${reason}",
"successMsg": "successfully updated profile" "successMsg": "successfully updated profile"
}, },

View File

@@ -52,6 +52,7 @@
}, },
"update": { "update": {
"buttonTxt": "بروزرسانی", "buttonTxt": "بروزرسانی",
"tooltip": "بروزرسانی پروفایل",
"failureMsg": "در بروزرسانی پروفایل خطایی رخ داد: ${reason}", "failureMsg": "در بروزرسانی پروفایل خطایی رخ داد: ${reason}",
"successMsg": "پروفایل با موفقیت بروزرسانی شد" "successMsg": "پروفایل با موفقیت بروزرسانی شد"
}, },

View File

@@ -92,20 +92,24 @@ class ProfileTile extends HookConsumerWidget {
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
color: Colors.transparent, color: Colors.transparent,
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
child: InkWell( child: Semantics(
onTap: () => const ProfilesRoute().go(context), button: true,
child: Row( label: t.profile.overviewPageTitle,
mainAxisAlignment: child: InkWell(
MainAxisAlignment.spaceBetween, onTap: () => const ProfilesRoute().go(context),
children: [ child: Row(
Flexible( mainAxisAlignment:
child: Text( MainAxisAlignment.spaceBetween,
profile.name, children: [
style: theme.textTheme.titleMedium, Flexible(
child: Text(
profile.name,
style: theme.textTheme.titleMedium,
),
), ),
), const Icon(Icons.arrow_drop_down),
const Icon(Icons.arrow_drop_down), ],
], ),
), ),
), ),
), ),
@@ -154,37 +158,44 @@ class ProfileActionButton extends HookConsumerWidget {
); );
if (!showAllActions) { if (!showAllActions) {
return Tooltip( return Semantics(
message: t.profile.update.buttonTxt, button: true,
child: InkWell( enabled: !updateProfileMutation.state.isInProgress,
onTap: () { child: Tooltip(
if (updateProfileMutation.state.isInProgress) { message: t.profile.update.tooltip,
return; child: InkWell(
} onTap: () {
updateProfileMutation.setFuture( if (updateProfileMutation.state.isInProgress) {
ref return;
.read(profilesNotifierProvider.notifier) }
.updateProfile(profile), updateProfileMutation.setFuture(
); ref
}, .read(profilesNotifierProvider.notifier)
child: const Icon(Icons.update), .updateProfile(profile),
);
},
child: const Icon(Icons.update),
),
), ),
); );
} }
return ProfileActionsMenu( return ProfileActionsMenu(
profile, profile,
(context, controller, child) { (context, controller, child) {
return Tooltip( return Semantics(
message: MaterialLocalizations.of(context).showMenuTooltip, button: true,
child: InkWell( child: Tooltip(
onTap: () { message: MaterialLocalizations.of(context).showMenuTooltip,
if (controller.isOpen) { child: InkWell(
controller.close(); onTap: () {
} else { if (controller.isOpen) {
controller.open(); controller.close();
} } else {
}, controller.open();
child: const Icon(Icons.more_vert), }
},
child: const Icon(Icons.more_vert),
),
), ),
); );
}, },

View File

@@ -87,38 +87,43 @@ class _ConnectionButton extends StatelessWidget {
return Column( return Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Container( Semantics(
clipBehavior: Clip.antiAlias, button: true,
decoration: BoxDecoration( enabled: enabled,
shape: BoxShape.circle, label: label,
boxShadow: [ child: Container(
BoxShadow( clipBehavior: Clip.antiAlias,
blurRadius: 16, decoration: BoxDecoration(
color: buttonColor.withOpacity(0.5), shape: BoxShape.circle,
), boxShadow: [
], BoxShadow(
), blurRadius: 16,
width: 148, color: buttonColor.withOpacity(0.5),
height: 148, ),
child: Material( ],
shape: const CircleBorder(), ),
color: Colors.white, width: 148,
child: InkWell( height: 148,
onTap: onTap, child: Material(
child: Padding( shape: const CircleBorder(),
padding: const EdgeInsets.all(36), color: Colors.white,
child: Assets.images.logo.svg( child: InkWell(
colorFilter: ColorFilter.mode( onTap: onTap,
buttonColor, child: Padding(
BlendMode.srcIn, padding: const EdgeInsets.all(36),
child: Assets.images.logo.svg(
colorFilter: ColorFilter.mode(
buttonColor,
BlendMode.srcIn,
),
), ),
), ),
), ),
), ).animate(target: enabled ? 0 : 1).blurXY(end: 1),
).animate(target: enabled ? 0 : 1).blurXY(end: 1), )
) .animate(target: enabled ? 0 : 1)
.animate(target: enabled ? 0 : 1) .scaleXY(end: .88, curve: Curves.easeIn),
.scaleXY(end: .88, curve: Curves.easeIn), ),
const Gap(16), const Gap(16),
Text( Text(
label.sentenceCase, label.sentenceCase,

View File

@@ -146,9 +146,11 @@ class AddProfileModal extends HookConsumerWidget {
.addProfile(link.url), .addProfile(link.url),
); );
} else { } else {
CustomToast.error( if (context.mounted) {
t.profile.add.invalidUrlMsg.sentenceCase, CustomToast.error(
).show(context); t.profile.add.invalidUrlMsg.sentenceCase,
).show(context);
}
} }
}, },
) )
@@ -171,35 +173,38 @@ class AddProfileModal extends HookConsumerWidget {
horizontal: buttonsPadding, horizontal: buttonsPadding,
vertical: 16, vertical: 16,
), ),
child: SizedBox( child: Semantics(
height: 36, button: true,
child: Material( child: SizedBox(
elevation: 8, height: 36,
color: theme.colorScheme.surface, child: Material(
surfaceTintColor: theme.colorScheme.surfaceTint, elevation: 8,
shadowColor: Colors.transparent, color: theme.colorScheme.surface,
borderRadius: BorderRadius.circular(8), surfaceTintColor: theme.colorScheme.surfaceTint,
clipBehavior: Clip.antiAlias, shadowColor: Colors.transparent,
child: InkWell( borderRadius: BorderRadius.circular(8),
onTap: () async { clipBehavior: Clip.antiAlias,
context.pop(); child: InkWell(
await const NewProfileRoute().push(context); onTap: () async {
}, context.pop();
child: Row( await const NewProfileRoute().push(context);
mainAxisAlignment: MainAxisAlignment.center, },
children: [ child: Row(
Icon( mainAxisAlignment: MainAxisAlignment.center,
Icons.add, children: [
color: theme.colorScheme.primary, Icon(
), Icons.add,
const Gap(8),
Text(
t.profile.add.manually.sentenceCase,
style: theme.textTheme.labelLarge?.copyWith(
color: theme.colorScheme.primary, color: theme.colorScheme.primary,
), ),
), const Gap(8),
], Text(
t.profile.add.manually.sentenceCase,
style: theme.textTheme.labelLarge?.copyWith(
color: theme.colorScheme.primary,
),
),
],
),
), ),
), ),
), ),
@@ -238,34 +243,37 @@ class _Button extends StatelessWidget {
final theme = Theme.of(context); final theme = Theme.of(context);
final color = theme.colorScheme.primary; final color = theme.colorScheme.primary;
return SizedBox( return Semantics(
width: size, button: true,
height: size, child: SizedBox(
child: Material( width: size,
elevation: 8, height: size,
color: theme.colorScheme.surface, child: Material(
surfaceTintColor: theme.colorScheme.surfaceTint, elevation: 8,
shadowColor: Colors.transparent, color: theme.colorScheme.surface,
borderRadius: BorderRadius.circular(8), surfaceTintColor: theme.colorScheme.surfaceTint,
clipBehavior: Clip.antiAlias, shadowColor: Colors.transparent,
child: InkWell( borderRadius: BorderRadius.circular(8),
onTap: onTap, clipBehavior: Clip.antiAlias,
child: Column( child: InkWell(
mainAxisAlignment: MainAxisAlignment.center, onTap: onTap,
children: [ child: Column(
Icon( mainAxisAlignment: MainAxisAlignment.center,
icon, children: [
size: size / 3, Icon(
color: color, icon,
), size: size / 3,
const Gap(16), color: color,
Flexible(
child: Text(
label,
style: theme.textTheme.labelLarge?.copyWith(color: color),
), ),
), const Gap(16),
], Flexible(
child: Text(
label,
style: theme.textTheme.labelLarge?.copyWith(color: color),
),
),
],
),
), ),
), ),
), ),