Merge branch 'accessability-pass' into accessibility-pass-animationtimesbeta

lib/l10n/app_en.arb

@@ -32,8 +32,8 @@
 	"appModalsButtonOk": "Ok",
 	"appModalsButtonCancel": "Cancel",
 	"appPageDefaultTitlePage": "page",
-	"appPageSemanticSwipe": "{pageTitle} {count} of {total}.",
+	"appPageSemanticSwipe": "{pageTitle} {current} of {total}.",
-	"@appPageSemanticSwipe": {"placeholders": {"pageTitle": {}, "total": {}, "count": {}}},
+	"@appPageSemanticSwipe": {"placeholders": {"pageTitle": {}, "current": {}, "total": {}}},
 	"artifactsTitleArtifacts": "ARTIFACTS",
 	"semanticsPrevious": "Previous {title}",
 	"@semanticsPrevious": {"placeholders": {"title": {}}},

lib/l10n/app_zh.arb

@@ -25,7 +25,7 @@
 	"appModalsButtonOk": "确定",
 	"appModalsButtonCancel": "取消",
 	"appPageDefaultTitlePage": "页",
-	"appPageSemanticSwipe": "{pageTitle} {total} 之 {count}.",
+	"appPageSemanticSwipe": "{pageTitle} {total} 之 {current}.",
 	"artifactsTitleArtifacts": "文物",
 	"semanticsPrevious": "之前的文物{title}",
 	"semanticsNext": "下一个文物{title}",

lib/ui/common/controls/buttons.dart

@@ -1,5 +1,6 @@
 import 'package:wonders/common_libs.dart';
 import 'package:wonders/ui/common/app_icons.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 
 /// Shared methods across button types
 Widget _buildIcon(BuildContext context, AppIcons icon, {required bool isSecondary, required double? size}) =>
@@ -154,7 +155,7 @@ class AppBtn extends StatelessWidget {
           ),
           if (focus.hasFocus)
             Positioned.fill(
-              child: IgnorePointer(
+              child: IgnorePointerWithSemantics(
                 child: Container(
                     decoration: BoxDecoration(
                         borderRadius: BorderRadius.circular($styles.corners.md),

lib/ui/common/controls/scroll_decorator.dart

@@ -1,4 +1,5 @@
 import 'package:wonders/common_libs.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 
 /// Easily add visual decorations to a scrolling widget based on the state of its controller.
 class ScrollDecorator extends StatefulWidget {
@@ -64,7 +65,7 @@ class ScrollDecorator extends StatefulWidget {
     bgBuilder = null;
     fgBuilder = (controller) {
       final double ratio = controller.hasClients ? min(1, controller.position.extentBefore / 60) : 0;
-      return IgnorePointer(
+      return IgnorePointerWithSemantics(
         child: Container(
           height: 24,
           decoration: BoxDecoration(

lib/ui/common/gradient_container.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 
 class GradientContainer extends StatelessWidget {
   const GradientContainer(this.colors, this.stops,
@@ -23,7 +24,8 @@ class GradientContainer extends StatelessWidget {
   final BorderRadius? borderRadius;
 
   @override
-  Widget build(BuildContext context) => IgnorePointer(
+  Widget build(BuildContext context) => ExcludeSemantics(
+    child: IgnorePointerWithSemantics(
       child: Container(
         width: width,
         height: height,
@@ -40,6 +42,7 @@ class GradientContainer extends StatelessWidget {
         ),
         child: child,
       ),
+    )
   );
 }
 

lib/ui/common/ignore_pointer.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/rendering.dart';
+import 'package:wonders/common_libs.dart';
+
+class IgnorePointerWithSemantics extends SingleChildRenderObjectWidget {
+  const IgnorePointerWithSemantics({super.key, super.child});
+
+  @override
+  RenderIgnorePointerWithSemantics createRenderObject(BuildContext context) {
+    return RenderIgnorePointerWithSemantics();
+  }
+}
+
+class RenderIgnorePointerWithSemantics extends RenderProxyBox {
+  RenderIgnorePointerWithSemantics();
+
+  @override
+  bool hitTest(BoxHitTestResult result, { required Offset position }) => false;
+}

lib/ui/common/modals/fullscreen_url_img_viewer.dart

@@ -102,7 +102,7 @@ class _FullscreenUrlImgViewerState extends State<FullscreenUrlImgViewer> {
                           CircleIconBtn(
                             icon: AppIcons.prev,
                             onPressed: page == 0 ? null : () => _animateToPage(page - 1),
-                            semanticLabel: $strings.semanticsNext(''),
+                            semanticLabel: $strings.semanticsPrevious(''),
                           ),
                           Gap($styles.insets.xs),
                           CircleIconBtn(

lib/ui/common/wonderous_logo.dart

@@ -9,6 +9,7 @@ class WonderousLogo extends StatelessWidget {
   @override
   Widget build(BuildContext context) => Image.asset(
         ImagePaths.appLogoPlain,
+        excludeFromSemantics: true,
         fit: BoxFit.cover,
         width: width,
         filterQuality: FilterQuality.high,

lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart

@@ -5,6 +5,7 @@ import 'package:wonders/logic/data/highlight_data.dart';
 import 'package:wonders/ui/common/app_icons.dart';
 import 'package:wonders/ui/common/controls/app_header.dart';
 import 'package:wonders/ui/common/controls/app_page_indicator.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 import 'package:wonders/ui/common/static_text_scale.dart';
 
 part 'widgets/_blurred_image_bg.dart';

lib/ui/screens/artifact/artifact_carousel/widgets/_bottom_text_content.dart

@@ -26,8 +26,7 @@ class _BottomTextContent extends StatelessWidget {
               Gap($styles.insets.md),
               Column(
                 children: [
-                  IgnorePointer(
+                  IgnorePointerWithSemantics(
-                    ignoringSemantics: false,
                     child: Semantics(
                       button: true,
                       onIncrease: () => state._handleArtifactTap(_currentPage + 1),

lib/ui/screens/artifact/artifact_details/widgets/_info_column.dart

@@ -9,6 +9,7 @@ class _InfoColumn extends StatelessWidget {
     return Padding(
       padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg),
       child: SingleChildScrollView(
+        child: Focus(
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: [
@@ -62,6 +63,7 @@ class _InfoColumn extends StatelessWidget {
             ],
           ),
         ),
+      )
     );
   }
 }

lib/ui/screens/artifact/artifact_search/widgets/_search_input.dart

@@ -1,6 +1,7 @@
 part of '../artifact_search_screen.dart';
 
 /// Autopopulating textfield used for searching for Artifacts by name.
+const double _inputWidth = 400;
 class _SearchInput extends StatelessWidget {
   const _SearchInput({super.key, required this.onSubmit, required this.wonder});
   final void Function(String) onSubmit;
@@ -49,6 +50,7 @@ class _SearchInput extends StatelessWidget {
           child: Container(
             margin: EdgeInsets.only(top: $styles.insets.xxs),
             width: constraints.maxWidth,
+            constraints: BoxConstraints(maxWidth: _inputWidth),
             decoration: BoxDecoration(
               boxShadow: [
                 BoxShadow(
@@ -120,6 +122,7 @@ class _SearchInput extends StatelessWidget {
   Widget _buildInput(BuildContext context, TextEditingController textController, FocusNode focusNode, _) {
     Color captionColor = $styles.colors.caption;
     return Container(
+      constraints: BoxConstraints(maxWidth: _inputWidth),
       height: $styles.insets.xl,
       decoration: BoxDecoration(
         color: $styles.colors.offWhite,
@@ -134,7 +137,7 @@ class _SearchInput extends StatelessWidget {
               onSubmitted: onSubmit,
               controller: textController,
               focusNode: focusNode,
-              style: TextStyle(color: captionColor),
+              style: TextStyle(color: captionColor, ),
               textAlignVertical: TextAlignVertical.top,
               decoration: InputDecoration(
                 isDense: true,

lib/ui/screens/editorial/editorial_screen.dart

@@ -17,6 +17,7 @@ import 'package:wonders/ui/common/fullscreen_keyboard_list_scroller.dart';
 import 'package:wonders/ui/common/google_maps_marker.dart';
 import 'package:wonders/ui/common/gradient_container.dart';
 import 'package:wonders/ui/common/hidden_collectible.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 import 'package:wonders/ui/common/pop_router_on_over_scroll.dart';
 import 'package:wonders/ui/common/scaling_list_item.dart';
 import 'package:wonders/ui/common/static_text_scale.dart';

lib/ui/screens/editorial/widgets/_callout.dart

@@ -6,7 +6,8 @@ class _Callout extends StatelessWidget {
   const _Callout({super.key, required this.text});
   @override
   Widget build(BuildContext context) {
-    return IntrinsicHeight(
+    return Focus( 
+      child: IntrinsicHeight(
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
@@ -20,6 +21,7 @@ class _Callout extends StatelessWidget {
             )
           ],
         ),
+      )
     );
   }
 }

lib/ui/screens/editorial/widgets/_scrolling_content.dart

@@ -19,20 +19,20 @@ class _ScrollingContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    Widget buildText(String value) => Focus(child: Text(_fixNewlines(value), style: $styles.text.body));
+    Widget buildText(String value, bool useDropCaps) {
-
+      final bool skipCaps = !localeLogic.isEnglish || !useDropCaps;
-    Widget buildDropCapText(String value) {
       final TextStyle dropStyle = $styles.text.dropCase;
       final TextStyle bodyStyle = $styles.text.body;
       final String dropChar = value.substring(0, 1);
       final textScale = MediaQuery.of(context).textScaleFactor;
       final double dropCapWidth = StringUtils.measure(dropChar, dropStyle).width * textScale;
-      final bool skipCaps = !localeLogic.isEnglish;
+      return Focus(
-      return Semantics(
+        child: Semantics(
           label: value,
           child: ExcludeSemantics(
-          child: !skipCaps
+            child: skipCaps
-              ? DropCapText(
+                ? Text(_fixNewlines(value), style: bodyStyle)
+                : DropCapText(
                     _fixNewlines(value).substring(1),
                     dropCap: DropCap(
                       width: dropCapWidth,
@@ -56,8 +56,8 @@ class _ScrollingContent extends StatelessWidget {
                       height: 1,
                     ),
                   )
-              : Text(value, style: bodyStyle),
           ),
+        )
       );
     }
 
@@ -93,7 +93,7 @@ class _ScrollingContent extends StatelessWidget {
                     Center(child: buildHiddenCollectible(slot: 0)),
 
                     /// History 1
-                    buildDropCapText(data.historyInfo1),
+                    buildText(data.historyInfo1, true),
 
                     /// Quote1
                     _CollapsingPullQuoteImage(data: data, scrollPos: scrollPos),
@@ -103,11 +103,11 @@ class _ScrollingContent extends StatelessWidget {
                     _Callout(text: data.callout1),
 
                     /// History 2
-                    buildText(data.historyInfo2),
+                    buildText(data.historyInfo2, false),
                     _SectionDivider(scrollPos, sectionNotifier, index: 1),
 
                     /// Construction 1
-                    buildDropCapText(data.constructionInfo1),
+                    buildText(data.constructionInfo1, true),
                     Center(child: buildHiddenCollectible(slot: 2)),
                   ]),
                   Gap($styles.insets.md),
@@ -119,14 +119,14 @@ class _ScrollingContent extends StatelessWidget {
                     _Callout(text: data.callout2),
 
                     /// Construction 2
-                    buildText(data.constructionInfo2),
+                    buildText(data.constructionInfo2, false),
                     _SlidingImageStack(scrollPos: scrollPos, type: data.type),
                     _SectionDivider(scrollPos, sectionNotifier, index: 2),
 
                     /// Location
-                    buildDropCapText(data.locationInfo1),
+                    buildText(data.locationInfo1, true),
                     _LargeSimpleQuote(text: data.pullQuote2, author: data.pullQuote2Author),
-                    buildText(data.locationInfo2),
+                    buildText(data.locationInfo2, false),
                   ]),
                   Gap($styles.insets.md),
                   _MapsThumbnail(data),
@@ -242,7 +242,7 @@ class _MapsThumbnailState extends State<_MapsThumbnail> {
                   child: Stack(
                     children: [
                       Positioned.fill(child: ColoredBox(color: Colors.transparent)),
-                      IgnorePointer(
+                      IgnorePointerWithSemantics(
                         child: GoogleMap(
                           markers: {getMapsMarker(startPos.target)},
                           zoomControlsEnabled: false,

lib/ui/screens/home/wonders_home_screen.dart

@@ -4,6 +4,7 @@ import 'package:wonders/ui/common/app_icons.dart';
 import 'package:wonders/ui/common/controls/app_header.dart';
 import 'package:wonders/ui/common/controls/app_page_indicator.dart';
 import 'package:wonders/ui/common/gradient_container.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 import 'package:wonders/ui/common/previous_next_navigation.dart';
 import 'package:wonders/ui/common/themed_text.dart';
 import 'package:wonders/ui/common/utils/app_haptics.dart';
@@ -210,7 +211,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
   Widget _buildFgAndGradients() {
     Widget buildSwipeableBgGradient(Color fgColor) {
       return _swipeController.buildListener(builder: (swipeAmt, isPointerDown, _) {
-        return IgnorePointer(
+        return IgnorePointerWithSemantics(
           child: FractionallySizedBox(
             heightFactor: .6,
             child: Container(
@@ -248,7 +249,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
           return Animate(
               effects: const [FadeEffect()],
               onPlay: _handleFadeAnimInit,
-              child: IgnorePointer(child: WonderIllustration(e.type, config: config)));
+              child: IgnorePointerWithSemantics(child: WonderIllustration(e.type, config: config)));
         });
       }),
 
@@ -277,8 +278,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
 
                   /// Title Content
                   LightText(
-                    child: IgnorePointer(
+                    child: IgnorePointerWithSemantics(
-                      ignoringSemantics: false,
                       child: Transform.translate(
                         offset: Offset(0, 30),
                         child: Column(

lib/ui/screens/intro/intro_screen.dart

@@ -4,6 +4,7 @@ import 'package:wonders/logic/common/platform_info.dart';
 import 'package:wonders/ui/common/app_icons.dart';
 import 'package:wonders/ui/common/controls/app_page_indicator.dart';
 import 'package:wonders/ui/common/gradient_container.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 import 'package:wonders/ui/common/previous_next_navigation.dart';
 import 'package:wonders/ui/common/static_text_scale.dart';
 import 'package:wonders/ui/common/themed_text.dart';
@@ -112,8 +113,7 @@ class _IntroScreenState extends State<IntroScreen> {
                     ),
                   ),
 
-                  IgnorePointer(
+                  IgnorePointerWithSemantics(
-                    ignoringSemantics: false,
                     child: Column(children: [
                       Spacer(),
 
@@ -325,6 +325,7 @@ class _PageImage extends StatelessWidget {
         SizedBox.expand(
           child: Image.asset(
             '${ImagePaths.common}/intro-${data.img}.jpg',
+            excludeFromSemantics: true,
             fit: BoxFit.cover,
             alignment: Alignment.centerRight,
           ),
@@ -332,6 +333,7 @@ class _PageImage extends StatelessWidget {
         Positioned.fill(
             child: Image.asset(
           '${ImagePaths.common}/intro-mask-${data.mask}.png',
+          excludeFromSemantics: true,
           fit: BoxFit.fill,
         )),
       ],

lib/ui/screens/photo_gallery/photo_gallery.dart

@@ -7,6 +7,7 @@ import 'package:wonders/ui/common/controls/app_loading_indicator.dart';
 import 'package:wonders/ui/common/controls/eight_way_swipe_detector.dart';
 import 'package:wonders/ui/common/fullscreen_keyboard_listener.dart';
 import 'package:wonders/ui/common/hidden_collectible.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 import 'package:wonders/ui/common/modals/fullscreen_url_img_viewer.dart';
 import 'package:wonders/ui/common/unsplash_photo.dart';
 import 'package:wonders/ui/common/utils/app_haptics.dart';

lib/ui/screens/photo_gallery/widgets/_animated_cutout_overlay.dart

@@ -31,7 +31,7 @@ class _AnimatedCutoutOverlay extends StatelessWidget {
           effects: [CustomEffect(builder: _buildAnimatedCutout, curve: Curves.easeOut, duration: duration)],
           key: animationKey,
           onComplete: (c) => c.reverse(),
-          child: IgnorePointer(child: Container(color: Colors.black.withOpacity(opacity))),
+          child: IgnorePointerWithSemantics(child: Container(color: Colors.black.withOpacity(opacity))),
         ),
       ],
     );

lib/ui/screens/timeline/timeline_screen.dart

@@ -11,6 +11,7 @@ import 'package:wonders/ui/common/blend_mask.dart';
 import 'package:wonders/ui/common/centered_box.dart';
 import 'package:wonders/ui/common/controls/app_header.dart';
 import 'package:wonders/ui/common/dashed_line.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 import 'package:wonders/ui/common/list_gradient.dart';
 import 'package:wonders/ui/common/timeline_event_card.dart';
 import 'package:wonders/ui/common/utils/app_haptics.dart';

lib/ui/screens/timeline/widgets/_event_markers.dart

@@ -54,8 +54,7 @@ class _EventMarkersState extends State<_EventMarkers> {
 
   @override
   Widget build(BuildContext context) {
-    return IgnorePointer(
+    return IgnorePointerWithSemantics(
-      ignoringSemantics: false,
       child: LayoutBuilder(builder: (_, constraints) {
         /// Figure out which event is "selected"
         _updateSelectedEvent(constraints.maxHeight);

lib/ui/screens/timeline/widgets/_event_popups.dart

@@ -35,8 +35,7 @@ class _EventPopupsState extends State<_EventPopups> {
     final evt = _eventToShow;
     return TopCenter(
       child: ClipRect(
-        child: IgnorePointer(
+        child: IgnorePointerWithSemantics(
-          ignoringSemantics: false,
           child: AnimatedSwitcher(
             duration: $styles.times.fast,
             child: evt == null

lib/ui/screens/timeline/widgets/_scrolling_viewport.dart

@@ -69,8 +69,7 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
           _buildScrollingArea(context).animate().fadeIn(),
 
           // Dashed line with a year that changes as we scroll
-          IgnorePointer(
+          IgnorePointerWithSemantics(
-            ignoringSemantics: false,
             child: AnimatedBuilder(
               animation: controller.scroller,
               builder: (_, __) {

lib/ui/screens/timeline/widgets/_timeline_section.dart

@@ -20,8 +20,7 @@ class TimelineSection extends StatelessWidget {
         StringUtils.formatYr(data.startYr),
         StringUtils.formatYr(data.endYr),
       )}',
-      child: IgnorePointer(
+      child: IgnorePointerWithSemantics(
-        ignoringSemantics: false,
         child: Container(
           alignment: Alignment(0, -1 + fraction * 2),
           padding: EdgeInsets.all($styles.insets.xs),

lib/ui/screens/timeline/widgets/_year_markers.dart

@@ -13,8 +13,7 @@ class _YearMarkers extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return IgnorePointer(
+    return IgnorePointerWithSemantics(
-      ignoringSemantics: false,
       child: LayoutBuilder(builder: (_, constraints) {
         int interval = 100;
         if (constraints.maxHeight < 800) {

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

@@ -64,7 +64,7 @@ class _EventsListState extends State<_EventsList> {
           key: PageStorageKey('eventsList'),
           child: Column(
             children: [
-              IgnorePointer(child: Gap(widget.topHeight)),
+              IgnorePointerWithSemantics(child: Gap(widget.topHeight)),
               Container(
                 decoration: BoxDecoration(
                   color: $styles.colors.black,
@@ -120,7 +120,7 @@ class _EventsListState extends State<_EventsList> {
             if (showBackdrop) ...[
               AppBackdrop(
                   strength: backdropAmt,
-                  child: IgnorePointer(
+                  child: IgnorePointerWithSemantics(
                     child: Container(
                       color: $styles.colors.black.withOpacity(backdropAmt * .6),
                     ),

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

@@ -73,6 +73,7 @@ class _WonderImageWithTimeline extends StatelessWidget {
             clipper: CurvedTopClipper(),
             child: Image.asset(
               data.type.flattened,
+              excludeFromSemantics: true,
               width: 200,
               fit: BoxFit.cover,
               alignment: Alignment(0, -.5),

lib/ui/screens/wonder_events/wonder_events.dart

@@ -8,6 +8,7 @@ import 'package:wonders/ui/common/centered_box.dart';
 import 'package:wonders/ui/common/controls/app_header.dart';
 import 'package:wonders/ui/common/curved_clippers.dart';
 import 'package:wonders/ui/common/hidden_collectible.dart';
+import 'package:wonders/ui/common/ignore_pointer.dart';
 import 'package:wonders/ui/common/list_gradient.dart';
 import 'package:wonders/ui/common/themed_text.dart';
 import 'package:wonders/ui/common/timeline_event_card.dart';

lib/ui/wonder_illustrations/common/animated_clouds.dart

@@ -138,6 +138,7 @@ class _Cloud extends StatelessWidget {
         scaleY: scale * (flipY ? -1 : 1),
         child: Image.asset(
           ImagePaths.cloud,
+          excludeFromSemantics: true,
           opacity: AlwaysStoppedAnimation(.4 * opacity),
           width: size * scale,
           fit: BoxFit.fitWidth,

lib/ui/wonder_illustrations/common/illustration_piece.dart

@@ -86,7 +86,12 @@ class _IllustrationPieceState extends State<IllustrationPiece> {
             final anim = wonderBuilder.anim;
             final curvedAnim = Curves.easeOut.transform(anim.value);
             final config = wonderBuilder.widget.config;
-            Widget img = Image.asset(imgPath, opacity: anim, fit: BoxFit.fitHeight);
+            Widget img = Image.asset(
+              imgPath, 
+              excludeFromSemantics: true,
+              opacity: anim, 
+              fit: BoxFit.fitHeight
+            );
             // Add overflow box so image doesn't get clipped as we translate it around
             img = OverflowBox(maxWidth: 2500, child: img);
 

lib/ui/wonder_illustrations/common/paint_textures.dart

@@ -18,6 +18,7 @@ class IllustrationTexture extends StatelessWidget {
               scaleX: scale * (flipX ? -1 : 1),
               scaleY: scale * (flipY ? -1 : 1),
               child: Image.asset(path,
+                  excludeFromSemantics: true,
                   repeat: ImageRepeat.repeat,
                   fit: BoxFit.contain,
                   alignment: Alignment.topCenter,

web/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <!-- app info -->
   <title>Wonderous</title>