diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..bf2c57e --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2026-08-19 - Accessibility & Tooltips for Icon-only Navigation Buttons +经验心得: 在 Flutter 中,仅有 Icon 的按钮(如 CustomAppbar 的返回按钮、TaskCreationPage 的关闭与新增按钮)容易遗漏屏幕阅读器标签与悬停/长按提示。将 Icon 按钮包裹在 `Semantics(label: '...', button: true)` 和 `Tooltip(message: '...')` 下,可大幅提升无障碍体验(a11y)和桌面/长按交互体验。 +后续行动: 未来构建仅图标按钮组件时,应确保同时传递 `tooltip` 与语义说明(`Semantics`)。 diff --git a/lib/pages/TaskCreationPage/task_creation_page.dart b/lib/pages/TaskCreationPage/task_creation_page.dart index 406c48c..8606c1d 100644 --- a/lib/pages/TaskCreationPage/task_creation_page.dart +++ b/lib/pages/TaskCreationPage/task_creation_page.dart @@ -28,10 +28,17 @@ class TaskCreationPage { onPrimary: Theme.of(context).colorScheme.onSurface, ), ), - child: M3EIconButton( - icon: Icon(Icons.close_rounded), - variant: M3EIconButtonVariant.filled, - onPressed: () => Navigator.of(context).pop(), + child: Semantics( + label: '关闭', + button: true, + child: Tooltip( + message: '关闭', + child: M3EIconButton( + icon: const Icon(Icons.close_rounded), + variant: M3EIconButtonVariant.filled, + onPressed: () => Navigator.of(context).pop(), + ), + ), ), ), ), @@ -46,13 +53,20 @@ class TaskCreationPage { onPrimary: Theme.of(context).colorScheme.onPrimaryContainer, ), ), - child: M3EIconButton( - icon: Icon( - Icons.add_rounded, - color: Theme.of(context).colorScheme.onPrimaryContainer, + child: Semantics( + label: '新建任务', + button: true, + child: Tooltip( + message: '新建任务', + child: M3EIconButton( + icon: Icon( + Icons.add_rounded, + color: Theme.of(context).colorScheme.onPrimaryContainer, + ), + variant: M3EIconButtonVariant.filled, + onPressed: () => _handleCreate(context, ref), + ), ), - variant: M3EIconButtonVariant.filled, - onPressed: () => _handleCreate(context, ref), ), ), ); diff --git a/lib/shared/custom_appbar.dart b/lib/shared/custom_appbar.dart index d0857a8..f7a6b2d 100644 --- a/lib/shared/custom_appbar.dart +++ b/lib/shared/custom_appbar.dart @@ -110,9 +110,16 @@ class CustomAppbar extends StatelessWidget implements PreferredSizeWidget { top: 0, bottom: 0, child: Center( - child: GlassIconButton( - icon: const Icon(Icons.arrow_back_rounded), - onPressed: () => context.pop(), + child: Semantics( + label: '返回', + button: true, + child: Tooltip( + message: '返回', + child: GlassIconButton( + icon: const Icon(Icons.arrow_back_rounded), + onPressed: () => context.pop(), + ), + ), ), ), ),