accessibility: fixed navigation with TalkBack

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 ## <a id="unreleased"></a>[Unreleased]
 
+### Fixed
+
+- Accessibility: navigation with TalkBack
+
 ## <a id="v1.8.2"></a>[v1.8.2] - 2023-02-28
 
 ### Added

lib/widgets/collection/app_bar.dart

@@ -23,7 +23,9 @@ import 'package:aves/widgets/common/action_controls/togglers/favourite.dart';
 import 'package:aves/widgets/common/action_controls/togglers/title_search.dart';
 import 'package:aves/widgets/common/app_bar/app_bar_subtitle.dart';
 import 'package:aves/widgets/common/app_bar/app_bar_title.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/container.dart';
+import 'package:aves/widgets/common/basic/popup/expansion_panel.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/identity/aves_app_bar.dart';
 import 'package:aves/widgets/common/identity/buttons/captioned_button.dart';
@@ -405,10 +407,7 @@ class _CollectionAppBarState extends State<CollectionAppBar> with SingleTickerPr
                 },
               ),
               if (isSelecting && !settings.isReadOnly && appMode == AppMode.main && !isTrash)
-                PopupMenuItem<EntrySetAction>(
-                  enabled: hasSelection,
-                  padding: EdgeInsets.zero,
-                  child: PopupMenuItemExpansionPanel<EntrySetAction>(
+                PopupMenuExpansionPanel<EntrySetAction>(
                   enabled: hasSelection,
                   value: 'edit',
                   icon: AIcons.edit,
@@ -418,7 +417,6 @@ class _CollectionAppBarState extends State<CollectionAppBar> with SingleTickerPr
                     ...EntrySetActions.edit.where((v) => isVisible(v) && !selectionQuickActions.contains(v)).map((action) => _toMenuItem(action, enabled: canApply(action), selection: selection)),
                   ],
                 ),
-                ),
             ];
 
             return [
@@ -529,7 +527,7 @@ class _CollectionAppBarState extends State<CollectionAppBar> with SingleTickerPr
     );
   }
 
-  PopupMenuItem<EntrySetAction> _buildRotateAndFlipMenuItems(
+  PopupMenuEntry<EntrySetAction> _buildRotateAndFlipMenuItems(
     BuildContext context, {
     required bool Function(EntrySetAction action) canApply,
   }) {
@@ -558,11 +556,7 @@ class _CollectionAppBarState extends State<CollectionAppBar> with SingleTickerPr
           ),
         );
 
-    return PopupMenuItem(
-      child: TooltipTheme(
-        data: TooltipTheme.of(context).copyWith(
-          preferBelow: false,
-        ),
+    return PopupMenuItemContainer(
       child: Row(
         children: [
           buildDivider(),
@@ -574,7 +568,6 @@ class _CollectionAppBarState extends State<CollectionAppBar> with SingleTickerPr
           buildDivider(),
         ],
       ),
-      ),
     );
   }
 

lib/widgets/common/action_controls/quick_choosers/common/button.dart

@@ -56,6 +56,19 @@ abstract class ChooserQuickButtonState<T extends ChooserQuickButton<U>, U> exten
   Widget build(BuildContext context) {
     final _hasChooser = hasChooser;
 
+    Widget child = IconButton(
+      icon: icon,
+      onPressed: widget.onPressed,
+      focusNode: widget.focusNode,
+      tooltip: _hasChooser ? null : tooltip,
+    );
+    if (_hasChooser) {
+      child = Semantics(
+        tooltip: tooltip,
+        child: child,
+      );
+    }
+
     return GestureDetector(
       behavior: HitTestBehavior.opaque,
       onLongPressStart: _hasChooser ? _showChooser : null,
@@ -70,12 +83,7 @@ abstract class ChooserQuickButtonState<T extends ChooserQuickButton<U>, U> exten
             }
           : null,
       onLongPressCancel: _clearChooserOverlayEntry,
-      child: IconButton(
-        icon: icon,
-        onPressed: widget.onPressed,
-        focusNode: widget.focusNode,
-        tooltip: _hasChooser ? null : tooltip,
-      ),
+      child: child,
     );
   }
 

lib/widgets/common/action_controls/quick_choosers/share_chooser.dart

@@ -2,7 +2,7 @@ import 'dart:async';
 
 import 'package:aves/model/actions/share_actions.dart';
 import 'package:aves/widgets/common/action_controls/quick_choosers/common/menu.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:flutter/material.dart';
 
 class ShareQuickChooser extends StatelessWidget {

lib/widgets/common/action_controls/togglers/favourite.dart

@@ -2,7 +2,7 @@ import 'package:aves/model/entry.dart';
 import 'package:aves/model/favourites.dart';
 import 'package:aves/theme/colors.dart';
 import 'package:aves/theme/icons.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/fx/sweeper.dart';
 import 'package:aves/widgets/common/identity/buttons/captioned_button.dart';

lib/widgets/common/action_controls/togglers/mute.dart

@@ -1,7 +1,7 @@
 import 'dart:async';
 
 import 'package:aves/theme/icons.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/identity/buttons/captioned_button.dart';
 import 'package:aves/widgets/viewer/video/controller.dart';

lib/widgets/common/action_controls/togglers/play.dart

@@ -2,7 +2,7 @@ import 'dart:async';
 
 import 'package:aves/theme/durations.dart';
 import 'package:aves/theme/icons.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/identity/buttons/captioned_button.dart';
 import 'package:aves/widgets/viewer/video/controller.dart';

lib/widgets/common/action_controls/togglers/title_search.dart

@@ -1,6 +1,6 @@
 import 'package:aves/model/query.dart';
 import 'package:aves/theme/icons.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/identity/buttons/captioned_button.dart';
 import 'package:flutter/material.dart';

lib/widgets/common/basic/draggable_scrollbar/scrollbar.dart

@@ -212,7 +212,9 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
                 ),
               );
             }),
-          RepaintBoundary(
+          // exclude semantics, otherwise this layer will block access to content layers below when using TalkBack
+          ExcludeSemantics(
+            child: RepaintBoundary(
               child: GestureDetector(
                 onLongPressStart: (details) {
                   _longPressLastGlobalPosition = details.globalPosition;
@@ -248,6 +250,7 @@ class _DraggableScrollbarState extends State<DraggableScrollbar> with TickerProv
                 ),
               ),
             ),
+          ),
         ],
       ),
     );

lib/widgets/common/basic/popup/container.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+class PopupMenuItemContainer<T> extends PopupMenuEntry<T> {
+  final Widget child;
+
+  const PopupMenuItemContainer({
+    super.key,
+    this.height = kMinInteractiveDimension,
+    required this.child,
+  });
+
+  @override
+  final double height;
+
+  @override
+  bool represents(void value) => false;
+
+  @override
+  State<PopupMenuItemContainer> createState() => _TransitionPopupMenuItemState();
+}
+
+class _TransitionPopupMenuItemState extends State<PopupMenuItemContainer> {
+  @override
+  Widget build(BuildContext context) {
+    return TooltipTheme(
+      data: TooltipTheme.of(context).copyWith(
+        preferBelow: false,
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16),
+        child: widget.child,
+      ),
+    );
+  }
+}

lib/widgets/common/basic/popup/expansion_panel.dart

@@ -1,62 +1,9 @@
 import 'package:aves/theme/durations.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
-class MenuRow extends StatelessWidget {
-  final String text;
-  final Widget? icon;
-
-  const MenuRow({
-    super.key,
-    required this.text,
-    this.icon,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        if (icon != null)
-          Padding(
-            padding: const EdgeInsetsDirectional.only(end: 12),
-            child: IconTheme.merge(
-              data: IconThemeData(
-                color: ListTileTheme.of(context).iconColor,
-              ),
-              child: icon!,
-            ),
-          ),
-        Flexible(
-          child: Text(text),
-        ),
-      ],
-    );
-  }
-}
-
-// scale icons according to text scale
-class MenuIconTheme extends StatelessWidget {
-  final Widget child;
-
-  const MenuIconTheme({
-    super.key,
-    required this.child,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final iconTheme = IconTheme.of(context);
-    return IconTheme(
-      data: iconTheme.copyWith(
-        size: iconTheme.size! * MediaQuery.textScaleFactorOf(context),
-      ),
-      child: child,
-    );
-  }
-}
-
-class PopupMenuItemExpansionPanel<T> extends StatefulWidget {
+class PopupMenuExpansionPanel<T> extends PopupMenuEntry<T> {
   final bool enabled;
   final String value;
   final ValueNotifier<String?> expandedNotifier;
@@ -64,9 +11,10 @@ class PopupMenuItemExpansionPanel<T> extends StatefulWidget {
   final String title;
   final List<PopupMenuEntry<T>> items;
 
-  PopupMenuItemExpansionPanel({
+  PopupMenuExpansionPanel({
     super.key,
     this.enabled = true,
+    this.height = kMinInteractiveDimension,
     required this.value,
     ValueNotifier<String?>? expandedNotifier,
     required this.icon,
@@ -75,10 +23,16 @@ class PopupMenuItemExpansionPanel<T> extends StatefulWidget {
   }) : expandedNotifier = expandedNotifier ?? ValueNotifier(null);
 
   @override
-  State<PopupMenuItemExpansionPanel<T>> createState() => _PopupMenuItemExpansionPanelState<T>();
+  final double height;
+
+  @override
+  bool represents(void value) => false;
+
+  @override
+  State<PopupMenuExpansionPanel<T>> createState() => _PopupMenuExpansionPanelState<T>();
 }
 
-class _PopupMenuItemExpansionPanelState<T> extends State<PopupMenuItemExpansionPanel<T>> {
+class _PopupMenuExpansionPanelState<T> extends State<PopupMenuExpansionPanel<T>> {
   // ref `_kMenuHorizontalPadding` used in `PopupMenuItem`
   static const double _horizontalPadding = 16;
 
@@ -103,8 +57,13 @@ class _PopupMenuItemExpansionPanelState<T> extends State<PopupMenuItemExpansionP
           elevation: 0,
           children: [
             ExpansionPanel(
-              headerBuilder: (context, isExpanded) => DefaultTextStyle(
+              headerBuilder: (context, isExpanded) {
+                return DefaultTextStyle(
                   style: style,
+                  child: IconTheme.merge(
+                    data: IconThemeData(
+                      color: widget.enabled ? null : Theme.of(context).disabledColor,
+                    ),
                     child: Padding(
                       padding: const EdgeInsets.symmetric(horizontal: _horizontalPadding),
                       child: MenuRow(
@@ -113,6 +72,8 @@ class _PopupMenuItemExpansionPanelState<T> extends State<PopupMenuItemExpansionP
                       ),
                     ),
                   ),
+                );
+              },
               body: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [

lib/widgets/common/basic/popup/menu_row.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+class MenuRow extends StatelessWidget {
+  final String text;
+  final Widget? icon;
+
+  const MenuRow({
+    super.key,
+    required this.text,
+    this.icon,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (icon != null)
+          Padding(
+            padding: const EdgeInsetsDirectional.only(end: 12),
+            child: IconTheme.merge(
+              data: IconThemeData(
+                color: ListTileTheme.of(context).iconColor,
+              ),
+              child: icon!,
+            ),
+          ),
+        Flexible(
+          child: Text(text),
+        ),
+      ],
+    );
+  }
+}
+
+// scale icons according to text scale
+class MenuIconTheme extends StatelessWidget {
+  final Widget child;
+
+  const MenuIconTheme({
+    super.key,
+    required this.child,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final iconTheme = IconTheme.of(context);
+    return IconTheme(
+      data: iconTheme.copyWith(
+        size: iconTheme.size! * MediaQuery.textScaleFactorOf(context),
+      ),
+      child: child,
+    );
+  }
+}

lib/widgets/common/identity/aves_filter_chip.dart

@@ -14,7 +14,7 @@ import 'package:aves/theme/colors.dart';
 import 'package:aves/theme/durations.dart';
 import 'package:aves/theme/icons.dart';
 import 'package:aves/widgets/collection/filter_bar.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/providers/media_query_data_provider.dart';
 import 'package:aves/widgets/filter_grids/common/action_delegates/chip.dart';

lib/widgets/debug/app_debug_page.dart

@@ -8,7 +8,7 @@ import 'package:aves/model/source/collection_source.dart';
 import 'package:aves/services/analysis_service.dart';
 import 'package:aves/theme/durations.dart';
 import 'package:aves/utils/android_file_utils.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/basic/scaffold.dart';
 import 'package:aves/widgets/common/behaviour/pop/scope.dart';
 import 'package:aves/widgets/common/behaviour/pop/tv_navigation.dart';

lib/widgets/dialogs/entry_editors/rename_entry_set_page.dart

@@ -7,7 +7,7 @@ import 'package:aves/theme/durations.dart';
 import 'package:aves/theme/icons.dart';
 import 'package:aves/utils/constants.dart';
 import 'package:aves/widgets/collection/collection_grid.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/basic/scaffold.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/grid/theme.dart';

lib/widgets/dialogs/pick_dialogs/album_pick_page.dart

@@ -13,7 +13,7 @@ import 'package:aves/model/vaults/details.dart';
 import 'package:aves/model/vaults/vaults.dart';
 import 'package:aves/theme/durations.dart';
 import 'package:aves/theme/icons.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/identity/aves_filter_chip.dart';
 import 'package:aves/widgets/common/identity/buttons/captioned_button.dart';

lib/widgets/filter_grids/common/app_bar.dart

@@ -11,7 +11,7 @@ import 'package:aves/theme/durations.dart';
 import 'package:aves/widgets/common/action_controls/togglers/title_search.dart';
 import 'package:aves/widgets/common/app_bar/app_bar_subtitle.dart';
 import 'package:aves/widgets/common/app_bar/app_bar_title.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/identity/aves_app_bar.dart';
 import 'package:aves/widgets/common/identity/buttons/captioned_button.dart';

lib/widgets/map/map_page.dart

@@ -18,7 +18,7 @@ import 'package:aves/utils/debouncer.dart';
 import 'package:aves/widgets/collection/collection_page.dart';
 import 'package:aves/widgets/collection/entry_set_action_delegate.dart';
 import 'package:aves/widgets/common/basic/insets.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/basic/scaffold.dart';
 import 'package:aves/widgets/common/behaviour/routes.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';

lib/widgets/settings/privacy/file_picker/file_picker_page.dart

@@ -6,7 +6,7 @@ import 'package:aves/theme/durations.dart';
 import 'package:aves/theme/icons.dart';
 import 'package:aves/utils/android_file_utils.dart';
 import 'package:aves/utils/constants.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/basic/scaffold.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/identity/buttons/outlined_button.dart';

lib/widgets/settings/settings_page.dart

@@ -12,7 +12,7 @@ import 'package:aves/theme/icons.dart';
 import 'package:aves/widgets/common/action_mixins/feedback.dart';
 import 'package:aves/widgets/common/app_bar/app_bar_title.dart';
 import 'package:aves/widgets/common/basic/insets.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/basic/scaffold.dart';
 import 'package:aves/widgets/common/behaviour/pop/scope.dart';
 import 'package:aves/widgets/common/behaviour/pop/tv_navigation.dart';

lib/widgets/viewer/info/info_app_bar.dart

@@ -6,7 +6,7 @@ import 'package:aves/theme/durations.dart';
 import 'package:aves/theme/icons.dart';
 import 'package:aves/widgets/common/app_bar/app_bar_title.dart';
 import 'package:aves/widgets/common/app_bar/sliver_app_bar_title.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/viewer/action/entry_info_action_delegate.dart';
 import 'package:aves/widgets/viewer/info/info_search.dart';

lib/widgets/viewer/overlay/viewer_buttons.dart

@@ -11,8 +11,10 @@ import 'package:aves/widgets/common/action_controls/quick_choosers/tag_button.da
 import 'package:aves/widgets/common/action_controls/togglers/favourite.dart';
 import 'package:aves/widgets/common/action_controls/togglers/mute.dart';
 import 'package:aves/widgets/common/action_controls/togglers/play.dart';
-import 'package:aves/widgets/common/basic/menu.dart';
-import 'package:aves/widgets/common/basic/popup_menu_button.dart';
+import 'package:aves/widgets/common/basic/popup/container.dart';
+import 'package:aves/widgets/common/basic/popup/expansion_panel.dart';
+import 'package:aves/widgets/common/basic/popup/menu_button.dart';
+import 'package:aves/widgets/common/basic/popup/menu_row.dart';
 import 'package:aves/widgets/common/extensions/build_context.dart';
 import 'package:aves/widgets/common/identity/buttons/captioned_button.dart';
 import 'package:aves/widgets/common/identity/buttons/overlay_button.dart';
@@ -231,9 +233,7 @@ class ViewerButtonRowContent extends StatelessWidget {
                             if (pageEntry.canRotate || pageEntry.canFlip) _buildRotateAndFlipMenuItems(context),
                             ...topLevelActions.map((action) => _buildPopupMenuItem(context, action, videoController)),
                             if (exportActions.isNotEmpty)
-                              PopupMenuItem<EntryAction>(
-                                padding: EdgeInsets.zero,
-                                child: PopupMenuItemExpansionPanel<EntryAction>(
+                              PopupMenuExpansionPanel<EntryAction>(
                                 value: 'export',
                                 expandedNotifier: _popupExpandedNotifier,
                                 icon: AIcons.export,
@@ -244,11 +244,8 @@ class ViewerButtonRowContent extends StatelessWidget {
                                   ...exportExternalActions.map((action) => _buildPopupMenuItem(context, action, videoController)).toList(),
                                 ],
                               ),
-                              ),
                             if (videoActions.isNotEmpty)
-                              PopupMenuItem<EntryAction>(
-                                padding: EdgeInsets.zero,
-                                child: PopupMenuItemExpansionPanel<EntryAction>(
+                              PopupMenuExpansionPanel<EntryAction>(
                                 value: 'video',
                                 expandedNotifier: _popupExpandedNotifier,
                                 icon: AIcons.video,
@@ -257,7 +254,6 @@ class ViewerButtonRowContent extends StatelessWidget {
                                   ...videoActions.map((action) => _buildPopupMenuItem(context, action, videoController)).toList(),
                                 ],
                               ),
-                              ),
                             if (!kReleaseMode) ...[
                               const PopupMenuDivider(),
                               _buildPopupMenuItem(context, EntryAction.debug, videoController),
@@ -357,7 +353,7 @@ class ViewerButtonRowContent extends StatelessWidget {
     );
   }
 
-  PopupMenuItem<EntryAction> _buildRotateAndFlipMenuItems(BuildContext context) {
+  PopupMenuEntry<EntryAction> _buildRotateAndFlipMenuItems(BuildContext context) {
     Widget buildDivider() => const SizedBox(
           height: 16,
           child: VerticalDivider(
@@ -383,16 +379,7 @@ class ViewerButtonRowContent extends StatelessWidget {
           ),
         );
 
-    return PopupMenuItem(
-      padding: EdgeInsets.zero,
-      child: IconTheme.merge(
-        data: IconThemeData(
-          color: ListTileTheme.of(context).iconColor,
-        ),
-        child: ColoredBox(
-          color: PopupMenuTheme.of(context).color!,
-          child: Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 16),
+    return PopupMenuItemContainer(
       child: Row(
         children: [
           buildDivider(),
@@ -404,9 +391,6 @@ class ViewerButtonRowContent extends StatelessWidget {
           buildDivider(),
         ],
       ),
-          ),
-        ),
-      ),
     );
   }