Unify shortcuts on desktop/web, remove arrow-press for focus traversal from desktop.

Add focusNode support for btns

lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:flutter_native_splash/flutter_native_splash.dart';
@@ -9,6 +10,7 @@ import 'package:wonders/logic/artifact_api_service.dart';
 import 'package:wonders/logic/timeline_logic.dart';
 import 'package:wonders/logic/unsplash_logic.dart';
 import 'package:wonders/logic/wonders_logic.dart';
+import 'package:wonders/ui/common/app_shortcuts.dart';
 
 void main() async {
   WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
@@ -36,6 +38,7 @@ class WondersApp extends StatelessWidget with GetItMixin {
       locale: locale == null ? null : Locale(locale),
       debugShowCheckedModeBanner: false,
       routerDelegate: appRouter.routerDelegate,
+      shortcuts: AppShortcuts.defaults,
       theme: ThemeData(fontFamily: $styles.text.body.fontFamily, useMaterial3: true),
       localizationsDelegates: const [
         AppLocalizations.delegate,

lib/ui/common/app_shortcuts.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/foundation.dart';
+import 'package:wonders/common_libs.dart';
+
+class AppShortcuts {
+  static final Map<ShortcutActivator, Intent> _defaultWebAndDesktopShortcuts = <ShortcutActivator, Intent>{
+    // Activation
+    if (kIsWeb) ...{
+      // On the web, enter activates buttons, but not other controls.
+      SingleActivator(LogicalKeyboardKey.enter): ButtonActivateIntent(),
+      SingleActivator(LogicalKeyboardKey.numpadEnter): ButtonActivateIntent(),
+    } else ...{
+      SingleActivator(LogicalKeyboardKey.enter): ActivateIntent(),
+      SingleActivator(LogicalKeyboardKey.numpadEnter): ActivateIntent(),
+      SingleActivator(LogicalKeyboardKey.space): ActivateIntent(),
+      SingleActivator(LogicalKeyboardKey.gameButtonA): ActivateIntent(),
+    },
+
+    // Dismissal
+    SingleActivator(LogicalKeyboardKey.escape): DismissIntent(),
+
+    // Keyboard traversal.
+    SingleActivator(LogicalKeyboardKey.tab): NextFocusIntent(),
+    SingleActivator(LogicalKeyboardKey.tab, shift: true): PreviousFocusIntent(),
+
+    // Scrolling
+    SingleActivator(LogicalKeyboardKey.arrowUp): ScrollIntent(direction: AxisDirection.up),
+    SingleActivator(LogicalKeyboardKey.arrowDown): ScrollIntent(direction: AxisDirection.down),
+    SingleActivator(LogicalKeyboardKey.arrowLeft): ScrollIntent(direction: AxisDirection.left),
+    SingleActivator(LogicalKeyboardKey.arrowRight): ScrollIntent(direction: AxisDirection.right),
+    SingleActivator(LogicalKeyboardKey.pageUp):
+        ScrollIntent(direction: AxisDirection.up, type: ScrollIncrementType.page),
+    SingleActivator(LogicalKeyboardKey.pageDown):
+        ScrollIntent(direction: AxisDirection.down, type: ScrollIncrementType.page),
+  };
+
+  static Map<ShortcutActivator, Intent>? get defaults {
+    switch (defaultTargetPlatform) {
+      // fall back to default shortcuts for ios and android
+      case TargetPlatform.iOS:
+      case TargetPlatform.android:
+        return null;
+      // unify shortcuts for desktop/web
+      default:
+        return _defaultWebAndDesktopShortcuts;
+    }
+  }
+}

lib/ui/common/controls/buttons.dart

@@ -22,6 +22,8 @@ class AppBtn extends StatelessWidget {
     this.minimumSize,
     this.bgColor,
     this.border,
+    this.focusNode,
+    this.onFocusChanged,
   })  : _builder = null,
         super(key: key);
 
@@ -36,6 +38,8 @@ class AppBtn extends StatelessWidget {
     this.minimumSize,
     this.bgColor,
     this.border,
+    this.focusNode,
+    this.onFocusChanged,
     String? semanticLabel,
     String? text,
     AppIcons? icon,
@@ -76,6 +80,8 @@ class AppBtn extends StatelessWidget {
     this.isSecondary = false,
     this.circular = false,
     this.minimumSize,
+    this.focusNode,
+    this.onFocusChanged,
   })  : expand = false,
         bgColor = Colors.transparent,
         border = null,
@@ -86,6 +92,8 @@ class AppBtn extends StatelessWidget {
   final VoidCallback? onPressed;
   late final String semanticLabel;
   final bool enableFeedback;
+  final FocusNode? focusNode;
+  final void Function(bool hasFocus)? onFocusChanged;
 
   // content:
   late final Widget? child;
@@ -129,15 +137,20 @@ class AppBtn extends StatelessWidget {
     );
 
     Widget button = _CustomFocusBuilder(
+      focusNode: focusNode,
+      onFocusChanged: onFocusChanged,
       builder: (context, focus) => Stack(
         children: [
-          TextButton(
+          Opacity(
-            onPressed: onPressed,
+            opacity: onPressed == null ? 0.5 : 1.0,
-            style: style,
+            child: TextButton(
-            focusNode: focus,
+              onPressed: onPressed,
-            child: DefaultTextStyle(
+              style: style,
-              style: DefaultTextStyle.of(context).style.copyWith(color: textColor),
+              focusNode: focus,
-              child: content,
+              child: DefaultTextStyle(
+                style: DefaultTextStyle.of(context).style.copyWith(color: textColor),
+                child: content,
+              ),
             ),
           ),
           if (focus.hasFocus)
@@ -154,7 +167,7 @@ class AppBtn extends StatelessWidget {
     );
 
     // add press effect:
-    if (pressEffect) button = _ButtonPressEffect(button);
+    if (pressEffect && onPressed != null) button = _ButtonPressEffect(button);
 
     // add semantics?
     if (semanticLabel.isEmpty) return button;
@@ -199,15 +212,28 @@ class _ButtonPressEffectState extends State<_ButtonPressEffect> {
 }
 
 class _CustomFocusBuilder extends StatefulWidget {
-  const _CustomFocusBuilder({Key? key, required this.builder}) : super(key: key);
+  const _CustomFocusBuilder({Key? key, required this.builder, this.focusNode, this.onFocusChanged}) : super(key: key);
   final Widget Function(BuildContext context, FocusNode focus) builder;
-
+  final void Function(bool hasFocus)? onFocusChanged;
+  final FocusNode? focusNode;
   @override
   State<_CustomFocusBuilder> createState() => _CustomFocusBuilderState();
 }
 
 class _CustomFocusBuilderState extends State<_CustomFocusBuilder> {
-  late final _focusNode = FocusNode()..addListener(() => setState(() {}));
+  late final FocusNode _focusNode;
+
+  @override
+  void initState() {
+    _focusNode = widget.focusNode ?? FocusNode();
+    _focusNode.addListener(_handleFocusChanged);
+    super.initState();
+  }
+
+  void _handleFocusChanged() {
+    widget.onFocusChanged?.call(_focusNode.hasFocus);
+    setState(() {});
+  }
 
   @override
   Widget build(BuildContext context) {

lib/ui/common/controls/circle_buttons.dart

@@ -14,7 +14,7 @@ class CircleBtn extends StatelessWidget {
 
   static double defaultSize = 48;
 
-  final VoidCallback onPressed;
+  final VoidCallback? onPressed;
   final Color? bgColor;
   final BorderSide? border;
   final Widget child;
@@ -54,7 +54,7 @@ class CircleIconBtn extends StatelessWidget {
   static double defaultSize = 28;
 
   final AppIcons icon;
-  final VoidCallback onPressed;
+  final VoidCallback? onPressed;
   final BorderSide? border;
   final Color? bgColor;
   final Color? color;
@@ -103,6 +103,7 @@ class BackBtn extends StatelessWidget {
             semanticLabel: $strings.circleButtonsSemanticClose,
             bgColor: bgColor,
             iconColor: iconColor);
+
   @override
   Widget build(BuildContext context) {
     return CircleIconBtn(