kasy-cli 1.25.0 → 1.27.0

package/templates/firebase/lib/core/bottom_menu/bottom_menu.dart

@@ -6,6 +6,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/kasy_sidebar.dart';
 import 'package:kasy_kit/core/bottom_menu/bottom_router.dart';
 import 'package:kasy_kit/core/bottom_menu/kasy_bottom_bar_factory.dart';
+import 'package:kasy_kit/core/bottom_menu/web_content_wrapper.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
 import 'package:kasy_kit/core/states/logout_action.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
@@ -220,17 +221,112 @@ class _FocusableSidebarState extends State<_FocusableSidebar> {
     super.dispose();
   }
 
+  // "Skip to content" moves the primary focus into the routed content, so the
+  // next Tab steps to the first real control there instead of the sidebar.
+  void _skipToContent() => kasyContentFocusTarget?.requestFocus();
+
   @override
   Widget build(BuildContext context) {
+    // Reading-order group (NOT an ordered policy): this is the exact structure
+    // that made the anchor hold the initial focus. The anchor sits at (0,0) and
+    // is skipped by Tab; the skip link is positioned at the very top, so reading
+    // order makes it the FIRST Tab stop, then the sidebar items, then (via the
+    // scaffold) the header and content. Swapping in an OrderedTraversalPolicy
+    // here broke the anchor, so we keep reading order and rely on position.
     return FocusTraversalGroup(
-      // The anchor is a zero-size sibling so it never affects the sidebar's
-      // layout; it exists only to hold the initial keyboard focus (see above).
       child: Stack(
+        clipBehavior: Clip.none,
         children: [
           widget.child,
+          // Zero-size sibling; only holds the initial keyboard focus.
           Focus(focusNode: _anchor, child: const SizedBox.shrink()),
+          // Topmost on screen, so reading order makes it the first Tab stop.
+          Positioned(
+            top: KasySpacing.sm,
+            left: KasySpacing.sm,
+            child: _SkipToContentLink(onSkip: _skipToContent),
+          ),
         ],
       ),
     );
   }
 }
+
+/// The "skip to content" link (WCAG 2.4.1 "Bypass Blocks"). It is the first Tab
+/// stop on every screen: pressing Tab once reveals it above the sidebar, Enter
+/// jumps focus into the content, and pressing Tab again moves on to the sidebar.
+/// It only paints while focused via the keyboard, so pointer/touch users never
+/// see it. Mirrors the pattern used by Stripe, GitHub, etc.
+class _SkipToContentLink extends StatefulWidget {
+  final VoidCallback onSkip;
+
+  const _SkipToContentLink({required this.onSkip});
+
+  @override
+  State<_SkipToContentLink> createState() => _SkipToContentLinkState();
+}
+
+class _SkipToContentLinkState extends State<_SkipToContentLink> {
+  bool _show = false;
+
+  static const Map<ShortcutActivator, Intent> _shortcuts =
+      <ShortcutActivator, Intent>{
+    SingleActivator(LogicalKeyboardKey.enter): ActivateIntent(),
+    SingleActivator(LogicalKeyboardKey.numpadEnter): ActivateIntent(),
+    SingleActivator(LogicalKeyboardKey.space): ActivateIntent(),
+  };
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    return FocusableActionDetector(
+      shortcuts: _shortcuts,
+      actions: <Type, Action<Intent>>{
+        ActivateIntent: CallbackAction<ActivateIntent>(
+          onInvoke: (_) {
+            widget.onSkip();
+            return null;
+          },
+        ),
+      },
+      onShowFocusHighlight: (bool show) {
+        if (mounted && show != _show) setState(() => _show = show);
+      },
+      child: IgnorePointer(
+        ignoring: !_show,
+        child: AnimatedOpacity(
+          opacity: _show ? 1 : 0,
+          duration: const Duration(milliseconds: 120),
+          child: GestureDetector(
+            onTap: widget.onSkip,
+            child: Container(
+              padding: const EdgeInsets.symmetric(
+                horizontal: KasySpacing.md,
+                vertical: KasySpacing.sm,
+              ),
+              decoration: BoxDecoration(
+                color: c.surface,
+                borderRadius: BorderRadius.circular(KasyRadius.md),
+                border: Border.all(color: c.primary, width: 1.5),
+                boxShadow: <BoxShadow>[
+                  BoxShadow(
+                    color: c.onSurface.withValues(alpha: 0.18),
+                    blurRadius: 16,
+                    offset: const Offset(0, 4),
+                  ),
+                ],
+              ),
+              child: Text(
+                context.t.navigation.skip_to_content,
+                style: context.textTheme.bodyMedium?.copyWith(
+                  color: c.onSurface,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

package/templates/firebase/lib/core/bottom_menu/web_content_wrapper.dart

@@ -3,19 +3,57 @@ import 'package:kasy_kit/components/kasy_web_header.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 
+/// Focus target of the currently mounted content, exposed to the "skip to
+/// content" link (which lives in the shell, outside the routed page).
+///
+/// Each [WebContentWrapper] owns its OWN [FocusNode] and publishes it here on
+/// mount, so during a route transition (where the old and new page briefly
+/// coexist) there is never a single node attached to two widgets. The link
+/// always jumps to the most recently mounted page.
+FocusNode? kasyContentFocusTarget;
+
 /// On desktop (≥ [DeviceType.large]) this puts the [KasyWebHeader] at the top of
 /// the content area, above the routed page. On phone/tablet it is transparent
 /// (returns the page untouched) — there the page keeps its own [KasyAppBar].
 ///
 /// Wrap each routed page with this in the bottom router so the header is present
 /// across navigation without touching individual pages.
-class WebContentWrapper extends StatelessWidget {
+class WebContentWrapper extends StatefulWidget {
   final Widget child;
 
   const WebContentWrapper({super.key, required this.child});
 
+  @override
+  State<WebContentWrapper> createState() => _WebContentWrapperState();
+}
+
+class _WebContentWrapperState extends State<WebContentWrapper> {
+  // skipTraversal: the "skip to content" link focuses this node directly, but it
+  // stays out of the Tab order (like a tabindex="-1" skip target on the web) so
+  // the next Tab lands on the first real control inside the content.
+  final FocusNode _contentFocus = FocusNode(
+    debugLabel: 'skipToContentTarget',
+    skipTraversal: true,
+  );
+
+  @override
+  void initState() {
+    super.initState();
+    kasyContentFocusTarget = _contentFocus;
+  }
+
+  @override
+  void dispose() {
+    if (kasyContentFocusTarget == _contentFocus) {
+      kasyContentFocusTarget = null;
+    }
+    _contentFocus.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final Widget child = widget.child;
     final bool isDesktop =
         MediaQuery.sizeOf(context).width >= DeviceType.large.breakpoint;
     if (!isDesktop) return child;
@@ -44,7 +82,12 @@ class WebContentWrapper extends StatelessWidget {
           Expanded(
             child: FocusTraversalOrder(
               order: const NumericFocusOrder(3),
-              child: FocusTraversalGroup(child: child),
+              child: FocusTraversalGroup(
+                // Focus target for "skip to content": focusing it moves the
+                // primary focus into the content; the next Tab then steps to the
+                // first real control here.
+                child: Focus(focusNode: _contentFocus, child: child),
+              ),
             ),
           ),
         ],

package/templates/firebase/lib/features/ai_chat/ui/widgets/ai_conversation_tile.dart

@@ -5,6 +5,7 @@ import 'package:intl/intl.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/features/ai_chat/api/ai_chat_conversation_entity.dart';
 import 'package:kasy_kit/features/ai_chat/ui/widgets/ai_chat_avatars.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
@@ -104,10 +105,14 @@ class _AiConversationTileState extends ConsumerState<AiConversationTile> {
       button: true,
       selected: widget.selected,
       label: title,
-      child: GestureDetector(
-        behavior: HitTestBehavior.opaque,
-        onTap: widget.onTap,
-        child: tile,
+      child: KasyFocusRing(
+        onActivate: widget.onTap,
+        borderRadius: BorderRadius.circular(16),
+        child: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: widget.onTap,
+          child: tile,
+        ),
       ),
     );
 

package/templates/firebase/lib/features/feedbacks/ui/widgets/add_feature_button.dart

@@ -20,6 +20,7 @@ class AddFeatureButton extends StatelessWidget {
       onTap: onPressed,
       borderRadius: KasyRadius.mdBorderRadius,
       pressColor: context.colors.onPrimary,
+      focusable: true,
       child: Container(
         padding: const EdgeInsets.symmetric(
           horizontal: KasySpacing.lg,

package/templates/firebase/lib/features/feedbacks/ui/widgets/feature_card.dart

@@ -191,6 +191,8 @@ class _VoteCardState extends State<VoteCard>
       borderRadius: KasyRadius.smBorderRadius,
       pressColor: widget.textColor,
       hapticEnabled: false,
+      focusable: true,
+      focusGapColor: context.colors.surface,
       child: AnimatedContainer(
         duration: colorDuration,
         curve: Curves.easeOut,

package/templates/firebase/lib/features/home/home_feed.dart

@@ -199,22 +199,36 @@ class _FilterRow extends StatelessWidget {
 
   const _FilterRow({required this.selected, required this.onSelect});
 
+  // Breathing room around the row so the keyboard focus ring (which paints a
+  // few px outside the card) is never clipped by the horizontal list's edges.
+  static const double _ringInset = 8;
+
   @override
   Widget build(BuildContext context) {
     const List<HomeCategory> all = HomeCategory.values;
 
+    // Smaller, denser cards on phones; full size on tablet/desktop.
+    final bool isMobile = MediaQuery.sizeOf(context).width < 768;
+    final double thumbSize = isMobile ? 56 : 79;
+    final double cardWidth = isMobile ? 232 : 302;
+    final double cardHeight = thumbSize + KasySpacing.md * 2;
+
     return SizedBox(
-      height: 111,
+      height: cardHeight + _ringInset * 2,
       child: ListView.separated(
         scrollDirection: Axis.horizontal,
-        padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.md,
+          vertical: _ringInset,
+        ),
         itemCount: all.length,
         separatorBuilder: (_, _) => const SizedBox(width: KasySpacing.md),
         itemBuilder: (BuildContext context, int i) => SizedBox(
-          width: 302,
+          width: cardWidth,
           child: _FilterCard(
             category: all[i],
             selected: all[i] == selected,
+            thumbSize: thumbSize,
             onTap: () => onSelect(all[i]),
           ),
         ),
@@ -226,11 +240,13 @@ class _FilterRow extends StatelessWidget {
 class _FilterCard extends StatelessWidget {
   final HomeCategory category;
   final bool selected;
+  final double thumbSize;
   final VoidCallback onTap;
 
   const _FilterCard({
     required this.category,
     required this.selected,
+    required this.thumbSize,
     required this.onTap,
   });
 
@@ -250,8 +266,8 @@ class _FilterCard extends StatelessWidget {
           ClipRRect(
             borderRadius: BorderRadius.circular(KasyRadius.lg),
             child: SizedBox(
-              width: 79,
-              height: 79,
+              width: thumbSize,
+              height: thumbSize,
               child: KasyNetworkImage(url: _thumbUrl(data.thumbnailId)),
             ),
           ),

package/templates/firebase/lib/features/home/home_image_grid.dart

@@ -6,6 +6,7 @@ import 'package:kasy_kit/components/kasy_image_viewer.dart';
 import 'package:kasy_kit/components/kasy_skeleton.dart';
 import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 /// A single image shown in the masonry feed.
 class HomePhoto {
@@ -22,7 +23,11 @@ class HomePhoto {
 /// Network image with a synced shimmer skeleton while loading and a graceful
 /// fallback on error. Adapts to light/dark via [KasySkeleton]'s own palette.
 class KasyNetworkImage extends StatelessWidget {
-  const KasyNetworkImage({super.key, required this.url, this.fit = BoxFit.cover});
+  const KasyNetworkImage({
+    super.key,
+    required this.url,
+    this.fit = BoxFit.cover,
+  });
 
   final String url;
   final BoxFit fit;
@@ -33,24 +38,18 @@ class KasyNetworkImage extends StatelessWidget {
       url,
       fit: fit,
       gaplessPlayback: true,
-      loadingBuilder: (
-        BuildContext context,
-        Widget child,
-        ImageChunkEvent? progress,
-      ) {
-        if (progress == null) return child;
-        return const _ImageSkeleton();
-      },
-      errorBuilder: (
-        BuildContext context,
-        Object error,
-        StackTrace? stackTrace,
-      ) {
-        return ColoredBox(
-          color: context.colors.surfaceNeutralSoft,
-          child: Icon(KasyIcons.gallery, color: context.colors.muted),
-        );
-      },
+      loadingBuilder:
+          (BuildContext context, Widget child, ImageChunkEvent? progress) {
+            if (progress == null) return child;
+            return const _ImageSkeleton();
+          },
+      errorBuilder:
+          (BuildContext context, Object error, StackTrace? stackTrace) {
+            return ColoredBox(
+              color: context.colors.surfaceNeutralSoft,
+              child: Icon(KasyIcons.gallery, color: context.colors.muted),
+            );
+          },
     );
   }
 }
@@ -80,7 +79,16 @@ class HomeImageGrid extends StatelessWidget {
 
   static const double _gap = KasySpacing.smd;
   static const List<double> _ratios = <double>[
-    0.72, 1.0, 0.8, 1.32, 0.75, 1.0, 0.7, 1.25, 0.85, 1.4,
+    0.72,
+    1.0,
+    0.8,
+    1.32,
+    0.75,
+    1.0,
+    0.7,
+    1.25,
+    0.85,
+    1.4,
   ];
 
   int _columnsFor(double width) {
@@ -97,8 +105,10 @@ class HomeImageGrid extends StatelessWidget {
         final int columns = _columnsFor(width);
         final double columnWidth = (width - _gap * (columns - 1)) / columns;
 
-        final List<List<Widget>> buckets =
-            List<List<Widget>>.generate(columns, (_) => <Widget>[]);
+        final List<List<Widget>> buckets = List<List<Widget>>.generate(
+          columns,
+          (_) => <Widget>[],
+        );
         final List<double> heights = List<double>.filled(columns, 0);
 
         for (int i = 0; i < photos.length; i++) {
@@ -110,8 +120,9 @@ class HomeImageGrid extends StatelessWidget {
           if (buckets[shortest].isNotEmpty) {
             buckets[shortest].add(const SizedBox(height: _gap));
           }
-          buckets[shortest]
-              .add(_PhotoTile(photo: photos[i], aspectRatio: ratio));
+          buckets[shortest].add(
+            _PhotoTile(photo: photos[i], aspectRatio: ratio),
+          );
           heights[shortest] += columnWidth / ratio + _gap;
         }
 
@@ -170,12 +181,16 @@ class _PhotoTileState extends State<_PhotoTile> {
             // Tapping the photo opens the full-screen viewer; the Hero gives a
             // smooth zoom into and out of it.
             Positioned.fill(
-              child: GestureDetector(
-                onTap: _openViewer,
-                behavior: HitTestBehavior.opaque,
-                child: Hero(
-                  tag: photo.id,
-                  child: KasyNetworkImage(url: photo.url),
+              child: KasyFocusRing(
+                onActivate: _openViewer,
+                borderRadius: BorderRadius.circular(KasyRadius.xl),
+                child: GestureDetector(
+                  onTap: _openViewer,
+                  behavior: HitTestBehavior.opaque,
+                  child: Hero(
+                    tag: photo.id,
+                    child: KasyNetworkImage(url: photo.url),
+                  ),
                 ),
               ),
             ),
@@ -291,13 +306,17 @@ class _LikeButtonState extends State<_LikeButton>
     );
     _scale = TweenSequence<double>(<TweenSequenceItem<double>>[
       TweenSequenceItem<double>(
-        tween: Tween<double>(begin: 1.0, end: 1.35)
-            .chain(CurveTween(curve: Curves.easeOut)),
+        tween: Tween<double>(
+          begin: 1.0,
+          end: 1.35,
+        ).chain(CurveTween(curve: Curves.easeOut)),
         weight: 40,
       ),
       TweenSequenceItem<double>(
-        tween: Tween<double>(begin: 1.35, end: 1.0)
-            .chain(CurveTween(curve: Curves.elasticOut)),
+        tween: Tween<double>(
+          begin: 1.35,
+          end: 1.0,
+        ).chain(CurveTween(curve: Curves.elasticOut)),
         weight: 60,
       ),
     ]).animate(_controller);
@@ -321,30 +340,36 @@ class _LikeButtonState extends State<_LikeButton>
   @override
   Widget build(BuildContext context) {
     final bool dark = context.isDark;
-    final Color heart =
-        widget.liked ? context.colors.danger : context.colors.primary;
-
-    return GestureDetector(
-      onTap: widget.onTap,
-      behavior: HitTestBehavior.opaque,
-      child: ClipOval(
-        child: BackdropFilter(
-          filter: ui.ImageFilter.blur(sigmaX: 8, sigmaY: 8),
-          child: Container(
-            width: 36,
-            height: 36,
-            alignment: Alignment.center,
-            decoration: BoxDecoration(
-              color: context.colors.surface
-                  .withValues(alpha: dark ? 0.5 : 0.7),
-              shape: BoxShape.circle,
-            ),
-            child: ScaleTransition(
-              scale: _scale,
-              child: Icon(
-                widget.liked ? KasyIcons.favoriteFilled : KasyIcons.favorite,
-                size: 18,
-                color: heart,
+    final Color heart = widget.liked
+        ? context.colors.danger
+        : context.colors.primary;
+
+    return KasyFocusRing(
+      onActivate: widget.onTap,
+      borderRadius: BorderRadius.circular(999),
+      child: GestureDetector(
+        onTap: widget.onTap,
+        behavior: HitTestBehavior.opaque,
+        child: ClipOval(
+          child: BackdropFilter(
+            filter: ui.ImageFilter.blur(sigmaX: 8, sigmaY: 8),
+            child: Container(
+              width: 36,
+              height: 36,
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                color: context.colors.surface.withValues(
+                  alpha: dark ? 0.5 : 0.7,
+                ),
+                shape: BoxShape.circle,
+              ),
+              child: ScaleTransition(
+                scale: _scale,
+                child: Icon(
+                  widget.liked ? KasyIcons.favoriteFilled : KasyIcons.favorite,
+                  size: 18,
+                  color: heart,
+                ),
               ),
             ),
           ),