Add accessability semantics
This commit is contained in:
@@ -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),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user