소스 검색

Add accessibility tooltips to header drawer/back buttons

Wrapped the icon-only drawer and back buttons in HeaderButtonsComponent
with Tooltip widgets ("Menu openen" / "Terug"), which also serve as
screen-reader labels. Since this component is reused across nearly
every page, the fix applies app-wide.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
bob 1 개월 전
부모
커밋
8cd650f222

+ 4 - 4
ios/Runner.xcodeproj/project.pbxproj

@@ -44,8 +44,8 @@
 		97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
 		97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
-		6436409427A31CD200820AF7 /* nl */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = nl; path = nl.lproj/InfoPlist.strings; sourceTree = "<group>"; };
-		6436409D27A31CD500820AF7 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
+		6436409B27A31CDF00820AF7 /* nl */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = nl; path = nl.lproj/InfoPlist.strings; sourceTree = "<group>"; };
+		6436409F27A31CDE00820AF7 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
 		97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -225,8 +225,8 @@
 		6436409C27A31CD800820AF7 /* InfoPlist.strings */ = {
 			isa = PBXVariantGroup;
 			children = (
-				6436409427A31CD200820AF7 /* nl */,
-				6436409D27A31CD500820AF7 /* en */,
+				6436409B27A31CDF00820AF7 /* nl */,
+				6436409F27A31CDE00820AF7 /* en */,
 			);
 			name = InfoPlist.strings;
 			sourceTree = "<group>";

+ 1 - 0
lib/components/header_buttons_component_model.dart

@@ -4,6 +4,7 @@ import '/flutter_flow/flutter_flow_util.dart';
 import '/flutter_flow/flutter_flow_widgets.dart';
 import 'dart:ui';
 import 'header_buttons_component_widget.dart' show HeaderButtonsComponentWidget;
+import 'package:aligned_tooltip/aligned_tooltip.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';

+ 89 - 22
lib/components/header_buttons_component_widget.dart

@@ -3,6 +3,7 @@ import '/flutter_flow/flutter_flow_theme.dart';
 import '/flutter_flow/flutter_flow_util.dart';
 import '/flutter_flow/flutter_flow_widgets.dart';
 import 'dart:ui';
+import 'package:aligned_tooltip/aligned_tooltip.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
 import 'package:google_fonts/google_fonts.dart';
@@ -97,37 +98,103 @@ class _HeaderButtonsComponentWidgetState
       child: Row(
         mainAxisSize: MainAxisSize.max,
         children: [
-          FlutterFlowIconButton(
-            borderRadius: 8.0,
-            buttonSize: 40.0,
-            fillColor: Color(0xFFB50808),
-            icon: Icon(
-              Icons.dehaze_outlined,
-              color: FlutterFlowTheme.of(context).info,
-              size: 24.0,
+          AlignedTooltip(
+            content: Padding(
+              padding: EdgeInsets.all(4.0),
+              child: Text(
+                FFLocalizations.of(context).getText(
+                  '17msrach' /* Menu openen */,
+                ),
+                style: FlutterFlowTheme.of(context).bodyLarge.override(
+                      font: GoogleFonts.inter(
+                        fontWeight:
+                            FlutterFlowTheme.of(context).bodyLarge.fontWeight,
+                        fontStyle:
+                            FlutterFlowTheme.of(context).bodyLarge.fontStyle,
+                      ),
+                      letterSpacing: 0.0,
+                      fontWeight:
+                          FlutterFlowTheme.of(context).bodyLarge.fontWeight,
+                      fontStyle:
+                          FlutterFlowTheme.of(context).bodyLarge.fontStyle,
+                    ),
+              ),
             ),
-            onPressed: () async {
-              Scaffold.of(context).openDrawer();
-            },
-          ),
-          Padding(
-            padding: EdgeInsetsDirectional.fromSTEB(4.0, 0.0, 0.0, 0.0),
+            offset: 4.0,
+            preferredDirection: AxisDirection.down,
+            borderRadius: BorderRadius.circular(8.0),
+            backgroundColor: FlutterFlowTheme.of(context).secondaryBackground,
+            elevation: 4.0,
+            tailBaseWidth: 24.0,
+            tailLength: 12.0,
+            waitDuration: Duration(milliseconds: 100),
+            showDuration: Duration(milliseconds: 1500),
+            triggerMode: TooltipTriggerMode.tap,
             child: FlutterFlowIconButton(
-              borderColor: Color(0x00FF0000),
-              borderRadius: 30.0,
-              borderWidth: 1.0,
-              buttonSize: 50.0,
+              borderRadius: 8.0,
+              buttonSize: 40.0,
               fillColor: Color(0xFFB50808),
               icon: Icon(
-                Icons.arrow_back_outlined,
-                color: Colors.white,
-                size: 30.0,
+                Icons.dehaze_outlined,
+                color: FlutterFlowTheme.of(context).info,
+                size: 24.0,
               ),
               onPressed: () async {
-                context.pop();
+                Scaffold.of(context).openDrawer();
               },
             ),
           ),
+          AlignedTooltip(
+            content: Padding(
+              padding: EdgeInsets.all(4.0),
+              child: Text(
+                FFLocalizations.of(context).getText(
+                  'pj545url' /* Terug */,
+                ),
+                style: FlutterFlowTheme.of(context).bodyLarge.override(
+                      font: GoogleFonts.inter(
+                        fontWeight:
+                            FlutterFlowTheme.of(context).bodyLarge.fontWeight,
+                        fontStyle:
+                            FlutterFlowTheme.of(context).bodyLarge.fontStyle,
+                      ),
+                      letterSpacing: 0.0,
+                      fontWeight:
+                          FlutterFlowTheme.of(context).bodyLarge.fontWeight,
+                      fontStyle:
+                          FlutterFlowTheme.of(context).bodyLarge.fontStyle,
+                    ),
+              ),
+            ),
+            offset: 4.0,
+            preferredDirection: AxisDirection.down,
+            borderRadius: BorderRadius.circular(8.0),
+            backgroundColor: FlutterFlowTheme.of(context).secondaryBackground,
+            elevation: 4.0,
+            tailBaseWidth: 24.0,
+            tailLength: 12.0,
+            waitDuration: Duration(milliseconds: 100),
+            showDuration: Duration(milliseconds: 1500),
+            triggerMode: TooltipTriggerMode.tap,
+            child: Padding(
+              padding: EdgeInsetsDirectional.fromSTEB(4.0, 0.0, 0.0, 0.0),
+              child: FlutterFlowIconButton(
+                borderColor: Color(0x00FF0000),
+                borderRadius: 30.0,
+                borderWidth: 1.0,
+                buttonSize: 50.0,
+                fillColor: Color(0xFFB50808),
+                icon: Icon(
+                  Icons.arrow_back_outlined,
+                  color: Colors.white,
+                  size: 30.0,
+                ),
+                onPressed: () async {
+                  context.pop();
+                },
+              ),
+            ),
+          ),
         ],
       ),
     );

+ 11 - 0
lib/flutter_flow/internationalization.dart

@@ -656,6 +656,17 @@ final kTranslationsMap = <Map<String, Map<String, String>>>[
       'en': '',
     },
   },
+  // HeaderButtonsComponent
+  {
+    '17msrach': {
+      'nl': 'Menu openen',
+      'en': '',
+    },
+    'pj545url': {
+      'nl': 'Terug',
+      'en': '',
+    },
+  },
   // Miscellaneous
   {
     '95e9zpp5': {

+ 8 - 0
pubspec.lock

@@ -1,6 +1,14 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  aligned_tooltip:
+    dependency: "direct main"
+    description:
+      name: aligned_tooltip
+      sha256: "1f8d69cc560e693905f8d9e2e7b85312c854c91a447b818bac02a8d0c73adf72"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.1"
   args:
     dependency: transitive
     description:

+ 1 - 0
pubspec.yaml

@@ -27,6 +27,7 @@ dependencies:
     sdk: flutter
   flutter_web_plugins:
     sdk: flutter
+  aligned_tooltip: 0.0.1
   auto_size_text: 3.0.0
   cached_network_image: 3.4.1
   cached_network_image_platform_interface: 4.1.1