Skip to content

🎨 Palette: Enhance accessibility and semantics for Appbar and Modal icon buttons #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
google-labs-jules wants to merge 2 commits into
base: main
Choose a base branch
from
Open

🎨 Palette: Enhance accessibility and semantics for Appbar and Modal icon buttons #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ae810c
🎨 Palette: Enhance accessibility and semantics for Appbar and Modal i…
google-labs-jules[bot] Aug 19, 2026
89be40e
🎨 Palette: Enhance accessibility and semantics for Appbar and Modal i…
google-labs-jules[bot] Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`）。
34 changes: 24 additions & 10 deletions lib/pages/TaskCreationPage/task_creation_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
),
),
),
),
),
Expand All @@ -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),
),
),
);
Expand Down
13 changes: 10 additions & 3 deletions lib/shared/custom_appbar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
),
),
),
),
),
Expand Down
Loading