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": {
"buttonTxt": "update",
"tooltip": "update profile",
"failureMsg": "failed to update profile: ${reason}",
"successMsg": "successfully updated profile"
},

View File

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

View File

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

View File

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

View File

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