Add a FocusTraversalGroup

lib/ui/screens/editorial/editorial_screen.dart

@@ -102,7 +102,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
               /// Scrolling content - Includes an invisible gap at the top, and then scrolls over the illustration
               TopCenter(
                 child: SizedBox(
-                  //width: $styles.sizes.maxContentWidth1,
+                  child: FocusTraversalGroup(
                     child: CustomScrollView(
                       primary: false,
                       controller: _scroller,
@@ -153,6 +153,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
                     ),
                   ),
                 ),
+              ),
 
               /// Home Btn
               AnimatedBuilder(

lib/ui/screens/wonder_details/wonder_details_tab_menu.dart

@@ -4,11 +4,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
   static double bottomPadding = 0;
   static double buttonInset = 12;
 
-  const WonderDetailsTabMenu(
+  const WonderDetailsTabMenu({Key? key, required this.tabController, this.showBg = false, required this.wonderType})
-      {Key? key,
-      required this.tabController,
-      this.showBg = false,
-      required this.wonderType})
       : super(key: key);
 
   final TabController tabController;
@@ -36,10 +32,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
         ),
         // Buttons
         Padding(
-          padding: EdgeInsets.only(
+          padding: EdgeInsets.only(left: $styles.insets.sm, right: $styles.insets.xxs, bottom: bottomPadding),
-              left: $styles.insets.sm,
-              right: $styles.insets.xxs,
-              bottom: bottomPadding),
           // TabButtons are a Stack with a row of icon buttons, and an illustrated home button sitting on top.
           // The home buttons shows / hides itself based on `showHomeBtn`
           // The row contains an animated placeholder gap which makes room for the icon as it transitions in.
@@ -48,6 +41,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
               children: [
                 // Main tab btns + animated gap
                 Center(
+                  child: FocusTraversalGroup(
                     child: Row(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       mainAxisSize: MainAxisSize.min,
@@ -59,24 +53,17 @@ class WonderDetailsTabMenu extends StatelessWidget {
                           borderSize: showBg ? 6 : 2,
                         ),
                         _TabBtn(0, tabController,
-                          iconImg: 'editorial',
+                            iconImg: 'editorial', label: $strings.wonderDetailsTabLabelInformation, color: iconColor),
-                          label: $strings.wonderDetailsTabLabelInformation,
-                          color: iconColor),
                         _TabBtn(1, tabController,
-                          iconImg: 'photos',
+                            iconImg: 'photos', label: $strings.wonderDetailsTabLabelImages, color: iconColor),
-                          label: $strings.wonderDetailsTabLabelImages,
-                          color: iconColor),
                         _TabBtn(2, tabController,
-                          iconImg: 'artifacts',
+                            iconImg: 'artifacts', label: $strings.wonderDetailsTabLabelArtifacts, color: iconColor),
-                          label: $strings.wonderDetailsTabLabelArtifacts,
-                          color: iconColor),
                         _TabBtn(3, tabController,
-                          iconImg: 'timeline',
+                            iconImg: 'timeline', label: $strings.wonderDetailsTabLabelEvents, color: iconColor),
-                          label: $strings.wonderDetailsTabLabelEvents,
-                          color: iconColor),
                       ],
                     ),
                   ),
+                ),
               ],
             ),
           ),
@@ -87,11 +74,7 @@ class WonderDetailsTabMenu extends StatelessWidget {
 }
 
 class _WonderHomeBtn extends StatelessWidget {
-  const _WonderHomeBtn(
+  const _WonderHomeBtn({Key? key, required this.size, required this.wonderType, required this.borderSize})
-      {Key? key,
-      required this.size,
-      required this.wonderType,
-      required this.borderSize})
       : super(key: key);
 
   final double size;
@@ -113,8 +96,7 @@ class _WonderHomeBtn extends StatelessWidget {
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(99),
           color: wonderType.fgColor,
-          image: DecorationImage(
+          image: DecorationImage(image: AssetImage(wonderType.homeBtn), fit: BoxFit.fill),
-              image: AssetImage(wonderType.homeBtn), fit: BoxFit.fill),
         ),
       ),
     );
@@ -143,12 +125,9 @@ class _TabBtn extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     bool selected = tabController.index == index;
-    final MaterialLocalizations localizations =
+    final MaterialLocalizations localizations = MaterialLocalizations.of(context);
-        MaterialLocalizations.of(context);
+    final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
-    final iconImgPath =
+    String tabLabel = localizations.tabLabel(tabIndex: index + 1, tabCount: tabController.length);
-        '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
-    String tabLabel = localizations.tabLabel(
-        tabIndex: index + 1, tabCount: tabController.length);
     tabLabel = '$label: $tabLabel';
     final double btnWidth = (context.widthPx / 6).clamp(_minWidth, _maxWidth);
     return MergeSemantics(
@@ -157,15 +136,12 @@ class _TabBtn extends StatelessWidget {
         label: tabLabel,
         child: ExcludeSemantics(
           child: AppBtn.basic(
-            padding: EdgeInsets.only(
+            padding: EdgeInsets.only(top: $styles.insets.md + $styles.insets.xs, bottom: $styles.insets.sm),
-                top: $styles.insets.md + $styles.insets.xs,
-                bottom: $styles.insets.sm),
             onPressed: () => tabController.index = index,
             semanticLabel: label,
             minimumSize: Size(btnWidth, 0),
             // Image icon
-            child: Image.asset(iconImgPath,
+            child: Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color),
-                height: 32, width: 32, color: selected ? null : color),
           ),
         ),
       ),

lib/ui/screens/wonder_events/widgets/_events_list.dart

@@ -32,7 +32,7 @@ class _EventsListState extends State<_EventsList> {
 
   @override
   Widget build(BuildContext context) {
-    return widget.blurOnScroll ? _buildScrollingListWithBlur() : _buildScrollingList();
+    return FocusTraversalGroup(child: widget.blurOnScroll ? _buildScrollingListWithBlur() : _buildScrollingList());
   }
 
   /// The actual content of the scrolling list