feat(semantics): add semantic labels for UI automation
- Created lib/core/semantics/ with semantic ID constants and helper widget
- Enabled SemanticsBinding on web builds for accessibility tree exposure
- Added semantic IDs to:
- ProfileDropdown (button, settings, theme options, logout)
- TopHeaderBar room tabs (frontHall, controlRoom, security, parlor)
- NavPanel items (nav_item_{id})
This enables browser automation tools like Puppeteer and WebDriver to
discover and interact with Flutter widgets via the accessibility tree.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeroen Schweitzer
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
04032a6dbc
commit
a6c51f757a
@@ -1,4 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tatlock_ui/core/semantics/semantic_ids.dart';
|
||||
|
||||
import 'panel_header.dart';
|
||||
|
||||
@@ -199,17 +200,22 @@ class _NavTile extends StatelessWidget {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
child: Material(
|
||||
color: isSelected
|
||||
? colorScheme.primaryContainer.withValues(alpha: 0.4)
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
return Semantics(
|
||||
identifier: NavSemantics.item(item.id),
|
||||
label: item.label,
|
||||
button: true,
|
||||
selected: isSelected,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
|
||||
child: Material(
|
||||
color: isSelected
|
||||
? colorScheme.primaryContainer.withValues(alpha: 0.4)
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Padding(
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
@@ -258,6 +264,7 @@ class _NavTile extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:tatlock_ui/core/auth/auth_provider.dart';
|
||||
import 'package:tatlock_ui/core/semantics/semantic_ids.dart';
|
||||
import 'package:tatlock_ui/core/theme/theme_provider.dart';
|
||||
import 'package:tatlock_ui/routing/app_router.dart';
|
||||
|
||||
@@ -20,189 +21,209 @@ class ProfileDropdown extends ConsumerWidget {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return authState.when(
|
||||
data: (auth) => PopupMenuButton<String>(
|
||||
offset: const Offset(0, 48),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Tooltip(
|
||||
message: auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
|
||||
child: CircleAvatar(
|
||||
radius: 18,
|
||||
backgroundColor: colorScheme.primaryContainer,
|
||||
child: auth.isAuthenticated
|
||||
? Text(
|
||||
_getInitials(auth.userName),
|
||||
style: TextStyle(
|
||||
data: (auth) => Semantics(
|
||||
identifier: ProfileSemantics.button,
|
||||
label: 'Profile menu',
|
||||
button: true,
|
||||
child: PopupMenuButton<String>(
|
||||
offset: const Offset(0, 48),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Tooltip(
|
||||
message: auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
|
||||
child: CircleAvatar(
|
||||
radius: 18,
|
||||
backgroundColor: colorScheme.primaryContainer,
|
||||
child: auth.isAuthenticated
|
||||
? Text(
|
||||
_getInitials(auth.userName),
|
||||
style: TextStyle(
|
||||
color: colorScheme.onPrimaryContainer,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
)
|
||||
: Icon(
|
||||
Icons.person_outline,
|
||||
size: 20,
|
||||
color: colorScheme.onPrimaryContainer,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
)
|
||||
: Icon(
|
||||
Icons.person_outline,
|
||||
size: 20,
|
||||
color: colorScheme.onPrimaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
itemBuilder: (context) => [
|
||||
// User info header (non-selectable)
|
||||
PopupMenuItem<String>(
|
||||
enabled: false,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
),
|
||||
if (auth.userEmail != null)
|
||||
Text(
|
||||
auth.userEmail!,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const PopupMenuDivider(),
|
||||
|
||||
// Settings
|
||||
const PopupMenuItem<String>(
|
||||
value: 'settings',
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.settings_outlined, size: 20),
|
||||
SizedBox(width: 12),
|
||||
Text('Settings'),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Theme submenu header
|
||||
PopupMenuItem<String>(
|
||||
enabled: false,
|
||||
height: 32,
|
||||
child: Text(
|
||||
'THEME',
|
||||
style: Theme.of(context).textTheme.labelSmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Theme: System
|
||||
PopupMenuItem<String>(
|
||||
value: 'theme_system',
|
||||
height: 40,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.brightness_auto,
|
||||
size: 18,
|
||||
color: currentTheme == ThemeSetting.system
|
||||
? colorScheme.primary
|
||||
: null,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
'System',
|
||||
style: currentTheme == ThemeSetting.system
|
||||
? TextStyle(color: colorScheme.primary)
|
||||
: null,
|
||||
),
|
||||
const Spacer(),
|
||||
if (currentTheme == ThemeSetting.system)
|
||||
Icon(Icons.check, size: 16, color: colorScheme.primary),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Theme: Light
|
||||
PopupMenuItem<String>(
|
||||
value: 'theme_light',
|
||||
height: 40,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.light_mode,
|
||||
size: 18,
|
||||
color: currentTheme == ThemeSetting.light
|
||||
? colorScheme.primary
|
||||
: null,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
'Light',
|
||||
style: currentTheme == ThemeSetting.light
|
||||
? TextStyle(color: colorScheme.primary)
|
||||
: null,
|
||||
),
|
||||
const Spacer(),
|
||||
if (currentTheme == ThemeSetting.light)
|
||||
Icon(Icons.check, size: 16, color: colorScheme.primary),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Theme: Dark
|
||||
PopupMenuItem<String>(
|
||||
value: 'theme_dark',
|
||||
height: 40,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.dark_mode,
|
||||
size: 18,
|
||||
color: currentTheme == ThemeSetting.dark
|
||||
? colorScheme.primary
|
||||
: null,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
'Dark',
|
||||
style: currentTheme == ThemeSetting.dark
|
||||
? TextStyle(color: colorScheme.primary)
|
||||
: null,
|
||||
),
|
||||
const Spacer(),
|
||||
if (currentTheme == ThemeSetting.dark)
|
||||
Icon(Icons.check, size: 16, color: colorScheme.primary),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const PopupMenuDivider(),
|
||||
|
||||
// Logout (only if authenticated)
|
||||
if (auth.isAuthenticated)
|
||||
const PopupMenuItem<String>(
|
||||
value: 'logout',
|
||||
child: Row(
|
||||
itemBuilder: (context) => [
|
||||
// User info header (non-selectable)
|
||||
PopupMenuItem<String>(
|
||||
enabled: false,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(Icons.logout, size: 20),
|
||||
SizedBox(width: 12),
|
||||
Text('Logout'),
|
||||
Text(
|
||||
auth.isAuthenticated ? auth.userName ?? 'User' : 'Guest',
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
),
|
||||
if (auth.userEmail != null)
|
||||
Text(
|
||||
auth.userEmail!,
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
onSelected: (value) {
|
||||
switch (value) {
|
||||
case 'settings':
|
||||
context.go(AppRoutes.settings);
|
||||
case 'theme_system':
|
||||
_updateTheme(ref, ThemeSetting.system);
|
||||
case 'theme_light':
|
||||
_updateTheme(ref, ThemeSetting.light);
|
||||
case 'theme_dark':
|
||||
_updateTheme(ref, ThemeSetting.dark);
|
||||
case 'logout':
|
||||
ref.read(authProvider.notifier).signOut();
|
||||
}
|
||||
},
|
||||
const PopupMenuDivider(),
|
||||
|
||||
// Settings
|
||||
PopupMenuItem<String>(
|
||||
value: 'settings',
|
||||
child: Semantics(
|
||||
identifier: ProfileSemantics.settings,
|
||||
child: const Row(
|
||||
children: [
|
||||
Icon(Icons.settings_outlined, size: 20),
|
||||
SizedBox(width: 12),
|
||||
Text('Settings'),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Theme submenu header
|
||||
PopupMenuItem<String>(
|
||||
enabled: false,
|
||||
height: 32,
|
||||
child: Text(
|
||||
'THEME',
|
||||
style: Theme.of(context).textTheme.labelSmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Theme: System
|
||||
PopupMenuItem<String>(
|
||||
value: 'theme_system',
|
||||
height: 40,
|
||||
child: Semantics(
|
||||
identifier: ProfileSemantics.themeSystem,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.brightness_auto,
|
||||
size: 18,
|
||||
color: currentTheme == ThemeSetting.system
|
||||
? colorScheme.primary
|
||||
: null,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
'System',
|
||||
style: currentTheme == ThemeSetting.system
|
||||
? TextStyle(color: colorScheme.primary)
|
||||
: null,
|
||||
),
|
||||
const Spacer(),
|
||||
if (currentTheme == ThemeSetting.system)
|
||||
Icon(Icons.check, size: 16, color: colorScheme.primary),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Theme: Light
|
||||
PopupMenuItem<String>(
|
||||
value: 'theme_light',
|
||||
height: 40,
|
||||
child: Semantics(
|
||||
identifier: ProfileSemantics.themeLight,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.light_mode,
|
||||
size: 18,
|
||||
color: currentTheme == ThemeSetting.light
|
||||
? colorScheme.primary
|
||||
: null,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
'Light',
|
||||
style: currentTheme == ThemeSetting.light
|
||||
? TextStyle(color: colorScheme.primary)
|
||||
: null,
|
||||
),
|
||||
const Spacer(),
|
||||
if (currentTheme == ThemeSetting.light)
|
||||
Icon(Icons.check, size: 16, color: colorScheme.primary),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Theme: Dark
|
||||
PopupMenuItem<String>(
|
||||
value: 'theme_dark',
|
||||
height: 40,
|
||||
child: Semantics(
|
||||
identifier: ProfileSemantics.themeDark,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.dark_mode,
|
||||
size: 18,
|
||||
color: currentTheme == ThemeSetting.dark
|
||||
? colorScheme.primary
|
||||
: null,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
'Dark',
|
||||
style: currentTheme == ThemeSetting.dark
|
||||
? TextStyle(color: colorScheme.primary)
|
||||
: null,
|
||||
),
|
||||
const Spacer(),
|
||||
if (currentTheme == ThemeSetting.dark)
|
||||
Icon(Icons.check, size: 16, color: colorScheme.primary),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const PopupMenuDivider(),
|
||||
|
||||
// Logout (only if authenticated)
|
||||
if (auth.isAuthenticated)
|
||||
PopupMenuItem<String>(
|
||||
value: 'logout',
|
||||
child: Semantics(
|
||||
identifier: ProfileSemantics.logout,
|
||||
child: const Row(
|
||||
children: [
|
||||
Icon(Icons.logout, size: 20),
|
||||
SizedBox(width: 12),
|
||||
Text('Logout'),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
onSelected: (value) {
|
||||
switch (value) {
|
||||
case 'settings':
|
||||
context.go(AppRoutes.settings);
|
||||
case 'theme_system':
|
||||
_updateTheme(ref, ThemeSetting.system);
|
||||
case 'theme_light':
|
||||
_updateTheme(ref, ThemeSetting.light);
|
||||
case 'theme_dark':
|
||||
_updateTheme(ref, ThemeSetting.dark);
|
||||
case 'logout':
|
||||
ref.read(authProvider.notifier).signOut();
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
loading: () => const CircleAvatar(
|
||||
radius: 18,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:tatlock_ui/core/semantics/semantic_ids.dart';
|
||||
|
||||
import 'profile_dropdown.dart';
|
||||
|
||||
@@ -127,17 +128,23 @@ class TopHeaderBar extends StatelessWidget {
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
child: Tooltip(
|
||||
message: room.label,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
isSelected ? room.selectedIcon : room.icon,
|
||||
color: isSelected ? colorScheme.primary : colorScheme.onSurface,
|
||||
),
|
||||
onPressed: () => onRoomSelected(index),
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor:
|
||||
isSelected ? colorScheme.primaryContainer : null,
|
||||
child: Semantics(
|
||||
identifier: RoomTabSemantics.forIndex(index),
|
||||
label: room.label,
|
||||
button: true,
|
||||
selected: isSelected,
|
||||
child: Tooltip(
|
||||
message: room.label,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
isSelected ? room.selectedIcon : room.icon,
|
||||
color: isSelected ? colorScheme.primary : colorScheme.onSurface,
|
||||
),
|
||||
onPressed: () => onRoomSelected(index),
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor:
|
||||
isSelected ? colorScheme.primaryContainer : null,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user